@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(#fff7fd, #161219);
--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(#f8edf8, #342e36);
--md-sys-color-inverse-primary: light-dark(#78d7c2, #006b5b);
--md-sys-color-inverse-surface: light-dark(#342e36, #eadfea);
--md-sys-color-neutral-palette-key-color: light-dark(#7c747e, #7c747e);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7e7382, #7e7382);
--md-sys-color-on-background: light-dark(#1f1a21, #eadfea);
--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, #00382f);
--md-sys-color-on-primary-container: light-dark(#005144, #94f4de);
--md-sys-color-on-primary-fixed: light-dark(#00201a, #00201a);
--md-sys-color-on-primary-fixed-variant: light-dark(#005144, #005144);
--md-sys-color-on-secondary: light-dark(#ffffff, #46263a);
--md-sys-color-on-secondary-container: light-dark(#5f3c51, #ffd8ec);
--md-sys-color-on-secondary-fixed: light-dark(#2e1125, #2e1125);
--md-sys-color-on-secondary-fixed-variant: light-dark(#5f3c51, #5f3c51);
--md-sys-color-on-surface: light-dark(#1f1a21, #eadfea);
--md-sys-color-on-surface-variant: light-dark(#4d4351, #d0c2d3);
--md-sys-color-on-tertiary: light-dark(#ffffff, #42244e);
--md-sys-color-on-tertiary-container: light-dark(#5a3b66, #f8d8ff);
--md-sys-color-on-tertiary-fixed: light-dark(#2b0e38, #2b0e38);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#5a3b66, #5a3b66);
--md-sys-color-outline: light-dark(#7e7383, #998d9d);
--md-sys-color-outline-variant: light-dark(#d0c2d3, #4d4351);
--md-sys-color-primary: light-dark(#006b5b, #78d7c2);
--md-sys-color-primary-container: light-dark(#94f4de, #005144);
--md-sys-color-primary-dim: light-dark(#005e50, #9dfde6);
--md-sys-color-primary-fixed: light-dark(#94f4de, #94f4de);
--md-sys-color-primary-fixed-dim: light-dark(#78d7c2, #78d7c2);
--md-sys-color-primary-palette-key-color: light-dark(#198673, #198673);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#795369, #e9b9d3);
--md-sys-color-secondary-container: light-dark(#ffd8ec, #5f3c51);
--md-sys-color-secondary-dim: light-dark(#6c475d, #fecce7);
--md-sys-color-secondary-fixed: light-dark(#ffd8ec, #ffd8ec);
--md-sys-color-secondary-fixed-dim: light-dark(#e9b9d3, #e9b9d3);
--md-sys-color-secondary-palette-key-color: light-dark(#946b82, #946b82);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff7fd, #161219);
--md-sys-color-surface-bright: light-dark(#fff7fd, #3d373f);
--md-sys-color-surface-container: light-dark(#f5ebf6, #231e25);
--md-sys-color-surface-container-high: light-dark(#f0e5f0, #2e2830);
--md-sys-color-surface-container-highest: light-dark(#eadfea, #39333b);
--md-sys-color-surface-container-low: light-dark(#fbf0fb, #1f1a21);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #110c14);
--md-sys-color-surface-dim: light-dark(#e1d7e2, #161219);
--md-sys-color-surface-tint: light-dark(#006b5b, #78d7c2);
--md-sys-color-surface-variant: light-dark(#ecdeef, #4d4351);
--md-sys-color-tertiary: light-dark(#73527f, #e1b9ed);
--md-sys-color-tertiary-container: light-dark(#f8d8ff, #5a3b66);
--md-sys-color-tertiary-dim: light-dark(#674673, #efc6fb);
--md-sys-color-tertiary-fixed: light-dark(#f8d8ff, #f8d8ff);
--md-sys-color-tertiary-fixed-dim: light-dark(#e1b9ed, #e1b9ed);
--md-sys-color-tertiary-palette-key-color: light-dark(#8d6a99, #8d6a99);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fff7fd, #161219);
--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(#9e959f, #69626b);
--md-sys-color-inverse-primary: light-dark(#1d8876, #28907d);
--md-sys-color-inverse-surface: light-dark(#342e36, #eadfea);
--md-sys-color-neutral-palette-key-color: light-dark(#7c747e, #7c747e);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7e7382, #7e7382);
--md-sys-color-on-background: light-dark(#968d97, #676069);
--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(#f4fffa, #003028);
--md-sys-color-on-primary-container: light-dark(#1e8976, #2d9380);
--md-sys-color-on-primary-fixed: light-dark(#005749, #75d5bf);
--md-sys-color-on-primary-fixed-variant: light-dark(#007463, #4fb09c);
--md-sys-color-on-secondary: light-dark(#fffbff, #3f1f33);
--md-sys-color-on-secondary-container: light-dark(#976e85, #a27890);
--md-sys-color-on-secondary-fixed: light-dark(#654157, #e6b7d0);
--md-sys-color-on-secondary-fixed-variant: light-dark(#825b71, #c093ac);
--md-sys-color-on-surface: light-dark(#645d66, #a9a0aa);
--md-sys-color-on-surface-variant: light-dark(#827786, #8b7f8f);
--md-sys-color-on-tertiary: light-dark(#fffbff, #3b1d47);
--md-sys-color-on-tertiary-container: light-dark(#906d9d, #9b77a7);
--md-sys-color-on-tertiary-fixed: light-dark(#60406c, #deb6ea);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#7c5a88, #b993c5);
--md-sys-color-outline: light-dark(#bbaebe, #5b515f);
--md-sys-color-outline-variant: light-dark(#e3d4e6, #403744);
--md-sys-color-primary: light-dark(#138371, #3da08d);
--md-sys-color-primary-container: light-dark(#8bead4, #004238);
--md-sys-color-primary-dim: light-dark(#007664, #3ea18d);
--md-sys-color-primary-fixed: light-dark(#8bead4, #005c4e);
--md-sys-color-primary-fixed-dim: light-dark(#6eceb9, #004238);
--md-sys-color-primary-palette-key-color: light-dark(#198673, #198673);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#916980, #af849c);
--md-sys-color-secondary-container: light-dark(#fccbe6, #512f44);
--md-sys-color-secondary-dim: light-dark(#835c73, #b0859d);
--md-sys-color-secondary-fixed: light-dark(#fccbe6, #6a465c);
--md-sys-color-secondary-fixed-dim: light-dark(#dfb0c9, #512f44);
--md-sys-color-secondary-palette-key-color: light-dark(#946b82, #946b82);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff7fd, #161219);
--md-sys-color-surface-bright: light-dark(#fff7fd, #3d373f);
--md-sys-color-surface-container: light-dark(#f5ebf6, #231e25);
--md-sys-color-surface-container-high: light-dark(#f0e5f0, #2e2830);
--md-sys-color-surface-container-highest: light-dark(#eadfea, #39333b);
--md-sys-color-surface-container-low: light-dark(#fbf0fb, #1f1a21);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #110c14);
--md-sys-color-surface-dim: light-dark(#e1d7e2, #161219);
--md-sys-color-surface-tint: light-dark(#006b5b, #78d7c2);
--md-sys-color-surface-variant: light-dark(#ecdeef, #4d4351);
--md-sys-color-tertiary: light-dark(#8b6897, #a884b5);
--md-sys-color-tertiary-container: light-dark(#f4cbff, #4c2e59);
--md-sys-color-tertiary-dim: light-dark(#7d5b8a, #a984b5);
--md-sys-color-tertiary-fixed: light-dark(#f4cbff, #654571);
--md-sys-color-tertiary-fixed-dim: light-dark(#d7afe3, #4c2e59);
--md-sys-color-tertiary-palette-key-color: light-dark(#8d6a99, #8d6a99);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fff7fd, #161219);
--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(#78d7c2, #005245);
--md-sys-color-inverse-surface: light-dark(#342e36, #eadfea);
--md-sys-color-neutral-palette-key-color: light-dark(#7c747e, #7c747e);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7e7382, #7e7382);
--md-sys-color-on-background: light-dark(#1f1a21, #eadfea);
--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, #000e0a);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #001510);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #1b0313);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #22071a);
--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, #190025);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #20032d);
--md-sys-color-outline: light-dark(#322936, #faebfd);
--md-sys-color-outline-variant: light-dark(#4f4654, #ccbecf);
--md-sys-color-primary: light-dark(#00332a, #b2ffec);
--md-sys-color-primary-container: light-dark(#005347, #74d3be);
--md-sys-color-primary-dim: light-dark(#00251e, #b7ffec);
--md-sys-color-primary-fixed: light-dark(#005347, #94f4de);
--md-sys-color-primary-fixed-dim: light-dark(#003a31, #78d7c2);
--md-sys-color-primary-palette-key-color: light-dark(#198673, #198673);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#412236, #ffebf3);
--md-sys-color-secondary-container: light-dark(#623e54, #e5b5cf);
--md-sys-color-secondary-dim: light-dark(#331529, #ffecf4);
--md-sys-color-secondary-fixed: light-dark(#623e54, #ffd8ec);
--md-sys-color-secondary-fixed-dim: light-dark(#49283c, #e9b9d3);
--md-sys-color-secondary-palette-key-color: light-dark(#946b82, #946b82);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff7fd, #161219);
--md-sys-color-surface-bright: light-dark(#fff7fd, #554e57);
--md-sys-color-surface-container: light-dark(#eadfea, #342e36);
--md-sys-color-surface-container-high: light-dark(#dbd1dc, #3f3942);
--md-sys-color-surface-container-highest: light-dark(#cdc3ce, #4b454d);
--md-sys-color-surface-container-low: light-dark(#f8edf8, #231e25);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#bfb6c0, #161219);
--md-sys-color-surface-tint: light-dark(#006b5b, #78d7c2);
--md-sys-color-surface-variant: light-dark(#ecdeef, #4d4351);
--md-sys-color-tertiary: light-dark(#3d204a, #fdeaff);
--md-sys-color-tertiary-container: light-dark(#5d3d69, #ddb5e9);
--md-sys-color-tertiary-dim: light-dark(#30133c, #feebff);
--md-sys-color-tertiary-fixed: light-dark(#5d3d69, #f8d8ff);
--md-sys-color-tertiary-fixed-dim: light-dark(#442751, #e1b9ed);
--md-sys-color-tertiary-palette-key-color: light-dark(#8d6a99, #8d6a99);
}