@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, #15130e);
--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(#f7f0e7, #33302b);
--md-sys-color-inverse-primary: light-dark(#e1c37d, #725c20);
--md-sys-color-inverse-surface: light-dark(#33302b, #e8e1d9);
--md-sys-color-neutral-palette-key-color: light-dark(#7b766f, #7b766f);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7e7668, #7e7668);
--md-sys-color-on-background: light-dark(#1e1b16, #e8e1d9);
--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(#ffffff, #ffffff);
--md-sys-color-on-primary-fixed: light-dark(#251a00, #251a00);
--md-sys-color-on-primary-fixed-variant: light-dark(#584408, #584408);
--md-sys-color-on-secondary: light-dark(#ffffff, #392f17);
--md-sys-color-on-secondary-container: light-dark(#6e6145, #c3b493);
--md-sys-color-on-secondary-fixed: light-dark(#231b05, #231b05);
--md-sys-color-on-secondary-fixed-variant: light-dark(#50462c, #50462c);
--md-sys-color-on-surface: light-dark(#1e1b16, #e8e1d9);
--md-sys-color-on-surface-variant: light-dark(#4c4639, #cfc5b4);
--md-sys-color-on-tertiary: light-dark(#ffffff, #263509);
--md-sys-color-on-tertiary-container: light-dark(#ffffff, #ffffff);
--md-sys-color-on-tertiary-fixed: light-dark(#131f00, #131f00);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#3c4c1e, #3c4c1e);
--md-sys-color-outline: light-dark(#7e7668, #989080);
--md-sys-color-outline-variant: light-dark(#cfc5b4, #4c4639);
--md-sys-color-primary: light-dark(#715b20, #e1c37d);
--md-sys-color-primary-container: light-dark(#8c7436, #8c7436);
--md-sys-color-primary-dim: light-dark(#655015, #f8da91);
--md-sys-color-primary-fixed: light-dark(#fedf96, #fedf96);
--md-sys-color-primary-fixed-dim: light-dark(#e1c37d, #e1c37d);
--md-sys-color-primary-palette-key-color: light-dark(#8c7436, #8c7436);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#695d42, #d5c5a3);
--md-sys-color-secondary-container: light-dark(#efdebb, #50462c);
--md-sys-color-secondary-dim: light-dark(#5d5137, #f2e1be);
--md-sys-color-secondary-fixed: light-dark(#f2e1be, #f2e1be);
--md-sys-color-secondary-fixed-dim: light-dark(#d5c5a3, #d5c5a3);
--md-sys-color-secondary-palette-key-color: light-dark(#837659, #837659);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f1, #15130e);
--md-sys-color-surface-bright: light-dark(#fff8f1, #3c3933);
--md-sys-color-surface-container: light-dark(#f4ede4, #221f1a);
--md-sys-color-surface-container-high: light-dark(#eee7df, #2c2a24);
--md-sys-color-surface-container-highest: light-dark(#e8e1d9, #38342f);
--md-sys-color-surface-container-low: light-dark(#faf2ea, #1e1b16);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #100e09);
--md-sys-color-surface-dim: light-dark(#e0d9d1, #15130e);
--md-sys-color-surface-tint: light-dark(#725c20, #e1c37d);
--md-sys-color-surface-variant: light-dark(#ece1d0, #4c4639);
--md-sys-color-tertiary: light-dark(#536433, #bace92);
--md-sys-color-tertiary-container: light-dark(#6b7d49, #6b7d49);
--md-sys-color-tertiary-dim: light-dark(#475828, #e4f9b9);
--md-sys-color-tertiary-fixed: light-dark(#d6eaac, #d6eaac);
--md-sys-color-tertiary-fixed-dim: light-dark(#bace92, #bace92);
--md-sys-color-tertiary-palette-key-color: light-dark(#6b7d49, #6b7d49);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fff8f1, #15130e);
--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(#9d9790, #68645d);
--md-sys-color-inverse-primary: light-dark(#8f7739, #967e3f);
--md-sys-color-inverse-surface: light-dark(#33302b, #e8e1d9);
--md-sys-color-neutral-palette-key-color: light-dark(#7b766f, #7b766f);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7e7668, #7e7668);
--md-sys-color-on-background: light-dark(#958f88, #66625b);
--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(#8f7739, #9a8142);
--md-sys-color-on-primary-fixed: light-dark(#5e490e, #dec17b);
--md-sys-color-on-primary-fixed-variant: light-dark(#7a6427, #b89d5b);
--md-sys-color-on-secondary: light-dark(#fffbff, #322911);
--md-sys-color-on-secondary-container: light-dark(#86795b, #908365);
--md-sys-color-on-secondary-fixed: light-dark(#564b31, #d3c2a1);
--md-sys-color-on-secondary-fixed-variant: light-dark(#726549, #ad9f7f);
--md-sys-color-on-surface: light-dark(#635e58, #a8a29b);
--md-sys-color-on-surface-variant: light-dark(#827a6b, #8a8273);
--md-sys-color-on-tertiary: light-dark(#faffe8, #202e03);
--md-sys-color-on-tertiary-container: light-dark(#6e804c, #788b55);
--md-sys-color-on-tertiary-fixed: light-dark(#415223, #b8cc90);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#5b6c3a, #94a76f);
--md-sys-color-outline: light-dark(#bab1a1, #5a5346);
--md-sys-color-outline-variant: light-dark(#e2d8c6, #3f392d);
--md-sys-color-primary: light-dark(#8a7234, #a88e4d);
--md-sys-color-primary-container: light-dark(#f4d68e, #4a3800);
--md-sys-color-primary-dim: light-dark(#7c6529, #a88e4d);
--md-sys-color-primary-fixed: light-dark(#f4d68e, #634e13);
--md-sys-color-primary-fixed-dim: light-dark(#d7ba75, #4a3800);
--md-sys-color-primary-palette-key-color: light-dark(#8c7436, #8c7436);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#807356, #9d8f70);
--md-sys-color-secondary-container: light-dark(#e8d7b5, #433920);
--md-sys-color-secondary-dim: light-dark(#73674a, #9e9071);
--md-sys-color-secondary-fixed: light-dark(#e8d7b5, #5b5035);
--md-sys-color-secondary-fixed-dim: light-dark(#cbbc9a, #433920);
--md-sys-color-secondary-palette-key-color: light-dark(#837659, #837659);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f1, #15130e);
--md-sys-color-surface-bright: light-dark(#fff8f1, #3c3933);
--md-sys-color-surface-container: light-dark(#f4ede4, #221f1a);
--md-sys-color-surface-container-high: light-dark(#eee7df, #2c2a24);
--md-sys-color-surface-container-highest: light-dark(#e8e1d9, #38342f);
--md-sys-color-surface-container-low: light-dark(#faf2ea, #1e1b16);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #100e09);
--md-sys-color-surface-dim: light-dark(#e0d9d1, #15130e);
--md-sys-color-surface-tint: light-dark(#725c20, #e1c37d);
--md-sys-color-surface-variant: light-dark(#ece1d0, #4c4639);
--md-sys-color-tertiary: light-dark(#697b47, #859861);
--md-sys-color-tertiary-container: light-dark(#cce1a3, #303f12);
--md-sys-color-tertiary-dim: light-dark(#5c6e3c, #859861);
--md-sys-color-tertiary-fixed: light-dark(#cce1a3, #465727);
--md-sys-color-tertiary-fixed-dim: light-dark(#b1c58a, #303f12);
--md-sys-color-tertiary-palette-key-color: light-dark(#6b7d49, #6b7d49);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fff8f1, #15130e);
--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(#e1c37d, #59450a);
--md-sys-color-inverse-surface: light-dark(#33302b, #e8e1d9);
--md-sys-color-neutral-palette-key-color: light-dark(#7b766f, #7b766f);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7e7668, #7e7668);
--md-sys-color-on-background: light-dark(#1e1b16, #e8e1d9);
--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, #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, #181001);
--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, #070d00);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #0b1400);
--md-sys-color-outline: light-dark(#312c20, #faefdd);
--md-sys-color-outline-variant: light-dark(#4f483c, #cbc1b1);
--md-sys-color-primary: light-dark(#392a00, #ffeecd);
--md-sys-color-primary-container: light-dark(#5b460b, #ddc07a);
--md-sys-color-primary-dim: light-dark(#291e00, #ffefd0);
--md-sys-color-primary-fixed: light-dark(#5b460b, #fedf96);
--md-sys-color-primary-fixed-dim: light-dark(#413000, #e1c37d);
--md-sys-color-primary-palette-key-color: light-dark(#8c7436, #8c7436);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#342b14, #ffeecd);
--md-sys-color-secondary-container: light-dark(#53482e, #d1c19f);
--md-sys-color-secondary-dim: light-dark(#271e08, #ffefd0);
--md-sys-color-secondary-fixed: light-dark(#53482e, #f2e1be);
--md-sys-color-secondary-fixed-dim: light-dark(#3b3219, #d5c5a3);
--md-sys-color-secondary-palette-key-color: light-dark(#837659, #837659);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f1, #15130e);
--md-sys-color-surface-bright: light-dark(#fff8f1, #535049);
--md-sys-color-surface-container: light-dark(#e8e1d9, #33302b);
--md-sys-color-surface-container-high: light-dark(#dad3cb, #3e3b35);
--md-sys-color-surface-container-highest: light-dark(#ccc6be, #4a4640);
--md-sys-color-surface-container-low: light-dark(#f7f0e7, #221f1a);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#beb8b0, #15130e);
--md-sys-color-surface-tint: light-dark(#725c20, #e1c37d);
--md-sys-color-surface-variant: light-dark(#ece1d0, #4c4639);
--md-sys-color-tertiary: light-dark(#223105, #e3f8b9);
--md-sys-color-tertiary-container: light-dark(#3e4f20, #b6ca8f);
--md-sys-color-tertiary-dim: light-dark(#162300, #e4f9b9);
--md-sys-color-tertiary-fixed: light-dark(#3e4f20, #d6eaac);
--md-sys-color-tertiary-fixed-dim: light-dark(#28370b, #bace92);
--md-sys-color-tertiary-palette-key-color: light-dark(#6b7d49, #6b7d49);
}