@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(#fff8f6, #1c110c);
--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(#ffede6, #3b2e27);
--md-sys-color-inverse-primary: light-dark(#b2c5ff, #445c99);
--md-sys-color-inverse-surface: light-dark(#3b2e27, #f4ded5);
--md-sys-color-neutral-palette-key-color: light-dark(#85736c, #85736c);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#8b7266, #8b7266);
--md-sys-color-on-background: light-dark(#241914, #f4ded5);
--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, #102d68);
--md-sys-color-on-primary-container: light-dark(#2b4480, #dae2ff);
--md-sys-color-on-primary-fixed: light-dark(#001847, #001847);
--md-sys-color-on-primary-fixed-variant: light-dark(#2b4480, #2b4480);
--md-sys-color-on-secondary: light-dark(#ffffff, #2a3410);
--md-sys-color-on-secondary-container: light-dark(#404b25, #dbe8b5);
--md-sys-color-on-secondary-fixed: light-dark(#161f01, #161f01);
--md-sys-color-on-secondary-fixed-variant: light-dark(#404b25, #404b25);
--md-sys-color-on-surface: light-dark(#241914, #f4ded5);
--md-sys-color-on-surface-variant: light-dark(#584238, #dfc0b3);
--md-sys-color-on-tertiary: light-dark(#ffffff, #0b3817);
--md-sys-color-on-tertiary-container: light-dark(#25502c, #beefbe);
--md-sys-color-on-tertiary-fixed: light-dark(#002108, #002108);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#25502c, #25502c);
--md-sys-color-outline: light-dark(#8b7266, #a68b7f);
--md-sys-color-outline-variant: light-dark(#dfc0b3, #584238);
--md-sys-color-primary: light-dark(#445c99, #b2c5ff);
--md-sys-color-primary-container: light-dark(#dae2ff, #2b4480);
--md-sys-color-primary-dim: light-dark(#38508c, #9ab2f5);
--md-sys-color-primary-fixed: light-dark(#dae2ff, #dae2ff);
--md-sys-color-primary-fixed-dim: light-dark(#b2c5ff, #b2c5ff);
--md-sys-color-primary-palette-key-color: light-dark(#5d75b3, #5d75b3);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#58633a, #bfcc9a);
--md-sys-color-secondary-container: light-dark(#dbe8b5, #404b25);
--md-sys-color-secondary-dim: light-dark(#4c572f, #dbe8b5);
--md-sys-color-secondary-fixed: light-dark(#dbe8b5, #dbe8b5);
--md-sys-color-secondary-fixed-dim: light-dark(#bfcc9a, #bfcc9a);
--md-sys-color-secondary-palette-key-color: light-dark(#707c51, #707c51);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f6, #1c110c);
--md-sys-color-surface-bright: light-dark(#fff8f6, #443630);
--md-sys-color-surface-container: light-dark(#ffeae1, #291d17);
--md-sys-color-surface-container-high: light-dark(#fae4da, #342721);
--md-sys-color-surface-container-highest: light-dark(#f4ded5, #3f322c);
--md-sys-color-surface-container-low: light-dark(#fff1eb, #241914);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #160c07);
--md-sys-color-surface-dim: light-dark(#ecd6cc, #1c110c);
--md-sys-color-surface-tint: light-dark(#445c99, #b2c5ff);
--md-sys-color-surface-variant: light-dark(#fcdcce, #584238);
--md-sys-color-tertiary: light-dark(#3d6842, #a2d2a3);
--md-sys-color-tertiary-container: light-dark(#beefbe, #25502c);
--md-sys-color-tertiary-dim: light-dark(#315c36, #c6f8c6);
--md-sys-color-tertiary-fixed: light-dark(#beefbe, #beefbe);
--md-sys-color-tertiary-fixed-dim: light-dark(#a2d2a3, #a2d2a3);
--md-sys-color-tertiary-palette-key-color: light-dark(#558158, #558158);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fff8f6, #1c110c);
--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(#a7948c, #71615a);
--md-sys-color-inverse-primary: light-dark(#6078b7, #677fbe);
--md-sys-color-inverse-surface: light-dark(#3b2e27, #f4ded5);
--md-sys-color-neutral-palette-key-color: light-dark(#85736c, #85736c);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#8b7266, #8b7266);
--md-sys-color-on-background: light-dark(#9f8c84, #6f5f58);
--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(#fefcff, #052661);
--md-sys-color-on-primary-container: light-dark(#6078b7, #6b82c2);
--md-sys-color-on-primary-fixed: light-dark(#314a85, #aec3ff);
--md-sys-color-on-primary-fixed-variant: light-dark(#4c64a2, #879fe0);
--md-sys-color-on-secondary: light-dark(#fbffe5, #232d0a);
--md-sys-color-on-secondary-container: light-dark(#737f53, #7d895d);
--md-sys-color-on-secondary-fixed: light-dark(#45502a, #bdca98);
--md-sys-color-on-secondary-fixed-variant: light-dark(#5f6b41, #99a577);
--md-sys-color-on-surface: light-dark(#6c5c54, #b29f96);
--md-sys-color-on-surface-variant: light-dark(#8f756a, #987e72);
--md-sys-color-on-tertiary: light-dark(#f7fff2, #033111);
--md-sys-color-on-tertiary-container: light-dark(#58845b, #628f65);
--md-sys-color-on-tertiary-fixed: light-dark(#2a5531, #a0d0a1);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#447049, #7dab7f);
--md-sys-color-outline: light-dark(#c9ac9f, #664f45);
--md-sys-color-outline-variant: light-dark(#f2d2c4, #4a362c);
--md-sys-color-primary: light-dark(#5b73b1, #778fcf);
--md-sys-color-primary-container: light-dark(#ccd8ff, #1c3772);
--md-sys-color-primary-dim: light-dark(#4e66a3, #7890d0);
--md-sys-color-primary-fixed: light-dark(#ccd8ff, #364f8b);
--md-sys-color-primary-fixed-dim: light-dark(#a4bcff, #1c3772);
--md-sys-color-primary-palette-key-color: light-dark(#5d75b3, #5d75b3);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#6e794e, #8a9668);
--md-sys-color-secondary-container: light-dark(#d2dfac, #343e19);
--md-sys-color-secondary-dim: light-dark(#616c43, #8a9669);
--md-sys-color-secondary-fixed: light-dark(#d2dfac, #4a552e);
--md-sys-color-secondary-fixed-dim: light-dark(#b6c392, #343e19);
--md-sys-color-secondary-palette-key-color: light-dark(#707c51, #707c51);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f6, #1c110c);
--md-sys-color-surface-bright: light-dark(#fff8f6, #443630);
--md-sys-color-surface-container: light-dark(#ffeae1, #291d17);
--md-sys-color-surface-container-high: light-dark(#fae4da, #342721);
--md-sys-color-surface-container-highest: light-dark(#f4ded5, #3f322c);
--md-sys-color-surface-container-low: light-dark(#fff1eb, #241914);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #160c07);
--md-sys-color-surface-dim: light-dark(#ecd6cc, #1c110c);
--md-sys-color-surface-tint: light-dark(#445c99, #b2c5ff);
--md-sys-color-surface-variant: light-dark(#fcdcce, #584238);
--md-sys-color-tertiary: light-dark(#527f56, #6e9c71);
--md-sys-color-tertiary-container: light-dark(#b4e5b5, #174220);
--md-sys-color-tertiary-dim: light-dark(#46724a, #6e9c71);
--md-sys-color-tertiary-fixed: light-dark(#b4e5b5, #2f5a35);
--md-sys-color-tertiary-fixed-dim: light-dark(#99c99b, #174220);
--md-sys-color-tertiary-palette-key-color: light-dark(#558158, #558158);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fff8f6, #1c110c);
--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(#b2c5ff, #2c4681);
--md-sys-color-inverse-surface: light-dark(#3b2e27, #f4ded5);
--md-sys-color-neutral-palette-key-color: light-dark(#85736c, #85736c);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#8b7266, #8b7266);
--md-sys-color-on-background: light-dark(#241914, #f4ded5);
--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, #000926);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #000f32);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #080d00);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #0c1300);
--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, #000f02);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #001504);
--md-sys-color-outline: light-dark(#3b281f, #ffece5);
--md-sys-color-outline-variant: light-dark(#5a443a, #dbbcaf);
--md-sys-color-primary: light-dark(#092963, #edefff);
--md-sys-color-primary-container: light-dark(#2e4782, #acc1ff);
--md-sys-color-primary-dim: light-dark(#001c4f, #eef0ff);
--md-sys-color-primary-fixed: light-dark(#2e4782, #dae2ff);
--md-sys-color-primary-fixed-dim: light-dark(#13306a, #b2c5ff);
--md-sys-color-primary-palette-key-color: light-dark(#5d75b3, #5d75b3);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#26300c, #e9f6c1);
--md-sys-color-secondary-container: light-dark(#424d27, #bbc897);
--md-sys-color-secondary-dim: light-dark(#192302, #eaf7c2);
--md-sys-color-secondary-fixed: light-dark(#424d27, #dbe8b5);
--md-sys-color-secondary-fixed-dim: light-dark(#2c3612, #bfcc9a);
--md-sys-color-secondary-palette-key-color: light-dark(#707c51, #707c51);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f6, #1c110c);
--md-sys-color-surface-bright: light-dark(#fff8f6, #5c4d46);
--md-sys-color-surface-container: light-dark(#f4ded5, #3b2e27);
--md-sys-color-surface-container-high: light-dark(#e6d0c7, #463832);
--md-sys-color-surface-container-highest: light-dark(#d7c2b9, #52443d);
--md-sys-color-surface-container-low: light-dark(#ffede6, #291d17);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#c9b5ac, #1c110c);
--md-sys-color-surface-tint: light-dark(#445c99, #b2c5ff);
--md-sys-color-surface-variant: light-dark(#fcdcce, #584238);
--md-sys-color-tertiary: light-dark(#063413, #cbfdcb);
--md-sys-color-tertiary-container: light-dark(#27522e, #9fcea0);
--md-sys-color-tertiary-dim: light-dark(#00260a, #ccfdcc);
--md-sys-color-tertiary-fixed: light-dark(#27522e, #beefbe);
--md-sys-color-tertiary-fixed-dim: light-dark(#0e3b19, #a2d2a3);
--md-sys-color-tertiary-palette-key-color: light-dark(#558158, #558158);
}