@glare-labs/mdk/styles/color.css

@glare-labs/mdk, Material Design Kit, mdk is a JavaScript constant library based on Material Design 3, providing constant data such as color, shape, shadow level, etc:

:root {
    --md-sys-color-background: light-dark(var(--md-sys-palette-neutral-98, #fef7ff), var(--md-sys-palette-neutral-6, #141218));
    --md-sys-color-error: light-dark(var(--md-sys-palette-error-40, #b3261e), var(--md-sys-palette-error-80, #f2b8b5));
    --md-sys-color-error-container: light-dark(var(--md-sys-palette-error-90, #f9dedc), var(--md-sys-palette-error-30, #8c1d18));
    --md-sys-color-inverse-on-surface: light-dark(var(--md-sys-palette-neutral-95, #f5eff7), var(--md-sys-palette-neutral-20, #322f35));
    --md-sys-color-inverse-primary: light-dark(var(--md-sys-palette-primary-80, #d0bcff), var(--md-sys-palette-primary-40, #6750a4));
    --md-sys-color-inverse-surface: light-dark(var(--md-sys-palette-neutral-20, #322f35), var(--md-sys-palette-neutral-90, #e6e0e9));
    --md-sys-color-on-background: light-dark(var(--md-sys-palette-neutral-10, #1d1b20), var(--md-sys-palette-neutral-90, #e6e0e9));
    --md-sys-color-on-error: light-dark(var(--md-sys-palette-error-100, #fff), var(--md-sys-palette-error-20, #601410));
    --md-sys-color-on-error-container: light-dark(var(--md-sys-palette-error-10, #410e0b), var(--md-sys-palette-error-90, #f9dedc));
    --md-sys-color-on-primary: light-dark(var(--md-sys-palette-primary-100, #fff), var(--md-sys-palette-primary-20, #381e72));
    --md-sys-color-on-primary-container: light-dark(var(--md-sys-palette-primary-10, #21005d), var(--md-sys-palette-primary-90, #eaddff));
    --md-sys-color-on-primary-fixed: var(--md-sys-palette-primary-10, #21005d);
    --md-sys-color-on-primary-fixed-variant: var(--md-sys-palette-primary-30, #4f378b);
    --md-sys-color-on-secondary: light-dark(var(--md-sys-palette-secondary-100, #fff), var(--md-sys-palette-secondary-20, #332d41));
    --md-sys-color-on-secondary-container: light-dark(var(--md-sys-palette-secondary-10, #1d192b), var(--md-sys-palette-secondary-90, #e8def8));
    --md-sys-color-on-secondary-fixed: var(--md-sys-palette-secondary-10, #1d192b);
    --md-sys-color-on-secondary-fixed-variant: var(--md-sys-palette-secondary-30, #4a4458);
    --md-sys-color-on-surface: light-dark(var(--md-sys-palette-neutral-10, #1d1b20), var(--md-sys-palette-neutral-90, #e6e0e9));
    --md-sys-color-on-surface-variant: light-dark(var(--md-sys-palette-neutral-variant-30, #49454f), var(--md-sys-palette-neutral-variant-80, #cac4d0));
    --md-sys-color-on-tertiary: light-dark(var(--md-sys-palette-tertiary-100, #fff), var(--md-sys-palette-tertiary-20, #492532));
    --md-sys-color-on-tertiary-container: light-dark(var(--md-sys-palette-tertiary-10, #31111d), var(--md-sys-palette-tertiary-90, #ffd8e4));
    --md-sys-color-on-tertiary-fixed: var(--md-sys-palette-tertiary-10, #31111d);
    --md-sys-color-on-tertiary-fixed-variant: var(--md-sys-palette-tertiary-30, #633b48);
    --md-sys-color-outline: light-dark(var(--md-sys-palette-neutral-50, #79767d), var(--md-sys-palette-neutral-60, #938f96));
    --md-sys-color-outline-variant: light-dark(var(--md-sys-palette-neutral-variant-80, #cac4d0), var(--md-sys-palette-neutral-variant-30, #49454f));
    --md-sys-color-primary: light-dark(var(--md-sys-palette-primary-40, #6750a4), var(--md-sys-palette-primary-80, #d0bcff));
    --md-sys-color-primary-container: light-dark(var(--md-sys-palette-primary-90, #eaddff), var(--md-sys-palette-primary-30, #4f378b));
    --md-sys-color-primary-fixed: var(--md-sys-palette-primary-90, #eaddff);
    --md-sys-color-primary-fixed-dim: var(--md-sys-palette-primary-80, #d0bcff);
    --md-sys-color-scrim: var(--md-sys-palette-neutral-0, #000);
    --md-sys-color-secondary: light-dark(var(--md-sys-palette-secondary-40, #625b71), var(--md-sys-palette-secondary-80, #ccc2dc));
    --md-sys-color-secondary-container: light-dark(var(--md-sys-palette-secondary-90, #e8def8), var(--md-sys-palette-secondary-30, #4a4458));
    --md-sys-color-secondary-fixed: var(--md-sys-palette-secondary-90, #e8def8);
    --md-sys-color-secondary-fixed-dim: var(--md-sys-palette-secondary-80, #ccc2dc);
    --md-sys-color-shadow: var(--md-sys-palette-neutral-0, #000);
    --md-sys-color-surface: light-dark(var(--md-sys-palette-neutral-98, #fef7ff), var(--md-sys-palette-neutral-6, #141218));
    --md-sys-color-surface-bright: light-dark(var(--md-sys-palette-neutral-98, #fef7ff), var(--md-sys-palette-neutral-24, #3b383e));
    --md-sys-color-surface-container: light-dark(var(--md-sys-palette-neutral-94, #f3edf7), var(--md-sys-palette-neutral-12, #211f26));
    --md-sys-color-surface-container-high: light-dark(var(--md-sys-palette-neutral-92, #ece6f0), var(--md-sys-palette-neutral-17, #2b2930));
    --md-sys-color-surface-container-highest: light-dark(var(--md-sys-palette-neutral-90, #e6e0e9), var(--md-sys-palette-neutral-22, #36343b));
    --md-sys-color-surface-container-low: light-dark(var(--md-sys-palette-neutral-96, #f7f2fa), var(--md-sys-palette-neutral-10, #1d1b20));
    --md-sys-color-surface-container-lowest: light-dark(var(--md-sys-palette-neutral-100, #fff), var(--md-sys-palette-neutral-4, #0f0d13));
    --md-sys-color-surface-dim: light-dark(var(--md-sys-palette-neutral-87, #ded8e1), var(--md-sys-palette-neutral-6, #141218));
    --md-sys-color-surface-tint: light-dark(var(--md-sys-palette-primary-40, #6750a4), var(--md-sys-palette-primary-80, #d0bcff));
    --md-sys-color-surface-variant: light-dark(var(--md-sys-palette-neutral-variant-90, #e7e0ec), var(--md-sys-palette-neutral-variant-30, #49454f));
    --md-sys-color-tertiary: light-dark(var(--md-sys-palette-tertiary-40, #7d5260), var(--md-sys-palette-tertiary-80, #efb8c8));
    --md-sys-color-tertiary-container: light-dark(var(--md-sys-palette-tertiary-90, #ffd8e4), var(--md-sys-palette-tertiary-30, #633b48));
    --md-sys-color-tertiary-fixed: var(--md-sys-palette-tertiary-90, #ffd8e4);
    --md-sys-color-tertiary-fixed-dim: var(--md-sys-palette-tertiary-80, #efb8c8);
}

.background {
    background-color: var(--md-sys-color-background);
}

.error {
    background-color: var(--md-sys-color-error);
}

.error-container {
    background-color: var(--md-sys-color-error-container);
}

.inverse-on-surface {
    color: var(--md-sys-color-inverse-on-surface);
}

.inverse-primary {
    background-color: var(--md-sys-color-inverse-primary);
}

.inverse-surface {
    background-color: var(--md-sys-color-inverse-surface);
}

.on-background {
    color: var(--md-sys-color-on-background);
}

.on-error {
    color: var(--md-sys-color-on-error);
}

.on-error-container {
    color: var(--md-sys-color-on-error-container);
}

.on-primary {
    color: var(--md-sys-color-on-primary);
}

.on-primary-container {
    color: var(--md-sys-color-on-primary-container);
}

.on-primary-fixed {
    color: var(--md-sys-color-on-primary-fixed);
}

.on-primary-fixed-variant {
    color: var(--md-sys-color-on-primary-fixed-variant);
}

.on-secondary {
    color: var(--md-sys-color-on-secondary);
}

.on-secondary-container {
    color: var(--md-sys-color-on-secondary-container);
}

.on-secondary-fixed {
    color: var(--md-sys-color-on-secondary-fixed);
}

.on-secondary-fixed-variant {
    color: var(--md-sys-color-on-secondary-fixed-variant);
}

.on-surface {
    color: var(--md-sys-color-on-surface);
}

.on-surface-variant {
    color: var(--md-sys-color-on-surface-variant);
}

.on-tertiary {
    color: var(--md-sys-color-on-tertiary);
}

.on-tertiary-container {
    color: var(--md-sys-color-on-tertiary-container);
}

.on-tertiary-fixed {
    color: var(--md-sys-color-on-tertiary-fixed);
}

.on-tertiary-fixed-variant {
    color: var(--md-sys-color-on-tertiary-fixed-variant);
}

.outline {
    border-color: var(--md-sys-color-outline);
    outline-color: var(--md-sys-color-outline);
}

.outline-variant {
    border-color: var(--md-sys-color-outline-variant);
    outline-color: var(--md-sys-color-outline-variant);
}

.primary {
    background-color: var(--md-sys-color-primary);
}

.primary-container {
    background-color: var(--md-sys-color-primary-container);
}

.primary-fixed {
    background-color: var(--md-sys-color-primary-fixed);
}

.primary-fixed-dim {
    background-color: var(--md-sys-color-primary-fixed-dim);
}

.scrim {
    background-color: var(--md-sys-color-scrim);
}

.secondary {
    background-color: var(--md-sys-color-secondary);
}

.secondary-container {
    background-color: var(--md-sys-color-secondary-container);
}

.secondary-fixed {
    background-color: var(--md-sys-color-secondary-fixed);
}

.secondary-fixed-dim {
    background-color: var(--md-sys-color-secondary-fixed-dim);
}

.shadow {
    background-color: var(--md-sys-color-shadow);
}

.surface {
    background-color: var(--md-sys-color-surface);
}

.surface-bright {
    background-color: var(--md-sys-color-surface-bright);
}

.surface-container {
    background-color: var(--md-sys-color-surface-container);
}

.surface-container-high {
    background-color: var(--md-sys-color-surface-container-high);
}

.surface-container-highest {
    background-color: var(--md-sys-color-surface-container-highest);
}

.surface-container-low {
    background-color: var(--md-sys-color-surface-container-low);
}

.surface-container-lowest {
    background-color: var(--md-sys-color-surface-container-lowest);
}

.surface-dim {
    background-color: var(--md-sys-color-surface-dim);
}

.surface-tint {
    background-color: var(--md-sys-color-surface-tint);
}

.surface-variant {
    background-color: var(--md-sys-color-surface-variant);
}

.tertiary {
    background-color: var(--md-sys-color-tertiary);
}

.tertiary-container {
    background-color: var(--md-sys-color-tertiary-container);
}

.tertiary-fixed {
    background-color: var(--md-sys-color-tertiary-fixed);
}

.tertiary-fixed-dim {
    background-color: var(--md-sys-color-tertiary-fixed-dim);
}