@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(#fef8f9, #151314);
--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(#f6eff1, #323031);
--md-sys-color-inverse-primary: light-dark(#d4c1d0, #695a67);
--md-sys-color-inverse-surface: light-dark(#323031, #e7e1e2);
--md-sys-color-neutral-palette-key-color: light-dark(#7a7677, #7a7677);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7a7677, #7a7677);
--md-sys-color-on-background: light-dark(#1d1b1c, #e7e1e2);
--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, #392c38);
--md-sys-color-on-primary-container: light-dark(#50434f, #f1ddec);
--md-sys-color-on-primary-fixed: light-dark(#231823, #231823);
--md-sys-color-on-primary-fixed-variant: light-dark(#50434f, #50434f);
--md-sys-color-on-secondary: light-dark(#ffffff, #362e35);
--md-sys-color-on-secondary-container: light-dark(#4d444c, #eddee8);
--md-sys-color-on-secondary-fixed: light-dark(#211920, #211920);
--md-sys-color-on-secondary-fixed-variant: light-dark(#4d444c, #4d444c);
--md-sys-color-on-surface: light-dark(#1d1b1c, #e7e1e2);
--md-sys-color-on-surface-variant: light-dark(#494647, #cbc5c6);
--md-sys-color-on-tertiary: light-dark(#ffffff, #3c2b3b);
--md-sys-color-on-tertiary-container: light-dark(#534152, #f5dbf0);
--md-sys-color-on-tertiary-fixed: light-dark(#261625, #261625);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#534152, #534152);
--md-sys-color-outline: light-dark(#7a7677, #948f91);
--md-sys-color-outline-variant: light-dark(#cbc5c6, #494647);
--md-sys-color-primary: light-dark(#695a67, #d4c1d0);
--md-sys-color-primary-container: light-dark(#f1ddec, #50434f);
--md-sys-color-primary-dim: light-dark(#5c4e5b, #e2cfde);
--md-sys-color-primary-fixed: light-dark(#f1ddec, #f1ddec);
--md-sys-color-primary-fixed-dim: light-dark(#d4c1d0, #d4c1d0);
--md-sys-color-primary-palette-key-color: light-dark(#827280, #827280);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#665b63, #d0c3cc);
--md-sys-color-secondary-container: light-dark(#eddee8, #4d444c);
--md-sys-color-secondary-dim: light-dark(#595057, #ded0da);
--md-sys-color-secondary-fixed: light-dark(#eddee8, #eddee8);
--md-sys-color-secondary-fixed-dim: light-dark(#d0c3cc, #d0c3cc);
--md-sys-color-secondary-palette-key-color: light-dark(#7f747c, #7f747c);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fef8f9, #151314);
--md-sys-color-surface-bright: light-dark(#fef8f9, #3b383a);
--md-sys-color-surface-container: light-dark(#f3ecee, #211f20);
--md-sys-color-surface-container-high: light-dark(#ede7e8, #2c292b);
--md-sys-color-surface-container-highest: light-dark(#e7e1e2, #373435);
--md-sys-color-surface-container-low: light-dark(#f8f2f3, #1d1b1c);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0f0e0f);
--md-sys-color-surface-dim: light-dark(#ded8da, #151314);
--md-sys-color-surface-tint: light-dark(#695a67, #d4c1d0);
--md-sys-color-surface-variant: light-dark(#e7e1e2, #494647);
--md-sys-color-tertiary: light-dark(#6c586a, #d8bfd4);
--md-sys-color-tertiary-container: light-dark(#f5dbf0, #534152);
--md-sys-color-tertiary-dim: light-dark(#604c5e, #fee3f9);
--md-sys-color-tertiary-fixed: light-dark(#f5dbf0, #f5dbf0);
--md-sys-color-tertiary-fixed-dim: light-dark(#d8bfd4, #d8bfd4);
--md-sys-color-tertiary-palette-key-color: light-dark(#867184, #867184);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fef8f9, #151314);
--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(#9c9798, #676365);
--md-sys-color-inverse-primary: light-dark(#857582, #8c7c89);
--md-sys-color-inverse-surface: light-dark(#323031, #e7e1e2);
--md-sys-color-neutral-palette-key-color: light-dark(#7a7677, #7a7677);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7a7677, #7a7677);
--md-sys-color-on-background: light-dark(#938f90, #656163);
--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, #322631);
--md-sys-color-on-primary-container: light-dark(#857583, #907f8d);
--md-sys-color-on-primary-fixed: light-dark(#564854, #d2becd);
--md-sys-color-on-primary-fixed-variant: light-dark(#71626f, #ad9ba9);
--md-sys-color-on-secondary: light-dark(#fffbff, #2f272e);
--md-sys-color-on-secondary-container: light-dark(#82777f, #8c8189);
--md-sys-color-on-secondary-fixed: light-dark(#534951, #cec0c9);
--md-sys-color-on-secondary-fixed-variant: light-dark(#6e636b, #a99da5);
--md-sys-color-on-surface: light-dark(#625e5f, #a6a2a3);
--md-sys-color-on-surface-variant: light-dark(#7e7a7b, #868283);
--md-sys-color-on-tertiary: light-dark(#fffbff, #352434);
--md-sys-color-on-tertiary-container: light-dark(#897386, #937d91);
--md-sys-color-on-tertiary-fixed: light-dark(#594658, #d6bdd2);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#746072, #b099ad);
--md-sys-color-outline: light-dark(#b6b1b2, #565355);
--md-sys-color-outline-variant: light-dark(#ddd7d9, #3c393b);
--md-sys-color-primary: light-dark(#80707d, #9d8c9a);
--md-sys-color-primary-container: light-dark(#e7d3e2, #433642);
--md-sys-color-primary-dim: light-dark(#736370, #9d8c9a);
--md-sys-color-primary-fixed: light-dark(#e7d3e2, #5b4d59);
--md-sys-color-primary-fixed-dim: light-dark(#cbb8c7, #433642);
--md-sys-color-primary-palette-key-color: light-dark(#827280, #827280);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#7c717a, #998d96);
--md-sys-color-secondary-container: light-dark(#e3d5de, #40373f);
--md-sys-color-secondary-dim: light-dark(#6f656d, #9a8e96);
--md-sys-color-secondary-fixed: light-dark(#e3d5de, #584e56);
--md-sys-color-secondary-fixed-dim: light-dark(#c7b9c3, #40373f);
--md-sys-color-secondary-palette-key-color: light-dark(#7f747c, #7f747c);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fef8f9, #151314);
--md-sys-color-surface-bright: light-dark(#fef8f9, #3b383a);
--md-sys-color-surface-container: light-dark(#f3ecee, #211f20);
--md-sys-color-surface-container-high: light-dark(#ede7e8, #2c292b);
--md-sys-color-surface-container-highest: light-dark(#e7e1e2, #373435);
--md-sys-color-surface-container-low: light-dark(#f8f2f3, #1d1b1c);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0f0e0f);
--md-sys-color-surface-dim: light-dark(#ded8da, #151314);
--md-sys-color-surface-tint: light-dark(#695a67, #d4c1d0);
--md-sys-color-surface-variant: light-dark(#e7e1e2, #494647);
--md-sys-color-tertiary: light-dark(#836e81, #a08a9e);
--md-sys-color-tertiary-container: light-dark(#ebd1e7, #463445);
--md-sys-color-tertiary-dim: light-dark(#766274, #a18a9e);
--md-sys-color-tertiary-fixed: light-dark(#ebd1e7, #5e4b5d);
--md-sys-color-tertiary-fixed-dim: light-dark(#cfb6cb, #463445);
--md-sys-color-tertiary-palette-key-color: light-dark(#867184, #867184);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fef8f9, #151314);
--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(#d4c1d0, #514450);
--md-sys-color-inverse-surface: light-dark(#323031, #e7e1e2);
--md-sys-color-neutral-palette-key-color: light-dark(#7a7677, #7a7677);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7a7677, #7a7677);
--md-sys-color-on-background: light-dark(#1d1b1c, #e7e1e2);
--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, #120812);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #180e18);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #10090f);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #160f15);
--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, #140614);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #1a0c1b);
--md-sys-color-outline: light-dark(#2e2b2d, #f5eef0);
--md-sys-color-outline-variant: light-dark(#4b484a, #c7c1c3);
--md-sys-color-primary: light-dark(#342834, #ffeafa);
--md-sys-color-primary-container: light-dark(#534551, #d0bdcc);
--md-sys-color-primary-dim: light-dark(#271c27, #ffebfa);
--md-sys-color-primary-fixed: light-dark(#534551, #f1ddec);
--md-sys-color-primary-fixed-dim: light-dark(#3b2f3a, #d4c1d0);
--md-sys-color-primary-palette-key-color: light-dark(#827280, #827280);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#322a31, #fbecf6);
--md-sys-color-secondary-container: light-dark(#50464e, #ccbfc8);
--md-sys-color-secondary-dim: light-dark(#251d24, #fbedf6);
--md-sys-color-secondary-fixed: light-dark(#50464e, #eddee8);
--md-sys-color-secondary-fixed-dim: light-dark(#393037, #d0c3cc);
--md-sys-color-secondary-palette-key-color: light-dark(#7f747c, #7f747c);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fef8f9, #151314);
--md-sys-color-surface-bright: light-dark(#fef8f9, #524f51);
--md-sys-color-surface-container: light-dark(#e7e1e2, #323031);
--md-sys-color-surface-container-high: light-dark(#d9d3d4, #3d3b3c);
--md-sys-color-surface-container-highest: light-dark(#cbc5c6, #494647);
--md-sys-color-surface-container-low: light-dark(#f6eff1, #211f20);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#bdb7b9, #151314);
--md-sys-color-surface-tint: light-dark(#695a67, #d4c1d0);
--md-sys-color-surface-variant: light-dark(#e7e1e2, #494647);
--md-sys-color-tertiary: light-dark(#372737, #ffeafa);
--md-sys-color-tertiary-container: light-dark(#564355, #d4bbd0);
--md-sys-color-tertiary-dim: light-dark(#2a1a2a, #ffebfa);
--md-sys-color-tertiary-fixed: light-dark(#564355, #f5dbf0);
--md-sys-color-tertiary-fixed-dim: light-dark(#3e2d3d, #d8bfd4);
--md-sys-color-tertiary-palette-key-color: light-dark(#867184, #867184);
}