@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(#ffecef, #392d30);
--md-sys-color-inverse-primary: light-dark(#ffb1c8, #a43461);
--md-sys-color-inverse-surface: light-dark(#392d30, #f1dee1);
--md-sys-color-neutral-palette-key-color: light-dark(#837377, #837377);
--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(#fffbff, #140006);
--md-sys-color-on-primary-fixed: light-dark(#3e001d, #3e001d);
--md-sys-color-on-primary-fixed-variant: light-dark(#851a49, #851a49);
--md-sys-color-on-secondary: light-dark(#ffffff, #4f2131);
--md-sys-color-on-secondary-container: light-dark(#7c4657, #e6a2b6);
--md-sys-color-on-secondary-fixed: light-dark(#360c1d, #360c1d);
--md-sys-color-on-secondary-fixed-variant: light-dark(#6a3748, #6a3748);
--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, #003907);
--md-sys-color-on-tertiary-container: light-dark(#f7fff0, #000900);
--md-sys-color-on-tertiary-fixed: light-dark(#002203, #002203);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#00530f, #00530f);
--md-sys-color-outline: light-dark(#887177, #a38a90);
--md-sys-color-outline-variant: light-dark(#dbc0c6, #554247);
--md-sys-color-primary: light-dark(#a1325f, #ffb1c8);
--md-sys-color-primary-container: light-dark(#c14a77, #e46694);
--md-sys-color-primary-dim: light-dark(#952755, #fb78a6);
--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(#c44d7a, #c44d7a);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#854e5f, #f9b3c7);
--md-sys-color-secondary-container: light-dark(#ffb9cd, #6a3748);
--md-sys-color-secondary-dim: light-dark(#774253, #f9b3c7);
--md-sys-color-secondary-fixed: light-dark(#ffd9e2, #ffd9e2);
--md-sys-color-secondary-fixed-dim: light-dark(#f9b3c7, #f9b3c7);
--md-sys-color-secondary-palette-key-color: light-dark(#a16678, #a16678);
--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, #3e3235);
--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(#e9d5d9, #1a1113);
--md-sys-color-surface-tint: light-dark(#a43461, #ffb1c8);
--md-sys-color-surface-variant: light-dark(#f8dbe2, #554247);
--md-sys-color-tertiary: light-dark(#006b16, #7ddc76);
--md-sys-color-tertiary-container: light-dark(#26862c, #46a346);
--md-sys-color-tertiary-dim: light-dark(#006013, #9bfc92);
--md-sys-color-tertiary-fixed: light-dark(#98f98f, #98f98f);
--md-sys-color-tertiary-fixed-dim: light-dark(#7ddc76, #7ddc76);
--md-sys-color-tertiary-palette-key-color: light-dark(#2a892f, #2a892f);
}
: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(#a59497, #6f6164);
--md-sys-color-inverse-primary: light-dark(#c7507d, #d05683);
--md-sys-color-inverse-surface: light-dark(#392d30, #f1dee1);
--md-sys-color-neutral-palette-key-color: light-dark(#837377, #837377);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#887177, #887177);
--md-sys-color-on-background: light-dark(#9d8c8f, #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(#c7507d, #d45a87);
--md-sys-color-on-primary-fixed: light-dark(#8c204f, #ffadc5);
--md-sys-color-on-primary-fixed-variant: light-dark(#af3c69, #f775a3);
--md-sys-color-on-secondary: light-dark(#fffbff, #471a2b);
--md-sys-color-on-secondary-container: light-dark(#a4697b, #b07385);
--md-sys-color-on-secondary-fixed: light-dark(#703c4d, #f7b1c5);
--md-sys-color-on-secondary-fixed-variant: light-dark(#8e5667, #cf8ea1);
--md-sys-color-on-surface: light-dark(#6a5b5f, #b09fa2);
--md-sys-color-on-surface-variant: light-dark(#8c757a, #957d83);
--md-sys-color-on-tertiary: light-dark(#f7fff0, #003206);
--md-sys-color-on-tertiary-container: light-dark(#2d8b31, #39963b);
--md-sys-color-on-tertiary-fixed: light-dark(#005911, #7ad974);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#11771f, #56b454);
--md-sys-color-outline: light-dark(#c6abb1, #634f54);
--md-sys-color-outline-variant: light-dark(#eed2d8, #48353a);
--md-sys-color-primary: light-dark(#c14a77, #e46694);
--md-sys-color-primary-container: light-dark(#ffcbd9, #74083c);
--md-sys-color-primary-dim: light-dark(#b13e6b, #e46794);
--md-sys-color-primary-fixed: light-dark(#ffcbd9, #932654);
--md-sys-color-primary-fixed-dim: light-dark(#ffa2bf, #74083c);
--md-sys-color-primary-palette-key-color: light-dark(#c44d7a, #c44d7a);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#9e6376, #be7f92);
--md-sys-color-secondary-container: light-dark(#ffcbd9, #5b2a3b);
--md-sys-color-secondary-dim: light-dark(#905769, #be7f92);
--md-sys-color-secondary-fixed: light-dark(#ffcbd9, #764152);
--md-sys-color-secondary-fixed-dim: light-dark(#efaabe, #5b2a3b);
--md-sys-color-secondary-palette-key-color: light-dark(#a16678, #a16678);
--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, #3e3235);
--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(#e9d5d9, #1a1113);
--md-sys-color-surface-tint: light-dark(#a43461, #ffb1c8);
--md-sys-color-surface-variant: light-dark(#f8dbe2, #554247);
--md-sys-color-tertiary: light-dark(#26862c, #46a346);
--md-sys-color-tertiary-container: light-dark(#8fef87, #00450b);
--md-sys-color-tertiary-dim: light-dark(#137820, #47a446);
--md-sys-color-tertiary-fixed: light-dark(#8fef87, #005f12);
--md-sys-color-tertiary-fixed-dim: light-dark(#73d26e, #00450b);
--md-sys-color-tertiary-palette-key-color: light-dark(#2a892f, #2a892f);
}
: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, #871c4a);
--md-sys-color-inverse-surface: light-dark(#392d30, #f1dee1);
--md-sys-color-neutral-palette-key-color: light-dark(#837377, #837377);
--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(#ffffff, #140006);
--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, #280312);
--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(#ffffff, #000900);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #001601);
--md-sys-color-outline: light-dark(#39272c, #ffebef);
--md-sys-color-outline-variant: light-dark(#584449, #d7bcc2);
--md-sys-color-primary: light-dark(#5d002e, #ffebef);
--md-sys-color-primary-container: light-dark(#881d4c, #ffabc4);
--md-sys-color-primary-dim: light-dark(#460021, #ffecef);
--md-sys-color-primary-fixed: light-dark(#881d4c, #ffd9e2);
--md-sys-color-primary-fixed-dim: light-dark(#690035, #ffb1c8);
--md-sys-color-primary-palette-key-color: light-dark(#c44d7a, #c44d7a);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#4a1d2d, #ffebef);
--md-sys-color-secondary-container: light-dark(#6d394a, #f5afc3);
--md-sys-color-secondary-dim: light-dark(#3b1020, #ffecef);
--md-sys-color-secondary-fixed: light-dark(#6d394a, #ffd9e2);
--md-sys-color-secondary-fixed-dim: light-dark(#522334, #f9b3c7);
--md-sys-color-secondary-palette-key-color: light-dark(#a16678, #a16678);
--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(#e3d0d3, #45383b);
--md-sys-color-surface-container-highest: light-dark(#d5c2c6, #504346);
--md-sys-color-surface-container-low: light-dark(#ffecef, #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(#a43461, #ffb1c8);
--md-sys-color-surface-variant: light-dark(#f8dbe2, #554247);
--md-sys-color-tertiary: light-dark(#003506, #c5ffba);
--md-sys-color-tertiary-container: light-dark(#005610, #79d873);
--md-sys-color-tertiary-dim: light-dark(#002603, #c9ffbe);
--md-sys-color-tertiary-fixed: light-dark(#005610, #98f98f);
--md-sys-color-tertiary-fixed-dim: light-dark(#003c08, #7ddc76);
--md-sys-color-tertiary-palette-key-color: light-dark(#2a892f, #2a892f);
}