@sandlada/material-design-css
Version:
A ready-made npm package for a collection of css styles in the material design style.
62 lines (61 loc) • 6.28 kB
CSS
@theme inline {
--color-primary-key-color : var(--md-sys-color-primary-key-color, #039d54);
--color-secondary-key-color : var(--md-sys-color-secondary-key-color, #54815f);
--color-tertiary-key-color : var(--md-sys-color-tertiary-key-color, #ffa97f);
--color-error-key-color : var(--md-sys-color-error-key-color, #de3730);
--color-neutral-key-color : var(--md-sys-color-neutral-key-color, #727971);
--color-neutral-variant-key-color : var(--md-sys-color-neutral-variant-key-color, #6d7a6e);
--color-background : var(--md-sys-color-background, light-dark(#f4fbf1, #0e150f));
--color-error : var(--md-sys-color-error, light-dark(#ba1a1a, #ffb4ab));
--color-error-container : var(--md-sys-color-error-container, light-dark(#ffdad6, #93000a));
--color-error-dim : var(--md-sys-color-error-dim, light-dark(#a80710, #ff554a));
--color-inverse-on-surface : var(--md-sys-color-inverse-on-surface, light-dark(#ecf3e9, #2b322c));
--color-inverse-primary : var(--md-sys-color-inverse-primary, light-dark(#61de8c, #006d38));
--color-inverse-surface : var(--md-sys-color-inverse-surface, light-dark(#2b322c, #dde4db));
--color-on-background : var(--md-sys-color-on-background, light-dark(#171d17, #dde4db));
--color-on-error : var(--md-sys-color-on-error, light-dark(#ffffff, #690005));
--color-on-error-container : var(--md-sys-color-on-error-container, light-dark(#93000a, #ffdad6));
--color-on-primary : var(--md-sys-color-on-primary, light-dark(#ffffff, #00391a));
--color-on-primary-container : var(--md-sys-color-on-primary-container, light-dark(#00592c, #00592c));
--color-on-primary-fixed : var(--md-sys-color-on-primary-fixed, light-dark(#00210d, #00210d));
--color-on-primary-fixed-variant : var(--md-sys-color-on-primary-fixed-variant, light-dark(#005229, #005229));
--color-on-secondary : var(--md-sys-color-on-secondary, light-dark(#ffffff, #0a381c));
--color-on-secondary-container : var(--md-sys-color-on-secondary-container, light-dark(#406c4b, #97c7a0));
--color-on-secondary-fixed : var(--md-sys-color-on-secondary-fixed, light-dark(#00210d, #00210d));
--color-on-secondary-fixed-variant: var(--md-sys-color-on-secondary-fixed-variant, light-dark(#244f31, #244f31));
--color-on-surface : var(--md-sys-color-on-surface, light-dark(#171d17, #dde4db));
--color-on-surface-variant : var(--md-sys-color-on-surface-variant, light-dark(#3d4a3f, #bccabc));
--color-on-tertiary : var(--md-sys-color-on-tertiary, light-dark(#ffffff, #552002));
--color-on-tertiary-container : var(--md-sys-color-on-tertiary-container, light-dark(#793c1a, #793c1a));
--color-on-tertiary-fixed : var(--md-sys-color-on-tertiary-fixed, light-dark(#351000, #351000));
--color-on-tertiary-fixed-variant : var(--md-sys-color-on-tertiary-fixed-variant, light-dark(#723615, #723615));
--color-outline : var(--md-sys-color-outline, light-dark(#6d7a6e, #879487));
--color-outline-variant : var(--md-sys-color-outline-variant, light-dark(#bccabc, #3d4a3f));
--color-primary : var(--md-sys-color-primary, light-dark(#006d38, #76f29e));
--color-primary-container : var(--md-sys-color-primary-container, light-dark(#58d584, #58d584));
--color-primary-dim : var(--md-sys-color-primary-dim, light-dark(#006030, #82fea8));
--color-primary-fixed : var(--md-sys-color-primary-fixed, light-dark(#7ffba6, #7ffba6));
--color-primary-fixed-dim : var(--md-sys-color-primary-fixed-dim, light-dark(#61de8c, #61de8c));
--color-scrim : var(--md-sys-color-scrim, light-dark(#000000, #000000));
--color-secondary : var(--md-sys-color-secondary, light-dark(#3c6847, #a2d2ab));
--color-secondary-container : var(--md-sys-color-secondary-container, light-dark(#bbecc3, #295436));
--color-secondary-dim : var(--md-sys-color-secondary-dim, light-dark(#305b3c, #bdeec5));
--color-secondary-fixed : var(--md-sys-color-secondary-fixed, light-dark(#bdeec5, #bdeec5));
--color-secondary-fixed-dim : var(--md-sys-color-secondary-fixed-dim, light-dark(#a2d2ab, #a2d2ab));
--color-shadow : var(--md-sys-color-shadow, light-dark(#000000, #000000));
--color-surface : var(--md-sys-color-surface, light-dark(#f4fbf1, #0e150f));
--color-surface-bright : var(--md-sys-color-surface-bright, light-dark(#f4fbf1, #343b34));
--color-surface-container : var(--md-sys-color-surface-container, light-dark(#e9f0e6, #1b211b));
--color-surface-container-high : var(--md-sys-color-surface-container-high, light-dark(#e3eae1, #252c25));
--color-surface-container-highest : var(--md-sys-color-surface-container-highest, light-dark(#dde4db, #303630));
--color-surface-container-low : var(--md-sys-color-surface-container-low, light-dark(#eff6ec, #171d17));
--color-surface-container-lowest : var(--md-sys-color-surface-container-lowest, light-dark(#ffffff, #09100a));
--color-surface-dim : var(--md-sys-color-surface-dim, light-dark(#d5dcd3, #0e150f));
--color-surface-tint : var(--md-sys-color-surface-tint, light-dark(#006d38, #61de8c));
--color-surface-variant : var(--md-sys-color-surface-variant, light-dark(#d8e6d7, #3d4a3f));
--color-tertiary : var(--md-sys-color-tertiary, light-dark(#8f4d2a, #ffcfba));
--color-tertiary-container : var(--md-sys-color-tertiary-container, light-dark(#ffa97f, #ffa97f));
--color-tertiary-dim : var(--md-sys-color-tertiary-dim, light-dark(#804120, #fda77d));
--color-tertiary-fixed : var(--md-sys-color-tertiary-fixed, light-dark(#ffdbcc, #ffdbcc));
--color-tertiary-fixed-dim : var(--md-sys-color-tertiary-fixed-dim, light-dark(#ffb693, #ffb693));
}