@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(#fff8f8, #1e0f14);
--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(#ffecf0, #3d2c31);
--md-sys-color-inverse-primary: light-dark(#ffb1c8, #b90063);
--md-sys-color-inverse-surface: light-dark(#3d2c31, #f8dbe2);
--md-sys-color-neutral-palette-key-color: light-dark(#887177, #887177);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#8d6f77, #8d6f77);
--md-sys-color-on-background: light-dark(#27171c, #f8dbe2);
--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, #650033);
--md-sys-color-on-primary-container: light-dark(#130006, #130006);
--md-sys-color-on-primary-fixed: light-dark(#3e001d, #3e001d);
--md-sys-color-on-primary-fixed-variant: light-dark(#8e004a, #8e004a);
--md-sys-color-on-secondary: light-dark(#ffffff, #650033);
--md-sys-color-on-secondary-container: light-dark(#771240, #ff9abb);
--md-sys-color-on-secondary-fixed: light-dark(#3e001d, #3e001d);
--md-sys-color-on-secondary-fixed-variant: light-dark(#831d4a, #831d4a);
--md-sys-color-on-surface: light-dark(#27171c, #f8dbe2);
--md-sys-color-on-surface-variant: light-dark(#5a4047, #e1bdc6);
--md-sys-color-on-tertiary: light-dark(#ffffff, #003908);
--md-sys-color-on-tertiary-container: light-dark(#ffffff, #ffffff);
--md-sys-color-on-tertiary-fixed: light-dark(#002203, #002203);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#00530f, #00530f);
--md-sys-color-outline: light-dark(#8d6f77, #a98891);
--md-sys-color-outline-variant: light-dark(#e1bdc6, #5a4047);
--md-sys-color-primary: light-dark(#b90063, #ffb1c8);
--md-sys-color-primary-container: light-dark(#e11e7c, #e11e7c);
--md-sys-color-primary-dim: light-dark(#a30056, #ff4a96);
--md-sys-color-primary-fixed: light-dark(#ffd9e2, #ffd9e2);
--md-sys-color-primary-fixed-dim: light-dark(#ffb1c8, #ffb1c8);
--md-sys-color-primary-palette-key-color: light-dark(#e11e7c, #e11e7c);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#a23661, #ffb1c8);
--md-sys-color-secondary-container: light-dark(#fe7fac, #86204c);
--md-sys-color-secondary-dim: light-dark(#932a55, #fe7fac);
--md-sys-color-secondary-fixed: light-dark(#ffd9e2, #ffd9e2);
--md-sys-color-secondary-fixed-dim: light-dark(#ffb1c8, #ffb1c8);
--md-sys-color-secondary-palette-key-color: light-dark(#c24f7a, #c24f7a);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f8, #1e0f14);
--md-sys-color-surface-bright: light-dark(#fff8f8, #473439);
--md-sys-color-surface-container: light-dark(#ffe8ed, #2b1b20);
--md-sys-color-surface-container-high: light-dark(#fee1e7, #36252a);
--md-sys-color-surface-container-highest: light-dark(#f8dbe2, #423035);
--md-sys-color-surface-container-low: light-dark(#fff0f2, #27171c);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #180a0e);
--md-sys-color-surface-dim: light-dark(#efd3d9, #1e0f14);
--md-sys-color-surface-tint: light-dark(#b90063, #ffb1c8);
--md-sys-color-surface-variant: light-dark(#ffd9e2, #5a4047);
--md-sys-color-tertiary: light-dark(#006e17, #6cde6a);
--md-sys-color-tertiary-container: light-dark(#008a20, #008a20);
--md-sys-color-tertiary-dim: light-dark(#006013, #8bff85);
--md-sys-color-tertiary-fixed: light-dark(#88fc83, #88fc83);
--md-sys-color-tertiary-fixed-dim: light-dark(#6cde6a, #6cde6a);
--md-sys-color-tertiary-palette-key-color: light-dark(#008a20, #008a20);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fff8f8, #1e0f14);
--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(#ab9298, #745f64);
--md-sys-color-inverse-primary: light-dark(#e5227f, #ee2c86);
--md-sys-color-inverse-surface: light-dark(#3d2c31, #f8dbe2);
--md-sys-color-neutral-palette-key-color: light-dark(#887177, #887177);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#8d6f77, #8d6f77);
--md-sys-color-on-background: light-dark(#a28a90, #725d62);
--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, #58002c);
--md-sys-color-on-primary-container: light-dark(#e5237f, #f33189);
--md-sys-color-on-primary-fixed: light-dark(#980050, #ffadc6);
--md-sys-color-on-primary-fixed-variant: light-dark(#c8006b, #ff6ea4);
--md-sys-color-on-secondary: light-dark(#fffbff, #58002c);
--md-sys-color-on-secondary-container: light-dark(#c5527d, #d25c87);
--md-sys-color-on-secondary-fixed: light-dark(#8b234f, #ffadc6);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ac3e69, #f477a3);
--md-sys-color-on-surface: light-dark(#6f5a5f, #b69da2);
--md-sys-color-on-surface-variant: light-dark(#91737b, #9a7b83);
--md-sys-color-on-tertiary: light-dark(#f7fff0, #003206);
--md-sys-color-on-tertiary-container: light-dark(#0a8d23, #20982d);
--md-sys-color-on-tertiary-fixed: light-dark(#005911, #6adc68);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#00771a, #44b647);
--md-sys-color-outline: light-dark(#cca9b2, #684d54);
--md-sys-color-outline-variant: light-dark(#f5cfd9, #4c333a);
--md-sys-color-primary: light-dark(#de1a7a, #ff4896);
--md-sys-color-primary-container: light-dark(#ffcbd9, #77003d);
--md-sys-color-primary-dim: light-dark(#cb006d, #ff4a96);
--md-sys-color-primary-fixed: light-dark(#ffcbd9, #a10055);
--md-sys-color-primary-fixed-dim: light-dark(#ffa2bf, #77003d);
--md-sys-color-primary-palette-key-color: light-dark(#e11e7c, #e11e7c);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#be4d78, #e16894);
--md-sys-color-secondary-container: light-dark(#ffcbd9, #720d3d);
--md-sys-color-secondary-dim: light-dark(#ae406b, #e26994);
--md-sys-color-secondary-fixed: light-dark(#ffcbd9, #912854);
--md-sys-color-secondary-fixed-dim: light-dark(#ffa2bf, #720d3d);
--md-sys-color-secondary-palette-key-color: light-dark(#c24f7a, #c24f7a);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f8, #1e0f14);
--md-sys-color-surface-bright: light-dark(#fff8f8, #473439);
--md-sys-color-surface-container: light-dark(#ffe8ed, #2b1b20);
--md-sys-color-surface-container-high: light-dark(#fee1e7, #36252a);
--md-sys-color-surface-container-highest: light-dark(#f8dbe2, #423035);
--md-sys-color-surface-container-low: light-dark(#fff0f2, #27171c);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #180a0e);
--md-sys-color-surface-dim: light-dark(#efd3d9, #1e0f14);
--md-sys-color-surface-tint: light-dark(#b90063, #ffb1c8);
--md-sys-color-surface-variant: light-dark(#ffd9e2, #5a4047);
--md-sys-color-tertiary: light-dark(#00881f, #31a639);
--md-sys-color-tertiary-container: light-dark(#7ff27a, #00450b);
--md-sys-color-tertiary-dim: light-dark(#00791b, #32a63a);
--md-sys-color-tertiary-fixed: light-dark(#7ff27a, #005f13);
--md-sys-color-tertiary-fixed-dim: light-dark(#63d561, #00450b);
--md-sys-color-tertiary-palette-key-color: light-dark(#008a20, #008a20);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fff8f8, #1e0f14);
--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(#ffb1c8, #90004b);
--md-sys-color-inverse-surface: light-dark(#3d2c31, #f8dbe2);
--md-sys-color-neutral-palette-key-color: light-dark(#887177, #887177);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#8d6f77, #8d6f77);
--md-sys-color-on-background: light-dark(#27171c, #f8dbe2);
--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, #130006);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #2b0012);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #20000c);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #2b0012);
--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, #000f01);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #001601);
--md-sys-color-outline: light-dark(#3d262d, #ffebef);
--md-sys-color-outline-variant: light-dark(#5c4249, #ddb9c2);
--md-sys-color-primary: light-dark(#5d002e, #ffebef);
--md-sys-color-primary-container: light-dark(#92004d, #ffabc4);
--md-sys-color-primary-dim: light-dark(#450021, #ffecf0);
--md-sys-color-primary-fixed: light-dark(#92004d, #ffd9e2);
--md-sys-color-primary-fixed-dim: light-dark(#690035, #ffb1c8);
--md-sys-color-primary-palette-key-color: light-dark(#e11e7c, #e11e7c);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#5d002e, #ffebef);
--md-sys-color-secondary-container: light-dark(#87204c, #ffabc4);
--md-sys-color-secondary-dim: light-dark(#450021, #ffecf0);
--md-sys-color-secondary-fixed: light-dark(#87204c, #ffd9e2);
--md-sys-color-secondary-fixed-dim: light-dark(#680235, #ffb1c8);
--md-sys-color-secondary-palette-key-color: light-dark(#c24f7a, #c24f7a);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f8, #1e0f14);
--md-sys-color-surface-bright: light-dark(#fff8f8, #5f4b50);
--md-sys-color-surface-container: light-dark(#f8dbe2, #3d2c31);
--md-sys-color-surface-container-high: light-dark(#e9ced4, #49363b);
--md-sys-color-surface-container-highest: light-dark(#dbc0c6, #554247);
--md-sys-color-surface-container-low: light-dark(#ffecf0, #2b1b20);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#ccb2b8, #1e0f14);
--md-sys-color-surface-tint: light-dark(#b90063, #ffb1c8);
--md-sys-color-surface-variant: light-dark(#ffd9e2, #5a4047);
--md-sys-color-tertiary: light-dark(#003506, #c5ffbb);
--md-sys-color-tertiary-container: light-dark(#005610, #68da66);
--md-sys-color-tertiary-dim: light-dark(#002604, #c9ffbe);
--md-sys-color-tertiary-fixed: light-dark(#005610, #88fc83);
--md-sys-color-tertiary-fixed-dim: light-dark(#003c08, #6cde6a);
--md-sys-color-tertiary-palette-key-color: light-dark(#008a20, #008a20);
}