@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(#fcf8ff, #13131a);
--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(#f2effa, #303038);
--md-sys-color-inverse-primary: light-dark(#96d69a, #2f6a3a);
--md-sys-color-inverse-surface: light-dark(#303038, #e4e1ec);
--md-sys-color-neutral-palette-key-color: light-dark(#777680, #777680);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#767585, #767585);
--md-sys-color-on-background: light-dark(#1b1b23, #e4e1ec);
--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, #003913);
--md-sys-color-on-primary-container: light-dark(#135224, #b1f2b4);
--md-sys-color-on-primary-fixed: light-dark(#002108, #002108);
--md-sys-color-on-primary-fixed-variant: light-dark(#135224, #135224);
--md-sys-color-on-secondary: light-dark(#ffffff, #4a2531);
--md-sys-color-on-secondary-container: light-dark(#633b48, #ffd9e2);
--md-sys-color-on-secondary-fixed: light-dark(#31101c, #31101c);
--md-sys-color-on-secondary-fixed-variant: light-dark(#633b48, #633b48);
--md-sys-color-on-surface: light-dark(#1b1b23, #e4e1ec);
--md-sys-color-on-surface-variant: light-dark(#464554, #c7c5d6);
--md-sys-color-on-tertiary: light-dark(#ffffff, #2b2b59);
--md-sys-color-on-tertiary-container: light-dark(#414271, #e1dfff);
--md-sys-color-on-tertiary-fixed: light-dark(#151643, #151643);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#414271, #414271);
--md-sys-color-outline: light-dark(#777585, #908f9f);
--md-sys-color-outline-variant: light-dark(#c7c5d6, #464554);
--md-sys-color-primary: light-dark(#2f6a3a, #96d69a);
--md-sys-color-primary-container: light-dark(#b1f2b4, #135224);
--md-sys-color-primary-dim: light-dark(#215e2f, #bcfebf);
--md-sys-color-primary-fixed: light-dark(#b1f2b4, #b1f2b4);
--md-sys-color-primary-fixed-dim: light-dark(#96d69a, #96d69a);
--md-sys-color-primary-palette-key-color: light-dark(#488450, #488450);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#7e525f, #f0b8c7);
--md-sys-color-secondary-container: light-dark(#ffd9e2, #633b48);
--md-sys-color-secondary-dim: light-dark(#714653, #ffc5d5);
--md-sys-color-secondary-fixed: light-dark(#ffd9e2, #ffd9e2);
--md-sys-color-secondary-fixed-dim: light-dark(#f0b8c7, #f0b8c7);
--md-sys-color-secondary-palette-key-color: light-dark(#996a78, #996a78);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fcf8ff, #13131a);
--md-sys-color-surface-bright: light-dark(#fcf8ff, #393841);
--md-sys-color-surface-container: light-dark(#efecf7, #1f1f27);
--md-sys-color-surface-container-high: light-dark(#eae6f2, #2a2931);
--md-sys-color-surface-container-highest: light-dark(#e4e1ec, #34343c);
--md-sys-color-surface-container-low: light-dark(#f5f2fd, #1b1b23);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0d0d15);
--md-sys-color-surface-dim: light-dark(#dbd8e3, #13131a);
--md-sys-color-surface-tint: light-dark(#2f6a3a, #96d69a);
--md-sys-color-surface-variant: light-dark(#e3e0f2, #464554);
--md-sys-color-tertiary: light-dark(#595a8b, #c2c2f9);
--md-sys-color-tertiary-container: light-dark(#e1dfff, #414271);
--md-sys-color-tertiary-dim: light-dark(#4d4e7e, #c4c4fc);
--md-sys-color-tertiary-fixed: light-dark(#e1dfff, #e1dfff);
--md-sys-color-tertiary-fixed-dim: light-dark(#c2c2f9, #c2c2f9);
--md-sys-color-tertiary-palette-key-color: light-dark(#7172a5, #7172a5);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fcf8ff, #13131a);
--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(#9997a1, #64636d);
--md-sys-color-inverse-primary: light-dark(#4b8753, #518e59);
--md-sys-color-inverse-surface: light-dark(#303038, #e4e1ec);
--md-sys-color-neutral-palette-key-color: light-dark(#777680, #777680);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#767585, #767585);
--md-sys-color-on-background: light-dark(#918f99, #62616b);
--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(#f7fff2, #003210);
--md-sys-color-on-primary-container: light-dark(#4b8753, #55915c);
--md-sys-color-on-primary-fixed: light-dark(#1a5729, #93d398);
--md-sys-color-on-primary-fixed-variant: light-dark(#377341, #70ae76);
--md-sys-color-on-secondary: light-dark(#fffbff, #421e2b);
--md-sys-color-on-secondary-container: light-dark(#9c6d7b, #a87785);
--md-sys-color-on-secondary-fixed: light-dark(#69404d, #edb5c5);
--md-sys-color-on-secondary-fixed-variant: light-dark(#875a67, #c692a1);
--md-sys-color-on-surface: light-dark(#5f5e67, #a4a1ac);
--md-sys-color-on-surface-variant: light-dark(#7a7989, #838191);
--md-sys-color-on-tertiary: light-dark(#fffbff, #242552);
--md-sys-color-on-tertiary-container: light-dark(#7575a8, #7f7fb3);
--md-sys-color-on-tertiary-fixed: light-dark(#474877, #bfbff7);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#616293, #9b9bd1);
--md-sys-color-outline: light-dark(#b2b0c1, #535361);
--md-sys-color-outline-variant: light-dark(#d9d7e9, #393947);
--md-sys-color-primary: light-dark(#45814e, #619e68);
--md-sys-color-primary-container: light-dark(#a8e8ab, #004418);
--md-sys-color-primary-dim: light-dark(#387442, #629f68);
--md-sys-color-primary-fixed: light-dark(#a8e8ab, #205c2d);
--md-sys-color-primary-fixed-dim: light-dark(#8dcc91, #004418);
--md-sys-color-primary-palette-key-color: light-dark(#488450, #488450);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#966775, #b58391);
--md-sys-color-secondary-container: light-dark(#ffcbd9, #552e3b);
--md-sys-color-secondary-dim: light-dark(#885b69, #b68392);
--md-sys-color-secondary-fixed: light-dark(#ffcbd9, #6f4552);
--md-sys-color-secondary-fixed-dim: light-dark(#e5aebe, #552e3b);
--md-sys-color-secondary-palette-key-color: light-dark(#996a78, #996a78);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fcf8ff, #13131a);
--md-sys-color-surface-bright: light-dark(#fcf8ff, #393841);
--md-sys-color-surface-container: light-dark(#efecf7, #1f1f27);
--md-sys-color-surface-container-high: light-dark(#eae6f2, #2a2931);
--md-sys-color-surface-container-highest: light-dark(#e4e1ec, #34343c);
--md-sys-color-surface-container-low: light-dark(#f5f2fd, #1b1b23);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0d0d15);
--md-sys-color-surface-dim: light-dark(#dbd8e3, #13131a);
--md-sys-color-surface-tint: light-dark(#2f6a3a, #96d69a);
--md-sys-color-surface-variant: light-dark(#e3e0f2, #464554);
--md-sys-color-tertiary: light-dark(#6f70a2, #8c8cc0);
--md-sys-color-tertiary-container: light-dark(#d6d5ff, #343564);
--md-sys-color-tertiary-dim: light-dark(#626395, #8c8cc1);
--md-sys-color-tertiary-fixed: light-dark(#d6d5ff, #4b4c7c);
--md-sys-color-tertiary-fixed-dim: light-dark(#b8b8f0, #343564);
--md-sys-color-tertiary-palette-key-color: light-dark(#7172a5, #7172a5);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fcf8ff, #13131a);
--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(#96d69a, #155325);
--md-sys-color-inverse-surface: light-dark(#303038, #e4e1ec);
--md-sys-color-neutral-palette-key-color: light-dark(#777680, #777680);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#767585, #767585);
--md-sys-color-on-background: light-dark(#1b1b23, #e4e1ec);
--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, #000f02);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #001504);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #1d020c);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #240612);
--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, #040334);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #0a0939);
--md-sys-color-outline: light-dark(#2b2b38, #f1eeff);
--md-sys-color-outline-variant: light-dark(#484856, #c3c1d2);
--md-sys-color-primary: light-dark(#003411, #c2ffc4);
--md-sys-color-primary-container: light-dark(#165426, #92d296);
--md-sys-color-primary-dim: light-dark(#00260a, #c6ffc7);
--md-sys-color-primary-fixed: light-dark(#165426, #b1f2b4);
--md-sys-color-primary-fixed-dim: light-dark(#003c14, #96d69a);
--md-sys-color-primary-palette-key-color: light-dark(#488450, #488450);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#45212d, #ffebef);
--md-sys-color-secondary-container: light-dark(#663d4a, #ebb4c3);
--md-sys-color-secondary-dim: light-dark(#361420, #ffecf0);
--md-sys-color-secondary-fixed: light-dark(#663d4a, #ffd9e2);
--md-sys-color-secondary-fixed-dim: light-dark(#4c2734, #f0b8c7);
--md-sys-color-secondary-palette-key-color: light-dark(#996a78, #996a78);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fcf8ff, #13131a);
--md-sys-color-surface-bright: light-dark(#fcf8ff, #504f58);
--md-sys-color-surface-container: light-dark(#e4e1ec, #303038);
--md-sys-color-surface-container-high: light-dark(#d6d3de, #3b3a43);
--md-sys-color-surface-container-highest: light-dark(#c8c5d0, #47464f);
--md-sys-color-surface-container-low: light-dark(#f2effa, #1f1f27);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#bab7c2, #13131a);
--md-sys-color-surface-tint: light-dark(#2f6a3a, #96d69a);
--md-sys-color-surface-variant: light-dark(#e3e0f2, #464554);
--md-sys-color-tertiary: light-dark(#262755, #f1eeff);
--md-sys-color-tertiary-container: light-dark(#444574, #bebef5);
--md-sys-color-tertiary-dim: light-dark(#191a47, #f2efff);
--md-sys-color-tertiary-fixed: light-dark(#444574, #e1dfff);
--md-sys-color-tertiary-fixed-dim: light-dark(#2d2e5c, #c2c2f9);
--md-sys-color-tertiary-palette-key-color: light-dark(#7172a5, #7172a5);
}