@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(#f8fafa, #111414);
--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(#eff1f1, #2e3131);
--md-sys-color-inverse-primary: light-dark(#93d0db, #266771);
--md-sys-color-inverse-surface: light-dark(#2e3131, #e1e3e3);
--md-sys-color-neutral-palette-key-color: light-dark(#747778, #747778);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#70797b, #70797b);
--md-sys-color-on-background: light-dark(#191c1d, #e1e3e3);
--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, #00363d);
--md-sys-color-on-primary-container: light-dark(#f7feff, #000708);
--md-sys-color-on-primary-fixed: light-dark(#001f24, #001f24);
--md-sys-color-on-primary-fixed-variant: light-dark(#004f58, #004f58);
--md-sys-color-on-secondary: light-dark(#ffffff, #1e3437);
--md-sys-color-on-secondary-container: light-dark(#50666a, #a5bdc1);
--md-sys-color-on-secondary-fixed: light-dark(#071f22, #071f22);
--md-sys-color-on-secondary-fixed-variant: light-dark(#354a4e, #354a4e);
--md-sys-color-on-surface: light-dark(#191c1d, #e1e3e3);
--md-sys-color-on-surface-variant: light-dark(#3f484a, #bfc8ca);
--md-sys-color-on-tertiary: light-dark(#ffffff, #3d274f);
--md-sys-color-on-tertiary-container: light-dark(#fffbff, #0c001b);
--md-sys-color-on-tertiary-fixed: light-dark(#271138, #271138);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#553d67, #553d67);
--md-sys-color-outline: light-dark(#70797a, #899294);
--md-sys-color-outline-variant: light-dark(#bfc8ca, #3f484a);
--md-sys-color-primary: light-dark(#22646e, #93d0db);
--md-sys-color-primary-container: light-dark(#3f7d87, #5d9aa4);
--md-sys-color-primary-dim: light-dark(#155b64, #b4f3fe);
--md-sys-color-primary-fixed: light-dark(#afedf8, #afedf8);
--md-sys-color-primary-fixed-dim: light-dark(#93d0db, #93d0db);
--md-sys-color-primary-palette-key-color: light-dark(#42808a, #42808a);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#4c6266, #b3cbcf);
--md-sys-color-secondary-container: light-dark(#cce4e9, #374d51);
--md-sys-color-secondary-dim: light-dark(#40565a, #cfe7eb);
--md-sys-color-secondary-fixed: light-dark(#cfe7eb, #cfe7eb);
--md-sys-color-secondary-fixed-dim: light-dark(#b3cbcf, #b3cbcf);
--md-sys-color-secondary-palette-key-color: light-dark(#647b7f, #647b7f);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f8fafa, #111414);
--md-sys-color-surface-bright: light-dark(#f8fafa, #373a3a);
--md-sys-color-surface-container: light-dark(#eceeee, #1d2021);
--md-sys-color-surface-container-high: light-dark(#e7e8e9, #272a2b);
--md-sys-color-surface-container-highest: light-dark(#e1e3e3, #323536);
--md-sys-color-surface-container-low: light-dark(#f2f4f4, #191c1d);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0c0f0f);
--md-sys-color-surface-dim: light-dark(#d8dadb, #111414);
--md-sys-color-surface-tint: light-dark(#266771, #93d0db);
--md-sys-color-surface-variant: light-dark(#dbe4e6, #3f484a);
--md-sys-color-tertiary: light-dark(#6b527d, #d9bbed);
--md-sys-color-tertiary-container: light-dark(#846b97, #a286b5);
--md-sys-color-tertiary-dim: light-dark(#614973, #ebccff);
--md-sys-color-tertiary-fixed: light-dark(#f2daff, #f2daff);
--md-sys-color-tertiary-fixed-dim: light-dark(#d9bbed, #d9bbed);
--md-sys-color-tertiary-palette-key-color: light-dark(#876d9a, #876d9a);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#f8fafa, #111414);
--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(#969999, #626565);
--md-sys-color-inverse-primary: light-dark(#45838d, #4c8a94);
--md-sys-color-inverse-surface: light-dark(#2e3131, #e1e3e3);
--md-sys-color-neutral-palette-key-color: light-dark(#747778, #747778);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#70797b, #70797b);
--md-sys-color-on-background: light-dark(#8e9091, #606363);
--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(#f7feff, #002f35);
--md-sys-color-on-primary-container: light-dark(#45838d, #508d97);
--md-sys-color-on-primary-fixed: light-dark(#08545e, #90ced9);
--md-sys-color-on-primary-fixed-variant: light-dark(#2f6f79, #6daab4);
--md-sys-color-on-secondary: light-dark(#f7feff, #172d31);
--md-sys-color-on-secondary-container: light-dark(#677e82, #71888c);
--md-sys-color-on-secondary-fixed: light-dark(#3a5054, #b1c8cd);
--md-sys-color-on-secondary-fixed-variant: light-dark(#546a6e, #8da4a9);
--md-sys-color-on-surface: light-dark(#5d5f60, #a1a3a4);
--md-sys-color-on-surface-variant: light-dark(#737c7e, #7c8586);
--md-sys-color-on-tertiary: light-dark(#fffbff, #362048);
--md-sys-color-on-tertiary-container: light-dark(#8a709d, #957aa8);
--md-sys-color-on-tertiary-fixed: light-dark(#5a436c, #d7b9eb);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#765c88, #b296c5);
--md-sys-color-outline: light-dark(#aab4b5, #4d5657);
--md-sys-color-outline-variant: light-dark(#d1dadc, #333c3d);
--md-sys-color-primary: light-dark(#3f7d87, #5d9aa4);
--md-sys-color-primary-container: light-dark(#a5e3ee, #004149);
--md-sys-color-primary-dim: light-dark(#31717a, #5d9aa5);
--md-sys-color-primary-fixed: light-dark(#a5e3ee, #125963);
--md-sys-color-primary-fixed-dim: light-dark(#8ac7d2, #004149);
--md-sys-color-primary-palette-key-color: light-dark(#42808a, #42808a);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#62787d, #7e9599);
--md-sys-color-secondary-container: light-dark(#c5dde2, #283e41);
--md-sys-color-secondary-dim: light-dark(#556c70, #7e9599);
--md-sys-color-secondary-fixed: light-dark(#c5dde2, #3f5559);
--md-sys-color-secondary-fixed-dim: light-dark(#aac1c6, #283e41);
--md-sys-color-secondary-palette-key-color: light-dark(#647b7f, #647b7f);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f8fafa, #111414);
--md-sys-color-surface-bright: light-dark(#f8fafa, #373a3a);
--md-sys-color-surface-container: light-dark(#eceeee, #1d2021);
--md-sys-color-surface-container-high: light-dark(#e7e8e9, #272a2b);
--md-sys-color-surface-container-highest: light-dark(#e1e3e3, #323536);
--md-sys-color-surface-container-low: light-dark(#f2f4f4, #191c1d);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0c0f0f);
--md-sys-color-surface-dim: light-dark(#d8dadb, #111414);
--md-sys-color-surface-tint: light-dark(#266771, #93d0db);
--md-sys-color-surface-variant: light-dark(#dbe4e6, #3f484a);
--md-sys-color-tertiary: light-dark(#846b97, #a286b5);
--md-sys-color-tertiary-container: light-dark(#ecceff, #473059);
--md-sys-color-tertiary-dim: light-dark(#775e8a, #a287b5);
--md-sys-color-tertiary-fixed: light-dark(#ecceff, #5f4772);
--md-sys-color-tertiary-fixed-dim: light-dark(#d0b2e4, #473059);
--md-sys-color-tertiary-palette-key-color: light-dark(#876d9a, #876d9a);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#f8fafa, #111414);
--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(#93d0db, #005059);
--md-sys-color-inverse-surface: light-dark(#2e3131, #e1e3e3);
--md-sys-color-neutral-palette-key-color: light-dark(#747778, #747778);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#70797b, #70797b);
--md-sys-color-on-background: light-dark(#191c1d, #e1e3e3);
--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, #000708);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #001417);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #000e10);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #001417);
--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, #0c001b);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #1c062d);
--md-sys-color-outline: light-dark(#252e2f, #e9f2f3);
--md-sys-color-outline-variant: light-dark(#424b4c, #bbc4c6);
--md-sys-color-primary: light-dark(#003138, #cef7ff);
--md-sys-color-primary-container: light-dark(#02515b, #8fcdd7);
--md-sys-color-primary-dim: light-dark(#002429, #d0f8ff);
--md-sys-color-primary-fixed: light-dark(#02515b, #afedf8);
--md-sys-color-primary-fixed-dim: light-dark(#003940, #93d0db);
--md-sys-color-primary-palette-key-color: light-dark(#42808a, #42808a);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#1a2f33, #dcf4f9);
--md-sys-color-secondary-container: light-dark(#374d51, #afc7cb);
--md-sys-color-secondary-dim: light-dark(#0c2326, #ddf5fa);
--md-sys-color-secondary-fixed: light-dark(#374d51, #cfe7eb);
--md-sys-color-secondary-fixed-dim: light-dark(#20363a, #b3cbcf);
--md-sys-color-secondary-palette-key-color: light-dark(#647b7f, #647b7f);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f8fafa, #111414);
--md-sys-color-surface-bright: light-dark(#f8fafa, #4e5151);
--md-sys-color-surface-container: light-dark(#e1e3e3, #2e3131);
--md-sys-color-surface-container-high: light-dark(#d3d5d5, #393c3c);
--md-sys-color-surface-container-highest: light-dark(#c5c7c7, #444748);
--md-sys-color-surface-container-low: light-dark(#eff1f1, #1d2021);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#b7b9b9, #111414);
--md-sys-color-surface-tint: light-dark(#266771, #93d0db);
--md-sys-color-surface-variant: light-dark(#dbe4e6, #3f484a);
--md-sys-color-tertiary: light-dark(#39224a, #faebff);
--md-sys-color-tertiary-container: light-dark(#574069, #d5b8e9);
--md-sys-color-tertiary-dim: light-dark(#2b153d, #fbecff);
--md-sys-color-tertiary-fixed: light-dark(#574069, #f2daff);
--md-sys-color-tertiary-fixed-dim: light-dark(#3f2951, #d9bbed);
--md-sys-color-tertiary-palette-key-color: light-dark(#876d9a, #876d9a);
}