@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(#f3fcf4, #0d1511);
--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(#eaf3eb, #2a322d);
--md-sys-color-inverse-primary: light-dark(#ffb4a5, #944839);
--md-sys-color-inverse-surface: light-dark(#2a322d, #dce5dd);
--md-sys-color-neutral-palette-key-color: light-dark(#707973, #707973);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#6b7b71, #6b7b71);
--md-sys-color-on-background: light-dark(#151d19, #dce5dd);
--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, #591c10);
--md-sys-color-on-primary-container: light-dark(#763224, #ffdad3);
--md-sys-color-on-primary-fixed: light-dark(#3c0701, #3c0701);
--md-sys-color-on-primary-fixed-variant: light-dark(#763224, #763224);
--md-sys-color-on-secondary: light-dark(#ffffff, #0c3729);
--md-sys-color-on-secondary-container: light-dark(#264e3f, #c0ecd7);
--md-sys-color-on-secondary-fixed: light-dark(#002116, #002116);
--md-sys-color-on-secondary-fixed-variant: light-dark(#264e3f, #264e3f);
--md-sys-color-on-surface: light-dark(#151d19, #dce5dd);
--md-sys-color-on-surface-variant: light-dark(#3b4a41, #bacbbf);
--md-sys-color-on-tertiary: light-dark(#ffffff, #003736);
--md-sys-color-on-tertiary-container: light-dark(#00504f, #a8efed);
--md-sys-color-on-tertiary-fixed: light-dark(#00201f, #00201f);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#00504f, #00504f);
--md-sys-color-outline: light-dark(#6b7b71, #84958a);
--md-sys-color-outline-variant: light-dark(#bacbbf, #3b4a41);
--md-sys-color-primary: light-dark(#944839, #ffb4a5);
--md-sys-color-primary-container: light-dark(#ffdad3, #763224);
--md-sys-color-primary-dim: light-dark(#853d2e, #fa9a87);
--md-sys-color-primary-fixed: light-dark(#ffdad3, #ffdad3);
--md-sys-color-primary-fixed-dim: light-dark(#ffb4a5, #ffb4a5);
--md-sys-color-primary-palette-key-color: light-dark(#b2604f, #b2604f);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#3e6656, #a4d0bc);
--md-sys-color-secondary-container: light-dark(#c0ecd7, #264e3f);
--md-sys-color-secondary-dim: light-dark(#325a4a, #c0ecd7);
--md-sys-color-secondary-fixed: light-dark(#c0ecd7, #c0ecd7);
--md-sys-color-secondary-fixed-dim: light-dark(#a4d0bc, #a4d0bc);
--md-sys-color-secondary-palette-key-color: light-dark(#567f6e, #567f6e);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f3fcf4, #0d1511);
--md-sys-color-surface-bright: light-dark(#f3fcf4, #333b36);
--md-sys-color-surface-container: light-dark(#e7f0e8, #19211d);
--md-sys-color-surface-container-high: light-dark(#e1ebe3, #232c27);
--md-sys-color-surface-container-highest: light-dark(#dce5dd, #2e3731);
--md-sys-color-surface-container-low: light-dark(#edf6ee, #151d19);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #08100c);
--md-sys-color-surface-dim: light-dark(#d3dcd5, #0d1511);
--md-sys-color-surface-tint: light-dark(#944839, #ffb4a5);
--md-sys-color-surface-variant: light-dark(#d6e7db, #3b4a41);
--md-sys-color-tertiary: light-dark(#1a6967, #8cd3d1);
--md-sys-color-tertiary-container: light-dark(#a8efed, #00504f);
--md-sys-color-tertiary-dim: light-dark(#015c5b, #b0f8f6);
--md-sys-color-tertiary-fixed: light-dark(#a8efed, #a8efed);
--md-sys-color-tertiary-fixed-dim: light-dark(#8cd3d1, #8cd3d1);
--md-sys-color-tertiary-palette-key-color: light-dark(#3a8280, #3a8280);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#f3fcf4, #0d1511);
--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(#919a93, #5d6660);
--md-sys-color-inverse-primary: light-dark(#b56352, #be6958);
--md-sys-color-inverse-surface: light-dark(#2a322d, #dce5dd);
--md-sys-color-neutral-palette-key-color: light-dark(#707973, #707973);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#6b7b71, #6b7b71);
--md-sys-color-on-background: light-dark(#89928b, #5b645e);
--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, #50150a);
--md-sys-color-on-primary-container: light-dark(#b66352, #c26d5b);
--md-sys-color-on-primary-fixed: light-dark(#7d3729, #ffb1a0);
--md-sys-color-on-primary-fixed-variant: light-dark(#9e5040, #e38875);
--md-sys-color-on-secondary: light-dark(#f5fff8, #033023);
--md-sys-color-on-secondary-container: light-dark(#598271, #638d7b);
--md-sys-color-on-secondary-fixed: light-dark(#2b5444, #a2ceb9);
--md-sys-color-on-secondary-fixed-variant: light-dark(#466e5e, #7fa996);
--md-sys-color-on-surface: light-dark(#58615b, #9ca59e);
--md-sys-color-on-surface-variant: light-dark(#6f7e74, #77877d);
--md-sys-color-on-tertiary: light-dark(#f3fffe, #002f2f);
--md-sys-color-on-tertiary-container: light-dark(#3d8583, #488f8e);
--md-sys-color-on-tertiary-fixed: light-dark(#005654, #89d0ce);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#257170, #65acaa);
--md-sys-color-outline: light-dark(#a5b6ab, #48584e);
--md-sys-color-outline-variant: light-dark(#ccddd1, #2f3d35);
--md-sys-color-primary: light-dark(#af5e4d, #d17967);
--md-sys-color-primary-container: light-dark(#ffcec4, #662519);
--md-sys-color-primary-dim: light-dark(#a05141, #d17967);
--md-sys-color-primary-fixed: light-dark(#ffcec4, #833b2d);
--md-sys-color-primary-fixed-dim: light-dark(#ffa794, #662519);
--md-sys-color-primary-palette-key-color: light-dark(#b2604f, #b2604f);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#547d6c, #709a87);
--md-sys-color-secondary-container: light-dark(#b6e3ce, #184133);
--md-sys-color-secondary-dim: light-dark(#47705f, #709a88);
--md-sys-color-secondary-fixed: light-dark(#b6e3ce, #305949);
--md-sys-color-secondary-fixed-dim: light-dark(#9bc7b3, #184133);
--md-sys-color-secondary-palette-key-color: light-dark(#567f6e, #567f6e);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f3fcf4, #0d1511);
--md-sys-color-surface-bright: light-dark(#f3fcf4, #333b36);
--md-sys-color-surface-container: light-dark(#e7f0e8, #19211d);
--md-sys-color-surface-container-high: light-dark(#e1ebe3, #232c27);
--md-sys-color-surface-container-highest: light-dark(#dce5dd, #2e3731);
--md-sys-color-surface-container-low: light-dark(#edf6ee, #151d19);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #08100c);
--md-sys-color-surface-dim: light-dark(#d3dcd5, #0d1511);
--md-sys-color-surface-tint: light-dark(#944839, #ffb4a5);
--md-sys-color-surface-variant: light-dark(#d6e7db, #3b4a41);
--md-sys-color-tertiary: light-dark(#377f7e, #559c9a);
--md-sys-color-tertiary-container: light-dark(#9ee6e3, #004241);
--md-sys-color-tertiary-dim: light-dark(#277271, #569d9b);
--md-sys-color-tertiary-fixed: light-dark(#9ee6e3, #005b5a);
--md-sys-color-tertiary-fixed-dim: light-dark(#83c9c7, #004241);
--md-sys-color-tertiary-palette-key-color: light-dark(#3a8280, #3a8280);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#f3fcf4, #0d1511);
--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(#ffb4a5, #783325);
--md-sys-color-inverse-surface: light-dark(#2a322d, #dce5dd);
--md-sys-color-neutral-palette-key-color: light-dark(#707973, #707973);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#6b7b71, #6b7b71);
--md-sys-color-on-background: light-dark(#151d19, #dce5dd);
--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, #200100);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #2b0200);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #000e08);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #00150d);
--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, #000e0e);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #001414);
--md-sys-color-outline: light-dark(#212f27, #e3f4e8);
--md-sys-color-outline-variant: light-dark(#3e4d44, #b6c7bb);
--md-sys-color-primary: light-dark(#53180c, #ffece8);
--md-sys-color-primary-container: light-dark(#793426, #ffaf9e);
--md-sys-color-primary-dim: light-dark(#420b03, #ffede9);
--md-sys-color-primary-fixed: light-dark(#793426, #ffdad3);
--md-sys-color-primary-fixed-dim: light-dark(#5c1e12, #ffb4a5);
--md-sys-color-primary-palette-key-color: light-dark(#b2604f, #b2604f);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#063325, #cdfae5);
--md-sys-color-secondary-container: light-dark(#285141, #a1ccb8);
--md-sys-color-secondary-dim: light-dark(#00251a, #cefbe5);
--md-sys-color-secondary-fixed: light-dark(#285141, #c0ecd7);
--md-sys-color-secondary-fixed-dim: light-dark(#0f3a2b, #a4d0bc);
--md-sys-color-secondary-palette-key-color: light-dark(#567f6e, #567f6e);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f3fcf4, #0d1511);
--md-sys-color-surface-bright: light-dark(#f3fcf4, #49524c);
--md-sys-color-surface-container: light-dark(#dce5dd, #2a322d);
--md-sys-color-surface-container-high: light-dark(#cdd7cf, #353d38);
--md-sys-color-surface-container-highest: light-dark(#c0c9c1, #404943);
--md-sys-color-surface-container-low: light-dark(#eaf3eb, #19211d);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#b2bbb4, #0d1511);
--md-sys-color-surface-tint: light-dark(#944839, #ffb4a5);
--md-sys-color-surface-variant: light-dark(#d6e7db, #3b4a41);
--md-sys-color-tertiary: light-dark(#003231, #b5fdfb);
--md-sys-color-tertiary-container: light-dark(#005251, #88cfcd);
--md-sys-color-tertiary-dim: light-dark(#002424, #b6fefb);
--md-sys-color-tertiary-fixed: light-dark(#005251, #a8efed);
--md-sys-color-tertiary-fixed-dim: light-dark(#003939, #8cd3d1);
--md-sys-color-tertiary-palette-key-color: light-dark(#3a8280, #3a8280);
}