@sandlada/material-design-css
Version:
A ready-made npm package for a collection of css styles in the material design style.
184 lines (183 loc) • 11.9 kB
CSS
:root {
--md-sys-color-background: light-dark(#fff8f8, #1a1113);
--md-sys-color-error: light-dark(#ba1a1a, #ffb4ab);
--md-sys-color-error-container: light-dark(#ffdad6, #93000a);
--md-sys-color-error-dim: light-dark(#a80710, #ff554a);
--md-sys-color-error-palette-key-color: light-dark(#de3730, #de3730);
--md-sys-color-inverse-on-surface: light-dark(#ffecf0, #392d30);
--md-sys-color-inverse-primary: light-dark(#ffb1c8, #a23761);
--md-sys-color-inverse-surface: light-dark(#392d30, #f1dee1);
--md-sys-color-neutral-palette-key-color: light-dark(#827376, #827376);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#887177, #887177);
--md-sys-color-on-background: light-dark(#23191c, #f1dee1);
--md-sys-color-on-error: light-dark(#ffffff, #690005);
--md-sys-color-on-error-container: light-dark(#93000a, #ffdad6);
--md-sys-color-on-primary: light-dark(#ffffff, #650033);
--md-sys-color-on-primary-container: light-dark(#ea709c, #ea709c);
--md-sys-color-on-primary-fixed: light-dark(#3e001d, #3e001d);
--md-sys-color-on-primary-fixed-variant: light-dark(#831e4a, #831e4a);
--md-sys-color-on-secondary: light-dark(#ffffff, #4e2232);
--md-sys-color-on-secondary-container: light-dark(#7a4757, #e8a6b9);
--md-sys-color-on-secondary-fixed: light-dark(#350d1d, #350d1d);
--md-sys-color-on-secondary-fixed-variant: light-dark(#693848, #693848);
--md-sys-color-on-surface: light-dark(#23191c, #f1dee1);
--md-sys-color-on-surface-variant: light-dark(#554247, #dbc0c6);
--md-sys-color-on-tertiary: light-dark(#ffffff, #5f1600);
--md-sys-color-on-tertiary-container: light-dark(#e67a5a, #e67a5a);
--md-sys-color-on-tertiary-fixed: light-dark(#3a0a00, #3a0a00);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#7e2c12, #7e2c12);
--md-sys-color-outline: light-dark(#887177, #a38b90);
--md-sys-color-outline-variant: light-dark(#dbc0c6, #554247);
--md-sys-color-primary: light-dark(#3f001d, #ffb1c8);
--md-sys-color-primary-container: light-dark(#650033, #650033);
--md-sys-color-primary-dim: light-dark(#932a55, #fb7da9);
--md-sys-color-primary-fixed: light-dark(#ffd9e2, #ffd9e2);
--md-sys-color-primary-fixed-dim: light-dark(#ffb1c8, #ffb1c8);
--md-sys-color-primary-palette-key-color: light-dark(#c14f7a, #c14f7a);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#844f5f, #f7b4c7);
--md-sys-color-secondary-container: light-dark(#fdbacd, #6b3a4a);
--md-sys-color-secondary-dim: light-dark(#764354, #f4b1c5);
--md-sys-color-secondary-fixed: light-dark(#ffd9e2, #ffd9e2);
--md-sys-color-secondary-fixed-dim: light-dark(#f7b4c7, #f7b4c7);
--md-sys-color-secondary-palette-key-color: light-dark(#a06778, #a06778);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f8, #1a1113);
--md-sys-color-surface-bright: light-dark(#fff8f8, #423639);
--md-sys-color-surface-container: light-dark(#fde9ed, #271d20);
--md-sys-color-surface-container-high: light-dark(#f7e3e7, #32272a);
--md-sys-color-surface-container-highest: light-dark(#f1dee1, #3d3235);
--md-sys-color-surface-container-low: light-dark(#fff0f2, #23191c);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #150c0e);
--md-sys-color-surface-dim: light-dark(#e8d5d9, #1a1113);
--md-sys-color-surface-tint: light-dark(#a23761, #ffb1c8);
--md-sys-color-surface-variant: light-dark(#f8dbe2, #554247);
--md-sys-color-tertiary: light-dark(#3b0a00, #ffb59f);
--md-sys-color-tertiary-container: light-dark(#5f1600, #5f1600);
--md-sys-color-tertiary-dim: light-dark(#8d371c, #fd8c6b);
--md-sys-color-tertiary-fixed: light-dark(#ffdbd1, #ffdbd1);
--md-sys-color-tertiary-fixed-dim: light-dark(#ffb59f, #ffb59f);
--md-sys-color-tertiary-palette-key-color: light-dark(#5f1600, #5f1600);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fff8f8, #1a1113);
--md-sys-color-error: light-dark(#da342e, #ff5449);
--md-sys-color-error-container: light-dark(#ffcdc7, #7b0007);
--md-sys-color-error-dim: light-dark(#c82623, #ff554a);
--md-sys-color-error-palette-key-color: light-dark(#de3730, #de3730);
--md-sys-color-inverse-on-surface: light-dark(#a49498, #6f6164);
--md-sys-color-inverse-primary: light-dark(#c5527d, #cd5984);
--md-sys-color-inverse-surface: light-dark(#392d30, #f1dee1);
--md-sys-color-neutral-palette-key-color: light-dark(#827376, #827376);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#887177, #887177);
--md-sys-color-on-background: light-dark(#9c8c8f, #6d5f62);
--md-sys-color-on-error: light-dark(#fffbff, #5c0003);
--md-sys-color-on-error-container: light-dark(#e23a32, #f0443b);
--md-sys-color-on-primary: light-dark(#fffbff, #58002c);
--md-sys-color-on-primary-container: light-dark(#c5527d, #d15c87);
--md-sys-color-on-primary-fixed: light-dark(#8a244f, #ffadc6);
--md-sys-color-on-primary-fixed-variant: light-dark(#ac3f69, #f477a3);
--md-sys-color-on-secondary: light-dark(#fffbff, #461b2b);
--md-sys-color-on-secondary-container: light-dark(#a3697b, #ae7385);
--md-sys-color-on-secondary-fixed: light-dark(#6f3d4d, #f5b2c5);
--md-sys-color-on-secondary-fixed-variant: light-dark(#8d5667, #cd8fa1);
--md-sys-color-on-surface: light-dark(#695c5f, #af9fa2);
--md-sys-color-on-surface-variant: light-dark(#8c757a, #947d83);
--md-sys-color-on-tertiary: light-dark(#fffbff, #531200);
--md-sys-color-on-tertiary-container: light-dark(#c05d3f, #cd6748);
--md-sys-color-on-tertiary-fixed: light-dark(#853117, #ffb19a);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#a74a2e, #ef8261);
--md-sys-color-outline: light-dark(#c5abb1, #634f54);
--md-sys-color-outline-variant: light-dark(#eed2d8, #47353a);
--md-sys-color-primary: light-dark(#be4d78, #e16894);
--md-sys-color-primary-container: light-dark(#ffcbd9, #720e3d);
--md-sys-color-primary-dim: light-dark(#ae406b, #e16994);
--md-sys-color-primary-fixed: light-dark(#ffcbd9, #912954);
--md-sys-color-primary-fixed-dim: light-dark(#ffa2bf, #720e3d);
--md-sys-color-primary-palette-key-color: light-dark(#c14f7a, #c14f7a);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#9d6476, #bc8092);
--md-sys-color-secondary-container: light-dark(#ffcbd9, #5a2b3b);
--md-sys-color-secondary-dim: light-dark(#8e5869, #bd8092);
--md-sys-color-secondary-fixed: light-dark(#ffcbd9, #744252);
--md-sys-color-secondary-fixed-dim: light-dark(#edabbe, #5a2b3b);
--md-sys-color-secondary-palette-key-color: light-dark(#a06778, #a06778);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f8, #1a1113);
--md-sys-color-surface-bright: light-dark(#fff8f8, #423639);
--md-sys-color-surface-container: light-dark(#fde9ed, #271d20);
--md-sys-color-surface-container-high: light-dark(#f7e3e7, #32272a);
--md-sys-color-surface-container-highest: light-dark(#f1dee1, #3d3235);
--md-sys-color-surface-container-low: light-dark(#fff0f2, #23191c);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #150c0e);
--md-sys-color-surface-dim: light-dark(#e8d5d9, #1a1113);
--md-sys-color-surface-tint: light-dark(#a23761, #ffb1c8);
--md-sys-color-surface-variant: light-dark(#f8dbe2, #554247);
--md-sys-color-tertiary: light-dark(#b9583a, #dc7353);
--md-sys-color-tertiary-container: light-dark(#ffcec0, #6c2006);
--md-sys-color-tertiary-dim: light-dark(#a94c2f, #dd7353);
--md-sys-color-tertiary-fixed: light-dark(#ffcec0, #8b361b);
--md-sys-color-tertiary-fixed-dim: light-dark(#ffa78d, #6c2006);
--md-sys-color-tertiary-palette-key-color: light-dark(#5f1600, #5f1600);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fff8f8, #1a1113);
--md-sys-color-error: light-dark(#600004, #ffece9);
--md-sys-color-error-container: light-dark(#98000a, #ffaea4);
--md-sys-color-error-dim: light-dark(#480002, #ffedea);
--md-sys-color-error-palette-key-color: light-dark(#de3730, #de3730);
--md-sys-color-inverse-on-surface: light-dark(#ffffff, #000000);
--md-sys-color-inverse-primary: light-dark(#ffb1c8, #851f4b);
--md-sys-color-inverse-surface: light-dark(#392d30, #f1dee1);
--md-sys-color-neutral-palette-key-color: light-dark(#827376, #827376);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#887177, #887177);
--md-sys-color-on-background: light-dark(#23191c, #f1dee1);
--md-sys-color-on-error: light-dark(#ffffff, #000000);
--md-sys-color-on-error-container: light-dark(#ffffff, #220001);
--md-sys-color-on-primary: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-container: light-dark(#ffe6eb, #20000c);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #2b0012);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #20000c);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #280412);
--md-sys-color-on-surface: light-dark(#000000, #ffffff);
--md-sys-color-on-surface-variant: light-dark(#000000, #ffffff);
--md-sys-color-on-tertiary: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-container: light-dark(#ffe7e1, #1e0300);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #280500);
--md-sys-color-outline: light-dark(#39272c, #ffebef);
--md-sys-color-outline-variant: light-dark(#574449, #d7bcc2);
--md-sys-color-primary: light-dark(#3f001d, #ffebef);
--md-sys-color-primary-container: light-dark(#650033, #ffabc4);
--md-sys-color-primary-dim: light-dark(#450021, #ffecf0);
--md-sys-color-primary-fixed: light-dark(#86204c, #ffd9e2);
--md-sys-color-primary-fixed-dim: light-dark(#680335, #ffb1c8);
--md-sys-color-primary-palette-key-color: light-dark(#c14f7a, #c14f7a);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#491e2d, #ffebef);
--md-sys-color-secondary-container: light-dark(#6b3a4a, #f3b0c4);
--md-sys-color-secondary-dim: light-dark(#3a1121, #ffecf0);
--md-sys-color-secondary-fixed: light-dark(#6b3a4a, #ffd9e2);
--md-sys-color-secondary-fixed-dim: light-dark(#512434, #f7b4c7);
--md-sys-color-secondary-palette-key-color: light-dark(#a06778, #a06778);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f8, #1a1113);
--md-sys-color-surface-bright: light-dark(#fff8f8, #5a4d50);
--md-sys-color-surface-container: light-dark(#f1dee1, #392d30);
--md-sys-color-surface-container-high: light-dark(#e2d0d3, #44383b);
--md-sys-color-surface-container-highest: light-dark(#d4c2c6, #504447);
--md-sys-color-surface-container-low: light-dark(#ffecf0, #271d20);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#c6b4b8, #1a1113);
--md-sys-color-surface-tint: light-dark(#a23761, #ffb1c8);
--md-sys-color-surface-variant: light-dark(#f8dbe2, #554247);
--md-sys-color-tertiary: light-dark(#3b0a00, #ffece7);
--md-sys-color-tertiary-container: light-dark(#5f1600, #ffaf98);
--md-sys-color-tertiary-dim: light-dark(#410c00, #ffede8);
--md-sys-color-tertiary-fixed: light-dark(#812e14, #ffdbd1);
--md-sys-color-tertiary-fixed-dim: light-dark(#621801, #ffb59f);
--md-sys-color-tertiary-palette-key-color: light-dark(#5f1600, #5f1600);
}