@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(#f9f9f9, #131313);
--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(#f1f1f1, #303030);
--md-sys-color-inverse-primary: light-dark(#faacf9, #87458a);
--md-sys-color-inverse-surface: light-dark(#303030, #e2e2e2);
--md-sys-color-neutral-palette-key-color: light-dark(#777777, #777777);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#777777, #777777);
--md-sys-color-on-background: light-dark(#1b1b1b, #e2e2e2);
--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, #521458);
--md-sys-color-on-primary-container: light-dark(#6c2d71, #ffd6fb);
--md-sys-color-on-primary-fixed: light-dark(#36003d, #36003d);
--md-sys-color-on-primary-fixed-variant: light-dark(#6c2d71, #6c2d71);
--md-sys-color-on-secondary: light-dark(#ffffff, #3c2b3b);
--md-sys-color-on-secondary-container: light-dark(#534152, #f5dbf0);
--md-sys-color-on-secondary-fixed: light-dark(#261625, #261625);
--md-sys-color-on-secondary-fixed-variant: light-dark(#534152, #534152);
--md-sys-color-on-surface: light-dark(#1b1b1b, #e2e2e2);
--md-sys-color-on-surface-variant: light-dark(#474747, #c6c6c6);
--md-sys-color-on-tertiary: light-dark(#ffffff, #4c261e);
--md-sys-color-on-tertiary-container: light-dark(#673b32, #ffdad3);
--md-sys-color-on-tertiary-fixed: light-dark(#33110b, #33110b);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#673b32, #673b32);
--md-sys-color-outline: light-dark(#777777, #919191);
--md-sys-color-outline-variant: light-dark(#c6c6c6, #474747);
--md-sys-color-primary: light-dark(#87458a, #faacf9);
--md-sys-color-primary-container: light-dark(#ffd6fb, #6c2d71);
--md-sys-color-primary-dim: light-dark(#79397d, #faacf9);
--md-sys-color-primary-fixed: light-dark(#ffd6fb, #ffd6fb);
--md-sys-color-primary-fixed-dim: light-dark(#faacf9, #faacf9);
--md-sys-color-primary-palette-key-color: light-dark(#a25ea5, #a25ea5);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#6c586a, #d8bfd4);
--md-sys-color-secondary-container: light-dark(#f5dbf0, #534152);
--md-sys-color-secondary-dim: light-dark(#604c5e, #f5dbf0);
--md-sys-color-secondary-fixed: light-dark(#f5dbf0, #f5dbf0);
--md-sys-color-secondary-fixed-dim: light-dark(#d8bfd4, #d8bfd4);
--md-sys-color-secondary-palette-key-color: light-dark(#867184, #867184);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f9f9f9, #131313);
--md-sys-color-surface-bright: light-dark(#f9f9f9, #393939);
--md-sys-color-surface-container: light-dark(#eeeeee, #1f1f1f);
--md-sys-color-surface-container-high: light-dark(#e8e8e8, #2a2a2a);
--md-sys-color-surface-container-highest: light-dark(#e2e2e2, #353535);
--md-sys-color-surface-container-low: light-dark(#f3f3f3, #1b1b1b);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0e0e0e);
--md-sys-color-surface-dim: light-dark(#dadada, #131313);
--md-sys-color-surface-tint: light-dark(#87458a, #faacf9);
--md-sys-color-surface-variant: light-dark(#e2e2e2, #474747);
--md-sys-color-tertiary: light-dark(#825249, #f6b8ab);
--md-sys-color-tertiary-container: light-dark(#ffdad3, #673b32);
--md-sys-color-tertiary-dim: light-dark(#74473d, #ffc0b3);
--md-sys-color-tertiary-fixed: light-dark(#ffdad3, #ffdad3);
--md-sys-color-tertiary-fixed-dim: light-dark(#f6b8ab, #f6b8ab);
--md-sys-color-tertiary-palette-key-color: light-dark(#9e6a60, #9e6a60);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#f9f9f9, #131313);
--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(#989898, #646464);
--md-sys-color-inverse-primary: light-dark(#a561a8, #ad67af);
--md-sys-color-inverse-surface: light-dark(#303030, #e2e2e2);
--md-sys-color-neutral-palette-key-color: light-dark(#777777, #777777);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#777777, #777777);
--md-sys-color-on-background: light-dark(#909090, #626262);
--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, #4a0b51);
--md-sys-color-on-primary-container: light-dark(#a561a8, #b16bb3);
--md-sys-color-on-primary-fixed: light-dark(#723377, #f7aaf7);
--md-sys-color-on-primary-fixed-variant: light-dark(#904d93, #d086d1);
--md-sys-color-on-secondary: light-dark(#fffbff, #352434);
--md-sys-color-on-secondary-container: light-dark(#897386, #937d91);
--md-sys-color-on-secondary-fixed: light-dark(#594658, #d6bdd2);
--md-sys-color-on-secondary-fixed-variant: light-dark(#746072, #b099ad);
--md-sys-color-on-surface: light-dark(#5f5f5f, #a3a3a3);
--md-sys-color-on-surface-variant: light-dark(#7b7b7b, #838383);
--md-sys-color-on-tertiary: light-dark(#fffbff, #441f18);
--md-sys-color-on-tertiary-container: light-dark(#a16d63, #ac776c);
--md-sys-color-on-tertiary-fixed: light-dark(#6d4037, #f3b5a9);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#8b5a50, #cb9287);
--md-sys-color-outline: light-dark(#b2b2b2, #545454);
--md-sys-color-outline-variant: light-dark(#d9d9d9, #3a3a3a);
--md-sys-color-primary: light-dark(#9f5ba2, #bf77c0);
--md-sys-color-primary-container: light-dark(#ffc7fc, #5d1f63);
--md-sys-color-primary-dim: light-dark(#914f95, #bf78c1);
--md-sys-color-primary-fixed: light-dark(#ffc7fc, #77387c);
--md-sys-color-primary-fixed-dim: light-dark(#efa3f0, #5d1f63);
--md-sys-color-primary-palette-key-color: light-dark(#a25ea5, #a25ea5);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#836e81, #a08a9e);
--md-sys-color-secondary-container: light-dark(#ebd1e7, #463445);
--md-sys-color-secondary-dim: light-dark(#766274, #a18a9e);
--md-sys-color-secondary-fixed: light-dark(#ebd1e7, #5e4b5d);
--md-sys-color-secondary-fixed-dim: light-dark(#cfb6cb, #463445);
--md-sys-color-secondary-palette-key-color: light-dark(#867184, #867184);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f9f9f9, #131313);
--md-sys-color-surface-bright: light-dark(#f9f9f9, #393939);
--md-sys-color-surface-container: light-dark(#eeeeee, #1f1f1f);
--md-sys-color-surface-container-high: light-dark(#e8e8e8, #2a2a2a);
--md-sys-color-surface-container-highest: light-dark(#e2e2e2, #353535);
--md-sys-color-surface-container-low: light-dark(#f3f3f3, #1b1b1b);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0e0e0e);
--md-sys-color-surface-dim: light-dark(#dadada, #131313);
--md-sys-color-surface-tint: light-dark(#87458a, #faacf9);
--md-sys-color-surface-variant: light-dark(#e2e2e2, #474747);
--md-sys-color-tertiary: light-dark(#9b685d, #ba8378);
--md-sys-color-tertiary-container: light-dark(#ffcec4, #582f27);
--md-sys-color-tertiary-dim: light-dark(#8d5b51, #bb8479);
--md-sys-color-tertiary-fixed: light-dark(#ffcec4, #72453c);
--md-sys-color-tertiary-fixed-dim: light-dark(#ebafa2, #582f27);
--md-sys-color-tertiary-palette-key-color: light-dark(#9e6a60, #9e6a60);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#f9f9f9, #131313);
--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(#faacf9, #6d2e72);
--md-sys-color-inverse-surface: light-dark(#303030, #e2e2e2);
--md-sys-color-neutral-palette-key-color: light-dark(#777777, #777777);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#777777, #777777);
--md-sys-color-on-background: light-dark(#1b1b1b, #e2e2e2);
--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, #1b001f);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #25002a);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #140614);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #1a0c1b);
--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, #1d0301);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #250703);
--md-sys-color-outline: light-dark(#2c2c2c, #f0f0f0);
--md-sys-color-outline-variant: light-dark(#494949, #c2c2c2);
--md-sys-color-primary: light-dark(#4d0e54, #ffeafa);
--md-sys-color-primary-container: light-dark(#6f3073, #f5a8f5);
--md-sys-color-primary-dim: light-dark(#3d0044, #ffebfa);
--md-sys-color-primary-fixed: light-dark(#6f3073, #ffd6fb);
--md-sys-color-primary-fixed-dim: light-dark(#55175b, #faacf9);
--md-sys-color-primary-palette-key-color: light-dark(#a25ea5, #a25ea5);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#372737, #ffeafa);
--md-sys-color-secondary-container: light-dark(#564355, #d4bbd0);
--md-sys-color-secondary-dim: light-dark(#2a1a2a, #ffebfa);
--md-sys-color-secondary-fixed: light-dark(#564355, #f5dbf0);
--md-sys-color-secondary-fixed-dim: light-dark(#3e2d3d, #d8bfd4);
--md-sys-color-secondary-palette-key-color: light-dark(#867184, #867184);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f9f9f9, #131313);
--md-sys-color-surface-bright: light-dark(#f9f9f9, #505050);
--md-sys-color-surface-container: light-dark(#e2e2e2, #303030);
--md-sys-color-surface-container-high: light-dark(#d4d4d4, #3b3b3b);
--md-sys-color-surface-container-highest: light-dark(#c6c6c6, #474747);
--md-sys-color-surface-container-low: light-dark(#f1f1f1, #1f1f1f);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#b9b9b9, #131313);
--md-sys-color-surface-tint: light-dark(#87458a, #faacf9);
--md-sys-color-surface-variant: light-dark(#e2e2e2, #474747);
--md-sys-color-tertiary: light-dark(#47211a, #ffece8);
--md-sys-color-tertiary-container: light-dark(#693e35, #f1b4a8);
--md-sys-color-tertiary-dim: light-dark(#37150e, #ffede9);
--md-sys-color-tertiary-fixed: light-dark(#693e35, #ffdad3);
--md-sys-color-tertiary-fixed-dim: light-dark(#4f2820, #f6b8ab);
--md-sys-color-tertiary-palette-key-color: light-dark(#9e6a60, #9e6a60);
}