@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(#fff8f1, #15130f);
--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(#f6f0e8, #33302b);
--md-sys-color-inverse-primary: light-dark(#dec487, #705c29);
--md-sys-color-inverse-surface: light-dark(#33302b, #e8e1da);
--md-sys-color-neutral-palette-key-color: light-dark(#7b7670, #7b7670);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7e7669, #7e7669);
--md-sys-color-on-background: light-dark(#1e1b17, #e8e1da);
--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, #3e2e00);
--md-sys-color-on-primary-container: light-dark(#ae955d, #ae955d);
--md-sys-color-on-primary-fixed: light-dark(#251a00, #251a00);
--md-sys-color-on-primary-fixed-variant: light-dark(#574414, #574414);
--md-sys-color-on-secondary: light-dark(#ffffff, #382f1b);
--md-sys-color-on-secondary-container: light-dark(#6e634b, #c2b497);
--md-sys-color-on-secondary-fixed: light-dark(#221b08, #221b08);
--md-sys-color-on-secondary-fixed-variant: light-dark(#50462f, #50462f);
--md-sys-color-on-surface: light-dark(#1e1b17, #e8e1da);
--md-sys-color-on-surface-variant: light-dark(#4c463a, #cfc5b6);
--md-sys-color-on-tertiary: light-dark(#ffffff, #253510);
--md-sys-color-on-tertiary-container: light-dark(#8b9f6f, #8b9f6f);
--md-sys-color-on-tertiary-fixed: light-dark(#112001, #112001);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#3b4c25, #3b4c25);
--md-sys-color-outline: light-dark(#7e7669, #989081);
--md-sys-color-outline-variant: light-dark(#cfc5b6, #4c463a);
--md-sys-color-primary: light-dark(#251a00, #dec487);
--md-sys-color-primary-container: light-dark(#3e2e00, #3e2e00);
--md-sys-color-primary-dim: light-dark(#63501e, #fce0a0);
--md-sys-color-primary-fixed: light-dark(#fce0a0, #fce0a0);
--md-sys-color-primary-fixed-dim: light-dark(#dec487, #dec487);
--md-sys-color-primary-palette-key-color: light-dark(#8b753f, #8b753f);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#685d45, #d4c5a8);
--md-sys-color-secondary-container: light-dark(#f1e1c2, #50462f);
--md-sys-color-secondary-dim: light-dark(#5c513a, #f1e1c2);
--md-sys-color-secondary-fixed: light-dark(#f1e1c2, #f1e1c2);
--md-sys-color-secondary-fixed-dim: light-dark(#d4c5a8, #d4c5a8);
--md-sys-color-secondary-palette-key-color: light-dark(#82765d, #82765d);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f1, #15130f);
--md-sys-color-surface-bright: light-dark(#fff8f1, #3c3934);
--md-sys-color-surface-container: light-dark(#f4ede5, #221f1b);
--md-sys-color-surface-container-high: light-dark(#eee7e0, #2c2a25);
--md-sys-color-surface-container-highest: light-dark(#e8e1da, #373430);
--md-sys-color-surface-container-low: light-dark(#f9f2eb, #1e1b17);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #100e0a);
--md-sys-color-surface-dim: light-dark(#dfd9d2, #15130f);
--md-sys-color-surface-tint: light-dark(#705c29, #dec487);
--md-sys-color-surface-variant: light-dark(#ebe1d1, #4c463a);
--md-sys-color-tertiary: light-dark(#111f01, #b9ce9a);
--md-sys-color-tertiary-container: light-dark(#253510, #253510);
--md-sys-color-tertiary-dim: light-dark(#46582f, #e0f6bf);
--md-sys-color-tertiary-fixed: light-dark(#d5eab5, #d5eab5);
--md-sys-color-tertiary-fixed-dim: light-dark(#b9ce9a, #b9ce9a);
--md-sys-color-tertiary-palette-key-color: light-dark(#253510, #253510);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fff8f1, #15130f);
--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(#9c9791, #68645e);
--md-sys-color-inverse-primary: light-dark(#8d7741, #957e48);
--md-sys-color-inverse-surface: light-dark(#33302b, #e8e1da);
--md-sys-color-neutral-palette-key-color: light-dark(#7b7670, #7b7670);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7e7669, #7e7669);
--md-sys-color-on-background: light-dark(#948f89, #66625c);
--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, #362800);
--md-sys-color-on-primary-container: light-dark(#8d7742, #98824b);
--md-sys-color-on-primary-fixed: light-dark(#5c4a19, #dcc184);
--md-sys-color-on-primary-fixed-variant: light-dark(#796430, #b69d64);
--md-sys-color-on-secondary: light-dark(#fffbff, #312915);
--md-sys-color-on-secondary-container: light-dark(#85795f, #8f8369);
--md-sys-color-on-secondary-fixed: light-dark(#554b34, #d1c2a5);
--md-sys-color-on-secondary-fixed-variant: light-dark(#71654d, #ac9f83);
--md-sys-color-on-surface: light-dark(#625e59, #a7a29c);
--md-sys-color-on-surface-variant: light-dark(#817a6c, #8a8274);
--md-sys-color-on-tertiary: light-dark(#faffea, #1f2e0a);
--md-sys-color-on-tertiary-container: light-dark(#6d8053, #778b5d);
--md-sys-color-on-tertiary-fixed: light-dark(#405229, #b6cb98);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#5a6c41, #93a777);
--md-sys-color-outline: light-dark(#bab1a2, #5a5347);
--md-sys-color-outline-variant: light-dark(#e2d8c7, #3f392e);
--md-sys-color-primary: light-dark(#88723d, #a68e56);
--md-sys-color-primary-container: light-dark(#f2d697, #493807);
--md-sys-color-primary-dim: light-dark(#7a6532, #a68f56);
--md-sys-color-primary-fixed: light-dark(#f2d697, #624f1d);
--md-sys-color-primary-fixed-dim: light-dark(#d5ba7e, #493807);
--md-sys-color-primary-palette-key-color: light-dark(#8b753f, #8b753f);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#7f735a, #9c8f75);
--md-sys-color-secondary-container: light-dark(#e7d7b9, #423924);
--md-sys-color-secondary-dim: light-dark(#72674e, #9d9075);
--md-sys-color-secondary-fixed: light-dark(#e7d7b9, #5a5039);
--md-sys-color-secondary-fixed-dim: light-dark(#cabc9f, #423924);
--md-sys-color-secondary-palette-key-color: light-dark(#82765d, #82765d);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f1, #15130f);
--md-sys-color-surface-bright: light-dark(#fff8f1, #3c3934);
--md-sys-color-surface-container: light-dark(#f4ede5, #221f1b);
--md-sys-color-surface-container-high: light-dark(#eee7e0, #2c2a25);
--md-sys-color-surface-container-highest: light-dark(#e8e1da, #373430);
--md-sys-color-surface-container-low: light-dark(#f9f2eb, #1e1b17);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #100e0a);
--md-sys-color-surface-dim: light-dark(#dfd9d2, #15130f);
--md-sys-color-surface-tint: light-dark(#705c29, #dec487);
--md-sys-color-surface-variant: light-dark(#ebe1d1, #4c463a);
--md-sys-color-tertiary: light-dark(#687b4e, #849768);
--md-sys-color-tertiary-container: light-dark(#cbe0ac, #2f3f19);
--md-sys-color-tertiary-dim: light-dark(#5b6e43, #849869);
--md-sys-color-tertiary-fixed: light-dark(#cbe0ac, #45572e);
--md-sys-color-tertiary-fixed-dim: light-dark(#b0c492, #2f3f19);
--md-sys-color-tertiary-palette-key-color: light-dark(#253510, #253510);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fff8f1, #15130f);
--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(#dec487, #584615);
--md-sys-color-inverse-surface: light-dark(#33302b, #e8e1da);
--md-sys-color-neutral-palette-key-color: light-dark(#7b7670, #7b7670);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7e7669, #7e7669);
--md-sys-color-on-background: light-dark(#1e1b17, #e8e1da);
--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(#ffeabe, #110a00);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #181000);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #110a00);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #171002);
--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(#def4bd, #050e00);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #091400);
--md-sys-color-outline: light-dark(#312c21, #f9efde);
--md-sys-color-outline-variant: light-dark(#4f483c, #cbc1b2);
--md-sys-color-primary: light-dark(#251a00, #ffeece);
--md-sys-color-primary-container: light-dark(#3e2e00, #dac083);
--md-sys-color-primary-dim: light-dark(#291e00, #ffefd1);
--md-sys-color-primary-fixed: light-dark(#594716, #fce0a0);
--md-sys-color-primary-fixed-dim: light-dark(#413001, #dec487);
--md-sys-color-primary-palette-key-color: light-dark(#8b753f, #8b753f);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#342b17, #ffeecf);
--md-sys-color-secondary-container: light-dark(#524832, #d0c1a4);
--md-sys-color-secondary-dim: light-dark(#261e0b, #ffefd1);
--md-sys-color-secondary-fixed: light-dark(#524832, #f1e1c2);
--md-sys-color-secondary-fixed-dim: light-dark(#3b321d, #d4c5a8);
--md-sys-color-secondary-palette-key-color: light-dark(#82765d, #82765d);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f1, #15130f);
--md-sys-color-surface-bright: light-dark(#fff8f1, #53504a);
--md-sys-color-surface-container: light-dark(#e8e1da, #33302b);
--md-sys-color-surface-container-high: light-dark(#dad3cc, #3e3b36);
--md-sys-color-surface-container-highest: light-dark(#ccc6bf, #4a4641);
--md-sys-color-surface-container-low: light-dark(#f6f0e8, #221f1b);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#beb8b1, #15130f);
--md-sys-color-surface-tint: light-dark(#705c29, #dec487);
--md-sys-color-surface-variant: light-dark(#ebe1d1, #4c463a);
--md-sys-color-tertiary: light-dark(#111f01, #e2f8c1);
--md-sys-color-tertiary-container: light-dark(#253510, #b5ca97);
--md-sys-color-tertiary-dim: light-dark(#152402, #e3f8c2);
--md-sys-color-tertiary-fixed: light-dark(#3d4f27, #d5eab5);
--md-sys-color-tertiary-fixed-dim: light-dark(#273712, #b9ce9a);
--md-sys-color-tertiary-palette-key-color: light-dark(#253510, #253510);
}