@sandlada/material-design-css
Version:
A ready-made npm package for a collection of css styles in the material design style.
276 lines (222 loc) • 11.9 kB
CSS
@layer material-design-system.color {
:root {
--_text-color-primary-palette-key-color : var(--md-sys-color-primary-palette-key-color, light-dark(#578400, #578400));
--_text-color-secondary-palette-key-color : var(--md-sys-color-secondary-palette-key-color, light-dark(#697e4a, #697e4a));
--_text-color-tertiary-palette-key-color : var(--md-sys-color-tertiary-palette-key-color, light-dark(#00885e, #00885e));
--_text-color-neutral-palette-key-color : var(--md-sys-color-neutral-palette-key-color, light-dark(#75786c, #75786c));
--_text-color-neutral-variant-palette-key-color: var(--md-sys-color-neutral-variant-palette-key-color, light-dark(#737966, #737966));
--_text-color-background : var(--md-sys-color-background, light-dark(#f9fbec, #11140c));
--_text-color-on-background : var(--md-sys-color-on-background, light-dark(#1a1d14, #e2e4d5));
--_text-color-surface : var(--md-sys-color-surface, light-dark(#f9fbec, #11140c));
--_text-color-surface-dim : var(--md-sys-color-surface-dim, light-dark(#d9dbcd, #11140c));
--_text-color-surface-bright : var(--md-sys-color-surface-bright, light-dark(#f9fbec, #373a30));
--_text-color-surface-container-lowest : var(--md-sys-color-surface-container-lowest, light-dark(#ffffff, #0c0f07));
--_text-color-surface-container-low : var(--md-sys-color-surface-container-low, light-dark(#f3f5e6, #1a1d14));
--_text-color-surface-container : var(--md-sys-color-surface-container, light-dark(#edefe1, #1e2118));
--_text-color-surface-container-high : var(--md-sys-color-surface-container-high, light-dark(#e7e9db, #282b22));
--_text-color-surface-container-highest : var(--md-sys-color-surface-container-highest, light-dark(#e2e4d5, #33362c));
--_text-color-on-surface : var(--md-sys-color-on-surface, light-dark(#1a1d14, #e2e4d5));
--_text-color-surface-variant : var(--md-sys-color-surface-variant, light-dark(#dfe5cf, #434938));
--_text-color-on-surface-variant : var(--md-sys-color-on-surface-variant, light-dark(#434938, #c3c9b3));
--_text-color-inverse-surface : var(--md-sys-color-inverse-surface, light-dark(#2e3228, #e2e4d5));
--_text-color-inverse-on-surface : var(--md-sys-color-inverse-on-surface, light-dark(#f0f2e3, #2e3228));
--_text-color-outline : var(--md-sys-color-outline, light-dark(#737967, #8d937f));
--_text-color-outline-variant : var(--md-sys-color-outline-variant, light-dark(#c3c9b3, #434938));
--_text-color-shadow : var(--md-sys-color-shadow, light-dark(#000000, #000000));
--_text-color-scrim : var(--md-sys-color-scrim, light-dark(#000000, #000000));
--_text-color-surface-tint : var(--md-sys-color-surface-tint, light-dark(#446900, #a3d656));
--_text-color-primary : var(--md-sys-color-primary, light-dark(#000000, #ffffff));
--_text-color-on-primary : var(--md-sys-color-on-primary, light-dark(#bef36f, #111f00));
--_text-color-primary-container : var(--md-sys-color-primary-container, light-dark(#2a4200, #b0e563));
--_text-color-on-primary-container : var(--md-sys-color-on-primary-container, light-dark(#ffffff, #000000));
--_text-color-inverse-primary : var(--md-sys-color-inverse-primary, light-dark(#a3d656, #446900));
--_text-color-secondary : var(--md-sys-color-secondary, light-dark(#516533, #b7cf93));
--_text-color-on-secondary : var(--md-sys-color-on-secondary, light-dark(#ffffff, #111f00));
--_text-color-secondary-container : var(--md-sys-color-secondary-container, light-dark(#c5dda0, #3a4d1e));
--_text-color-on-secondary-container : var(--md-sys-color-on-secondary-container, light-dark(#111f00, #d3ebad));
--_text-color-tertiary : var(--md-sys-color-tertiary, light-dark(#00452e, #8df7c5));
--_text-color-on-tertiary : var(--md-sys-color-on-tertiary, light-dark(#8df7c5, #002114));
--_text-color-tertiary-container : var(--md-sys-color-tertiary-container, light-dark(#00855c, #33a376));
--_text-color-on-tertiary-container : var(--md-sys-color-on-tertiary-container, light-dark(#ffffff, #000000));
--_text-color-error : var(--md-sys-color-error, light-dark(#ba1a1a, #ffb4ab));
--_text-color-on-error : var(--md-sys-color-on-error, light-dark(#ffffff, #690005));
--_text-color-error-container : var(--md-sys-color-error-container, light-dark(#ffdad6, #93000a));
--_text-color-on-error-container : var(--md-sys-color-on-error-container, light-dark(#410002, #ffdad6));
--_text-color-primary-fixed : var(--md-sys-color-primary-fixed, light-dark(#446900, #446900));
--_text-color-primary-fixed-dim : var(--md-sys-color-primary-fixed-dim, light-dark(#324f00, #324f00));
--_text-color-on-primary-fixed : var(--md-sys-color-on-primary-fixed, light-dark(#ffffff, #ffffff));
--_text-color-on-primary-fixed-variant : var(--md-sys-color-on-primary-fixed-variant, light-dark(#bef36f, #bef36f));
--_text-color-secondary-fixed : var(--md-sys-color-secondary-fixed, light-dark(#b7cf93, #b7cf93));
--_text-color-secondary-fixed-dim : var(--md-sys-color-secondary-fixed-dim, light-dark(#9db37a, #9db37a));
--_text-color-on-secondary-fixed : var(--md-sys-color-on-secondary-fixed, light-dark(#111f00, #111f00));
--_text-color-on-secondary-fixed-variant : var(--md-sys-color-on-secondary-fixed-variant, light-dark(#2f4114, #2f4114));
--_text-color-tertiary-fixed : var(--md-sys-color-tertiary-fixed, light-dark(#006c4a, #006c4a));
--_text-color-tertiary-fixed-dim : var(--md-sys-color-tertiary-fixed-dim, light-dark(#005237, #005237));
--_text-color-on-tertiary-fixed : var(--md-sys-color-on-tertiary-fixed, light-dark(#ffffff, #ffffff));
--_text-color-on-tertiary-fixed-variant : var(--md-sys-color-on-tertiary-fixed-variant, light-dark(#8df7c5, #8df7c5));
}
}
@layer material-design-system.utilities.text {
.text-primary-palette-key-color {
color: var(--_text-color-primary-palette-key-color);
}
.text-secondary-palette-key-color {
color: var(--_text-color-secondary-palette-key-color);
}
.text-tertiary-palette-key-color {
color: var(--_text-color-tertiary-palette-key-color);
}
.text-neutral-palette-key-color {
color: var(--_text-color-neutral-palette-key-color);
}
.text-neutral-variant-palette-key-color {
color: var(--_text-color-neutral-variant-palette-key-color);
}
.text-background {
color: var(--_text-color-background);
}
.text-on-background {
color: var(--_text-color-on-background);
}
.text-surface {
color: var(--_text-color-surface);
}
.text-surface-dim {
color: var(--_text-color-surface-dim);
}
.text-surface-bright {
color: var(--_text-color-surface-bright);
}
.text-surface-container-lowest {
color: var(--_text-color-surface-container-lowest);
}
.text-surface-container-low {
color: var(--_text-color-surface-container-low);
}
.text-surface-container {
color: var(--_text-color-surface-container);
}
.text-surface-container-high {
color: var(--_text-color-surface-container-high);
}
.text-surface-container-highest {
color: var(--_text-color-surface-container-highest);
}
.text-on-surface {
color: var(--_text-color-on-surface);
}
.text-surface-variant {
color: var(--_text-color-surface-variant);
}
.text-on-surface-variant {
color: var(--_text-color-on-surface-variant);
}
.text-inverse-surface {
color: var(--_text-color-inverse-surface);
}
.text-inverse-on-surface {
color: var(--_text-color-inverse-on-surface);
}
.text-outline {
color: var(--_text-color-outline);
}
.text-outline-variant {
color: var(--_text-color-outline-variant);
}
.text-shadow {
color: var(--_text-color-shadow);
}
.text-scrim {
color: var(--_text-color-scrim);
}
.text-surface-tint {
color: var(--_text-color-surface-tint);
}
.text-primary {
color: var(--_text-color-primary);
}
.text-on-primary {
color: var(--_text-color-on-primary);
}
.text-primary-container {
color: var(--_text-color-primary-container);
}
.text-on-primary-container {
color: var(--_text-color-on-primary-container);
}
.text-inverse-primary {
color: var(--_text-color-inverse-primary);
}
.text-secondary {
color: var(--_text-color-secondary);
}
.text-on-secondary {
color: var(--_text-color-on-secondary);
}
.text-secondary-container {
color: var(--_text-color-secondary-container);
}
.text-on-secondary-container {
color: var(--_text-color-on-secondary-container);
}
.text-tertiary {
color: var(--_text-color-tertiary);
}
.text-on-tertiary {
color: var(--_text-color-on-tertiary);
}
.text-tertiary-container {
color: var(--_text-color-tertiary-container);
}
.text-on-tertiary-container {
color: var(--_text-color-on-tertiary-container);
}
.text-error {
color: var(--_text-color-error);
}
.text-on-error {
color: var(--_text-color-on-error);
}
.text-error-container {
color: var(--_text-color-error-container);
}
.text-on-error-container {
color: var(--_text-color-on-error-container);
}
.text-primary-fixed {
color: var(--_text-color-primary-fixed);
}
.text-primary-fixed-dim {
color: var(--_text-color-primary-fixed-dim);
}
.text-on-primary-fixed {
color: var(--_text-color-on-primary-fixed);
}
.text-on-primary-fixed-variant {
color: var(--_text-color-on-primary-fixed-variant);
}
.text-secondary-fixed {
color: var(--_text-color-secondary-fixed);
}
.text-secondary-fixed-dim {
color: var(--_text-color-secondary-fixed-dim);
}
.text-on-secondary-fixed {
color: var(--_text-color-on-secondary-fixed);
}
.text-on-secondary-fixed-variant {
color: var(--_text-color-on-secondary-fixed-variant);
}
.text-tertiary-fixed {
color: var(--_text-color-tertiary-fixed);
}
.text-tertiary-fixed-dim {
color: var(--_text-color-tertiary-fixed-dim);
}
.text-on-tertiary-fixed {
color: var(--_text-color-on-tertiary-fixed);
}
.text-on-tertiary-fixed-variant {
color: var(--_text-color-on-tertiary-fixed-variant);
}
}