@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(#f3fbfc, #0d1516);
--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(#ebf2f3, #2a3233);
--md-sys-color-inverse-primary: light-dark(#01daf2, #006875);
--md-sys-color-inverse-surface: light-dark(#2a3233, #dce4e5);
--md-sys-color-neutral-palette-key-color: light-dark(#71787a, #71787a);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#6b7a7d, #6b7a7d);
--md-sys-color-on-background: light-dark(#161d1e, #dce4e5);
--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(#005b66, #005b66);
--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, #00363d);
--md-sys-color-on-secondary-container: light-dark(#366c75, #8cc1cb);
--md-sys-color-on-secondary-fixed: light-dark(#001f24, #001f24);
--md-sys-color-on-secondary-fixed-variant: light-dark(#124e56, #124e56);
--md-sys-color-on-surface: light-dark(#161d1e, #dce4e5);
--md-sys-color-on-surface-variant: light-dark(#3b494c, #bac9cc);
--md-sys-color-on-tertiary: light-dark(#ffffff, #3f225e);
--md-sys-color-on-tertiary-container: light-dark(#634583, #634583);
--md-sys-color-on-tertiary-fixed: light-dark(#290947, #290947);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#573976, #573976);
--md-sys-color-outline: light-dark(#6b7a7c, #859396);
--md-sys-color-outline-variant: light-dark(#bac9cc, #3b494c);
--md-sys-color-primary: light-dark(#006875, #99f0ff);
--md-sys-color-primary-container: light-dark(#00daf2, #00daf2);
--md-sys-color-primary-dim: light-dark(#005b66, #2ce6fe);
--md-sys-color-primary-fixed: light-dark(#9af0ff, #9af0ff);
--md-sys-color-primary-fixed-dim: light-dark(#01daf2, #01daf2);
--md-sys-color-primary-palette-key-color: light-dark(#00daf2, #00daf2);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#30666f, #9acfd9);
--md-sys-color-secondary-container: light-dark(#b5ecf6, #155059);
--md-sys-color-secondary-dim: light-dark(#225a62, #b5ecf6);
--md-sys-color-secondary-fixed: light-dark(#b5ecf6, #b5ecf6);
--md-sys-color-secondary-fixed-dim: light-dark(#9acfd9, #9acfd9);
--md-sys-color-secondary-palette-key-color: light-dark(#4a7f88, #4a7f88);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f3fbfc, #0d1516);
--md-sys-color-surface-bright: light-dark(#f3fbfc, #333a3c);
--md-sys-color-surface-container: light-dark(#e8eff1, #1a2122);
--md-sys-color-surface-container-high: light-dark(#e2e9eb, #242b2d);
--md-sys-color-surface-container-highest: light-dark(#dce4e5, #2f3637);
--md-sys-color-surface-container-low: light-dark(#eef5f6, #161d1e);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #080f11);
--md-sys-color-surface-dim: light-dark(#d4dbdd, #0d1516);
--md-sys-color-surface-tint: light-dark(#006875, #01daf2);
--md-sys-color-surface-variant: light-dark(#d6e5e8, #3b494c);
--md-sys-color-tertiary: light-dark(#6f518f, #f0dbff);
--md-sys-color-tertiary-container: light-dark(#dcb8ff, #dcb8ff);
--md-sys-color-tertiary-dim: light-dark(#634583, #dcb8ff);
--md-sys-color-tertiary-fixed: light-dark(#efdbff, #efdbff);
--md-sys-color-tertiary-fixed-dim: light-dark(#dcb8ff, #dcb8ff);
--md-sys-color-tertiary-palette-key-color: light-dark(#dcb8ff, #dcb8ff);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#f3fbfc, #0d1516);
--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(#92999b, #5e6667);
--md-sys-color-inverse-primary: light-dark(#008696, #008e9e);
--md-sys-color-inverse-surface: light-dark(#2a3233, #dce4e5);
--md-sys-color-neutral-palette-key-color: light-dark(#71787a, #71787a);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#6b7a7d, #6b7a7d);
--md-sys-color-on-background: light-dark(#8a9193, #5c6465);
--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(#008696, #0092a2);
--md-sys-color-on-primary-fixed: light-dark(#00545f, #00d7ef);
--md-sys-color-on-primary-fixed-variant: light-dark(#00717e, #00b0c4);
--md-sys-color-on-secondary: light-dark(#f7feff, #002f35);
--md-sys-color-on-secondary-container: light-dark(#4d828b, #588c96);
--md-sys-color-on-secondary-fixed: light-dark(#1a535c, #97cdd7);
--md-sys-color-on-secondary-fixed-variant: light-dark(#396e77, #74a9b2);
--md-sys-color-on-surface: light-dark(#596062, #9da4a6);
--md-sys-color-on-surface-variant: light-dark(#6f7d80, #778689);
--md-sys-color-on-tertiary: light-dark(#fffbff, #381a56);
--md-sys-color-on-tertiary-container: light-dark(#8c6cad, #9776b8);
--md-sys-color-on-tertiary-fixed: light-dark(#5c3e7c, #d9b5fc);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#785998, #b492d6);
--md-sys-color-outline: light-dark(#a6b5b8, #485659);
--md-sys-color-outline-variant: light-dark(#cddcdf, #2f3c3f);
--md-sys-color-primary: light-dark(#00818f, #009fb1);
--md-sys-color-primary-container: light-dark(#68eaff, #004149);
--md-sys-color-primary-dim: light-dark(#007380, #00a0b2);
--md-sys-color-primary-fixed: light-dark(#68eaff, #005a64);
--md-sys-color-primary-fixed-dim: light-dark(#00d0e7, #004149);
--md-sys-color-primary-palette-key-color: light-dark(#00daf2, #00daf2);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#487c86, #6499a2);
--md-sys-color-secondary-container: light-dark(#ace2ec, #004149);
--md-sys-color-secondary-dim: light-dark(#3a7079, #6599a3);
--md-sys-color-secondary-fixed: light-dark(#ace2ec, #205861);
--md-sys-color-secondary-fixed-dim: light-dark(#91c6d0, #004149);
--md-sys-color-secondary-palette-key-color: light-dark(#4a7f88, #4a7f88);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f3fbfc, #0d1516);
--md-sys-color-surface-bright: light-dark(#f3fbfc, #333a3c);
--md-sys-color-surface-container: light-dark(#e8eff1, #1a2122);
--md-sys-color-surface-container-high: light-dark(#e2e9eb, #242b2d);
--md-sys-color-surface-container-highest: light-dark(#dce4e5, #2f3637);
--md-sys-color-surface-container-low: light-dark(#eef5f6, #161d1e);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #080f11);
--md-sys-color-surface-dim: light-dark(#d4dbdd, #0d1516);
--md-sys-color-surface-tint: light-dark(#006875, #01daf2);
--md-sys-color-surface-variant: light-dark(#d6e5e8, #3b494c);
--md-sys-color-tertiary: light-dark(#8767a7, #a483c6);
--md-sys-color-tertiary-container: light-dark(#e9cfff, #492c68);
--md-sys-color-tertiary-dim: light-dark(#795a9a, #a483c6);
--md-sys-color-tertiary-fixed: light-dark(#e9cfff, #614381);
--md-sys-color-tertiary-fixed-dim: light-dark(#d2aff5, #492c68);
--md-sys-color-tertiary-palette-key-color: light-dark(#dcb8ff, #dcb8ff);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#f3fbfc, #0d1516);
--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(#01daf2, #00505a);
--md-sys-color-inverse-surface: light-dark(#2a3233, #dce4e5);
--md-sys-color-neutral-palette-key-color: light-dark(#71787a, #71787a);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#6b7a7d, #6b7a7d);
--md-sys-color-on-background: light-dark(#161d1e, #dce4e5);
--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, #001417);
--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, #1d003a);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #1d003a);
--md-sys-color-outline: light-dark(#212e31, #e4f3f6);
--md-sys-color-outline-variant: light-dark(#3e4c4e, #b6c5c8);
--md-sys-color-primary: light-dark(#003138, #cef7ff);
--md-sys-color-primary-container: light-dark(#00515b, #00daf2);
--md-sys-color-primary-dim: light-dark(#002429, #d1f8ff);
--md-sys-color-primary-fixed: light-dark(#00515b, #9af0ff);
--md-sys-color-primary-fixed-dim: light-dark(#003940, #01daf2);
--md-sys-color-primary-palette-key-color: light-dark(#00daf2, #00daf2);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#003138, #cef7ff);
--md-sys-color-secondary-container: light-dark(#165059, #96cbd5);
--md-sys-color-secondary-dim: light-dark(#002429, #d1f8ff);
--md-sys-color-secondary-fixed: light-dark(#165059, #b5ecf6);
--md-sys-color-secondary-fixed-dim: light-dark(#003940, #9acfd9);
--md-sys-color-secondary-palette-key-color: light-dark(#4a7f88, #4a7f88);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f3fbfc, #0d1516);
--md-sys-color-surface-bright: light-dark(#f3fbfc, #4a5153);
--md-sys-color-surface-container: light-dark(#dce4e5, #2a3233);
--md-sys-color-surface-container-high: light-dark(#ced6d7, #353d3e);
--md-sys-color-surface-container-highest: light-dark(#c0c8c9, #414849);
--md-sys-color-surface-container-low: light-dark(#ebf2f3, #1a2122);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#b3babc, #0d1516);
--md-sys-color-surface-tint: light-dark(#006875, #01daf2);
--md-sys-color-surface-variant: light-dark(#d6e5e8, #3b494c);
--md-sys-color-tertiary: light-dark(#3b1d59, #f9ebff);
--md-sys-color-tertiary-container: light-dark(#593b79, #dcb8ff);
--md-sys-color-tertiary-dim: light-dark(#2d0e4b, #f9ecff);
--md-sys-color-tertiary-fixed: light-dark(#593b79, #efdbff);
--md-sys-color-tertiary-fixed-dim: light-dark(#422460, #dcb8ff);
--md-sys-color-tertiary-palette-key-color: light-dark(#dcb8ff, #dcb8ff);
}