@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, #252f50);
--md-sys-color-on-tertiary-container: light-dark(#8d97be, #8d97be);
--md-sys-color-on-tertiary-fixed: light-dark(#0f1a3a, #0f1a3a);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#3b4568, #3b4568);
--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(#0f1a3a, #bbc5ee);
--md-sys-color-tertiary-container: light-dark(#252f50, #252f50);
--md-sys-color-tertiary-dim: light-dark(#475174, #c9d3fd);
--md-sys-color-tertiary-fixed: light-dark(#dce1ff, #dce1ff);
--md-sys-color-tertiary-fixed-dim: light-dark(#bbc5ee, #bbc5ee);
--md-sys-color-tertiary-palette-key-color: light-dark(#252f50, #252f50);
}
: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(#fefbff, #1e2849);
--md-sys-color-on-tertiary-container: light-dark(#6f799e, #7983a9);
--md-sys-color-on-tertiary-fixed: light-dark(#414b6d, #b9c2ec);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#5b6589, #959fc6);
--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(#697398, #858fb6);
--md-sys-color-tertiary-container: light-dark(#ced7ff, #2f395a);
--md-sys-color-tertiary-dim: light-dark(#5d668b, #8690b6);
--md-sys-color-tertiary-fixed: light-dark(#ced7ff, #465073);
--md-sys-color-tertiary-fixed-dim: light-dark(#b2bce4, #2f395a);
--md-sys-color-tertiary-palette-key-color: light-dark(#252f50, #252f50);
}
: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(#e9ebff, #000829);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #040f2f);
--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(#0f1a3a, #eeefff);
--md-sys-color-tertiary-container: light-dark(#252f50, #b7c1ea);
--md-sys-color-tertiary-dim: light-dark(#131e3e, #eff0ff);
--md-sys-color-tertiary-fixed: light-dark(#3e486a, #dce1ff);
--md-sys-color-tertiary-fixed-dim: light-dark(#273152, #bbc5ee);
--md-sys-color-tertiary-palette-key-color: light-dark(#252f50, #252f50);
}