@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(#f9faf4, #121411);
--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(#f0f1ec, #2f312e);
--md-sys-color-inverse-primary: light-dark(#a5d2a6, #3f6744);
--md-sys-color-inverse-surface: light-dark(#2f312e, #e2e3de);
--md-sys-color-neutral-palette-key-color: light-dark(#767874, #767874);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#727970, #727970);
--md-sys-color-on-background: light-dark(#1a1c19, #e2e3de);
--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, #103819);
--md-sys-color-on-primary-container: light-dark(#f7fff2, #000801);
--md-sys-color-on-primary-fixed: light-dark(#002108, #002108);
--md-sys-color-on-primary-fixed-variant: light-dark(#284f2e, #284f2e);
--md-sys-color-on-secondary: light-dark(#ffffff, #253425);
--md-sys-color-on-secondary-container: light-dark(#586957, #a8baa6);
--md-sys-color-on-secondary-fixed: light-dark(#101f12, #101f12);
--md-sys-color-on-secondary-fixed-variant: light-dark(#3b4b3b, #3b4b3b);
--md-sys-color-on-surface: light-dark(#1a1c19, #e2e3de);
--md-sys-color-on-surface-variant: light-dark(#424941, #c2c9be);
--md-sys-color-on-tertiary: light-dark(#ffffff, #003545);
--md-sys-color-on-tertiary-container: light-dark(#fbfdff, #00070b);
--md-sys-color-on-tertiary-fixed: light-dark(#001f29, #001f29);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#0d4d61, #0d4d61);
--md-sys-color-outline: light-dark(#727970, #8c9389);
--md-sys-color-outline-variant: light-dark(#c2c9be, #424941);
--md-sys-color-primary: light-dark(#3d6541, #a5d2a6);
--md-sys-color-primary-container: light-dark(#557e58, #719b73);
--md-sys-color-primary-dim: light-dark(#345b38, #cffdce);
--md-sys-color-primary-fixed: light-dark(#c1eec1, #c1eec1);
--md-sys-color-primary-fixed-dim: light-dark(#a5d2a6, #a5d2a6);
--md-sys-color-primary-palette-key-color: light-dark(#58815b, #58815b);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#526351, #b9cbb7);
--md-sys-color-secondary-container: light-dark(#d5e8d2, #3b4b3b);
--md-sys-color-secondary-dim: light-dark(#465746, #d5e8d2);
--md-sys-color-secondary-fixed: light-dark(#d5e8d2, #d5e8d2);
--md-sys-color-secondary-fixed-dim: light-dark(#b9cbb7, #b9cbb7);
--md-sys-color-secondary-palette-key-color: light-dark(#6b7c6a, #6b7c6a);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f9faf4, #121411);
--md-sys-color-surface-bright: light-dark(#f9faf4, #373a36);
--md-sys-color-surface-container: light-dark(#eeeee9, #1e201d);
--md-sys-color-surface-container-high: light-dark(#e8e9e3, #282b27);
--md-sys-color-surface-container-highest: light-dark(#e2e3de, #333532);
--md-sys-color-surface-container-low: light-dark(#f3f4ef, #1a1c19);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0c0f0c);
--md-sys-color-surface-dim: light-dark(#d9dad5, #121411);
--md-sys-color-surface-tint: light-dark(#3f6744, #a5d2a6);
--md-sys-color-surface-variant: light-dark(#dee5da, #424941);
--md-sys-color-tertiary: light-dark(#2b6277, #99cee6);
--md-sys-color-tertiary-container: light-dark(#467b91, #6398af);
--md-sys-color-tertiary-dim: light-dark(#1f596d, #ace2fa);
--md-sys-color-tertiary-fixed: light-dark(#bce9ff, #bce9ff);
--md-sys-color-tertiary-fixed-dim: light-dark(#99cee6, #99cee6);
--md-sys-color-tertiary-palette-key-color: light-dark(#497e94, #497e94);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#f9faf4, #121411);
--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(#979994, #636561);
--md-sys-color-inverse-primary: light-dark(#5a835d, #618a64);
--md-sys-color-inverse-surface: light-dark(#2f312e, #e2e3de);
--md-sys-color-neutral-palette-key-color: light-dark(#767874, #767874);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#727970, #727970);
--md-sys-color-on-background: light-dark(#8f918c, #61635f);
--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(#f7fff2, #083113);
--md-sys-color-on-primary-container: light-dark(#5a845d, #648e67);
--md-sys-color-on-primary-fixed: light-dark(#2d5533, #a3cfa3);
--md-sys-color-on-primary-fixed-variant: light-dark(#47704b, #80ab81);
--md-sys-color-on-secondary: light-dark(#f7fff2, #1e2d1f);
--md-sys-color-on-secondary-container: light-dark(#6d7e6c, #778976);
--md-sys-color-on-secondary-fixed: light-dark(#405040, #b7c9b4);
--md-sys-color-on-secondary-fixed-variant: light-dark(#5a6b59, #93a591);
--md-sys-color-on-surface: light-dark(#5e605c, #a2a39f);
--md-sys-color-on-surface-variant: light-dark(#767d74, #7e857c);
--md-sys-color-on-tertiary: light-dark(#fbfdff, #002e3c);
--md-sys-color-on-tertiary-container: light-dark(#4c8197, #568ba1);
--md-sys-color-on-tertiary-fixed: light-dark(#165267, #97cce4);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#376d82, #73a7bf);
--md-sys-color-outline: light-dark(#adb4aa, #4f564e);
--md-sys-color-outline-variant: light-dark(#d4dbd0, #353c34);
--md-sys-color-primary: light-dark(#557e58, #719b73);
--md-sys-color-primary-container: light-dark(#b7e4b7, #1b4222);
--md-sys-color-primary-dim: light-dark(#49714c, #719b73);
--md-sys-color-primary-fixed: light-dark(#b7e4b7, #325a37);
--md-sys-color-primary-fixed-dim: light-dark(#9cc89d, #1b4222);
--md-sys-color-primary-palette-key-color: light-dark(#58815b, #58815b);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#687967, #849582);
--md-sys-color-secondary-container: light-dark(#ccdec8, #2e3e2f);
--md-sys-color-secondary-dim: light-dark(#5b6c5b, #849683);
--md-sys-color-secondary-fixed: light-dark(#ccdec8, #455545);
--md-sys-color-secondary-fixed-dim: light-dark(#b0c2ad, #2e3e2f);
--md-sys-color-secondary-palette-key-color: light-dark(#6b7c6a, #6b7c6a);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f9faf4, #121411);
--md-sys-color-surface-bright: light-dark(#f9faf4, #373a36);
--md-sys-color-surface-container: light-dark(#eeeee9, #1e201d);
--md-sys-color-surface-container-high: light-dark(#e8e9e3, #282b27);
--md-sys-color-surface-container-highest: light-dark(#e2e3de, #333532);
--md-sys-color-surface-container-low: light-dark(#f3f4ef, #1a1c19);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0c0f0c);
--md-sys-color-surface-dim: light-dark(#d9dad5, #121411);
--md-sys-color-surface-tint: light-dark(#3f6744, #a5d2a6);
--md-sys-color-surface-variant: light-dark(#dee5da, #424941);
--md-sys-color-tertiary: light-dark(#467b91, #6398af);
--md-sys-color-tertiary-container: light-dark(#abe1f9, #004052);
--md-sys-color-tertiary-dim: light-dark(#396e84, #6498af);
--md-sys-color-tertiary-fixed: light-dark(#abe1f9, #1d576c);
--md-sys-color-tertiary-fixed-dim: light-dark(#90c5dd, #004052);
--md-sys-color-tertiary-palette-key-color: light-dark(#497e94, #497e94);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#f9faf4, #121411);
--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(#a5d2a6, #29502f);
--md-sys-color-inverse-surface: light-dark(#2f312e, #e2e3de);
--md-sys-color-neutral-palette-key-color: light-dark(#767874, #767874);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#727970, #727970);
--md-sys-color-on-background: light-dark(#1a1c19, #e2e3de);
--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, #000801);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #001504);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #020e04);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #061408);
--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, #00070b);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #00131b);
--md-sys-color-outline: light-dark(#272e27, #ebf2e7);
--md-sys-color-outline-variant: light-dark(#444b43, #bec5ba);
--md-sys-color-primary: light-dark(#0b3315, #cefccd);
--md-sys-color-primary-container: light-dark(#2a5130, #a1cea2);
--md-sys-color-primary-dim: light-dark(#00260a, #cffdce);
--md-sys-color-primary-fixed: light-dark(#2a5130, #c1eec1);
--md-sys-color-primary-fixed-dim: light-dark(#133a1b, #a5d2a6);
--md-sys-color-primary-palette-key-color: light-dark(#58815b, #58815b);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#213021, #e3f5df);
--md-sys-color-secondary-container: light-dark(#3d4d3d, #b5c8b3);
--md-sys-color-secondary-dim: light-dark(#142315, #e3f6e0);
--md-sys-color-secondary-fixed: light-dark(#3d4d3d, #d5e8d2);
--md-sys-color-secondary-fixed-dim: light-dark(#273628, #b9cbb7);
--md-sys-color-secondary-palette-key-color: light-dark(#6b7c6a, #6b7c6a);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f9faf4, #121411);
--md-sys-color-surface-bright: light-dark(#f9faf4, #4e514d);
--md-sys-color-surface-container: light-dark(#e2e3de, #2f312e);
--md-sys-color-surface-container-high: light-dark(#d4d5d0, #3a3c38);
--md-sys-color-surface-container-highest: light-dark(#c6c7c2, #454744);
--md-sys-color-surface-container-low: light-dark(#f0f1ec, #1e201d);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#b8b9b4, #121411);
--md-sys-color-surface-tint: light-dark(#3f6744, #a5d2a6);
--md-sys-color-surface-variant: light-dark(#dee5da, #424941);
--md-sys-color-tertiary: light-dark(#00313f, #ddf3ff);
--md-sys-color-tertiary-container: light-dark(#124f64, #95cae2);
--md-sys-color-tertiary-dim: light-dark(#00232f, #dff4ff);
--md-sys-color-tertiary-fixed: light-dark(#124f64, #bce9ff);
--md-sys-color-tertiary-fixed-dim: light-dark(#003848, #99cee6);
--md-sys-color-tertiary-palette-key-color: light-dark(#497e94, #497e94);
}