@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(#f9faf7, #111413);
--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(#f0f1ef, #2e3130);
--md-sys-color-inverse-primary: light-dark(#9fd1c2, #38675b);
--md-sys-color-inverse-surface: light-dark(#2e3130, #e2e3e1);
--md-sys-color-neutral-palette-key-color: light-dark(#757775, #757775);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#707975, #707975);
--md-sys-color-on-background: light-dark(#1a1c1b, #e2e3e1);
--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, #00382e);
--md-sys-color-on-primary-container: light-dark(#72a295, #72a295);
--md-sys-color-on-primary-fixed: light-dark(#00201a, #00201a);
--md-sys-color-on-primary-fixed-variant: light-dark(#1e4f44, #1e4f44);
--md-sys-color-on-secondary: light-dark(#ffffff, #23342f);
--md-sys-color-on-secondary-container: light-dark(#566862, #a9bdb6);
--md-sys-color-on-secondary-fixed: light-dark(#0d1f1a, #0d1f1a);
--md-sys-color-on-secondary-fixed-variant: light-dark(#394a45, #394a45);
--md-sys-color-on-surface: light-dark(#1a1c1b, #e2e3e1);
--md-sys-color-on-surface-variant: light-dark(#404946, #c0c8c4);
--md-sys-color-on-tertiary: light-dark(#ffffff, #4e251d);
--md-sys-color-on-tertiary-container: light-dark(#c68a7e, #c68a7e);
--md-sys-color-on-tertiary-fixed: light-dark(#34100a, #34100a);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#683a31, #683a31);
--md-sys-color-outline: light-dark(#707975, #8a938f);
--md-sys-color-outline-variant: light-dark(#c0c8c4, #404946);
--md-sys-color-primary: light-dark(#00211a, #9fd1c2);
--md-sys-color-primary-container: light-dark(#00382e, #00382e);
--md-sys-color-primary-dim: light-dark(#2b5b4f, #c3f6e6);
--md-sys-color-primary-fixed: light-dark(#baedde, #baedde);
--md-sys-color-primary-fixed-dim: light-dark(#9fd1c2, #9fd1c2);
--md-sys-color-primary-palette-key-color: light-dark(#518074, #518074);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#50625c, #b7cbc4);
--md-sys-color-secondary-container: light-dark(#d3e7df, #3b4d47);
--md-sys-color-secondary-dim: light-dark(#445651, #d3e7df);
--md-sys-color-secondary-fixed: light-dark(#d3e7df, #d3e7df);
--md-sys-color-secondary-fixed-dim: light-dark(#b7cbc4, #b7cbc4);
--md-sys-color-secondary-palette-key-color: light-dark(#687b75, #687b75);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f9faf7, #111413);
--md-sys-color-surface-bright: light-dark(#f9faf7, #373a38);
--md-sys-color-surface-container: light-dark(#edeeec, #1e201f);
--md-sys-color-surface-container-high: light-dark(#e7e8e6, #282a29);
--md-sys-color-surface-container-highest: light-dark(#e2e3e1, #333534);
--md-sys-color-surface-container-low: light-dark(#f3f4f2, #1a1c1b);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0c0f0e);
--md-sys-color-surface-dim: light-dark(#d9dad8, #111413);
--md-sys-color-surface-tint: light-dark(#38675b, #9fd1c2);
--md-sys-color-surface-variant: light-dark(#dce4e0, #404946);
--md-sys-color-tertiary: light-dark(#34110a, #f8b7aa);
--md-sys-color-tertiary-container: light-dark(#4e251d, #4e251d);
--md-sys-color-tertiary-dim: light-dark(#76463c, #fbb9ad);
--md-sys-color-tertiary-fixed: light-dark(#ffdad3, #ffdad3);
--md-sys-color-tertiary-fixed-dim: light-dark(#f8b7aa, #f8b7aa);
--md-sys-color-tertiary-palette-key-color: light-dark(#4e251d, #4e251d);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#f9faf7, #111413);
--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(#979997, #636563);
--md-sys-color-inverse-primary: light-dark(#538376, #5a8a7d);
--md-sys-color-inverse-surface: light-dark(#2e3130, #e2e3e1);
--md-sys-color-neutral-palette-key-color: light-dark(#757775, #757775);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#707975, #707975);
--md-sys-color-on-background: light-dark(#8f908f, #606361);
--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, #003027);
--md-sys-color-on-primary-container: light-dark(#548376, #5e8d80);
--md-sys-color-on-primary-fixed: light-dark(#245449, #9dcec0);
--md-sys-color-on-primary-fixed-variant: light-dark(#406f63, #79aa9c);
--md-sys-color-on-secondary: light-dark(#f4fffa, #1c2d28);
--md-sys-color-on-secondary-container: light-dark(#6b7e78, #758882);
--md-sys-color-on-secondary-fixed: light-dark(#3e504a, #b5c8c1);
--md-sys-color-on-secondary-fixed-variant: light-dark(#586a64, #91a49e);
--md-sys-color-on-surface: light-dark(#5d605e, #a2a3a1);
--md-sys-color-on-surface-variant: light-dark(#747d79, #7c8581);
--md-sys-color-on-tertiary: light-dark(#fffbff, #451e17);
--md-sys-color-on-tertiary-container: light-dark(#a36c61, #af766b);
--md-sys-color-on-tertiary-fixed: light-dark(#6f4036, #f6b4a8);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#8d594f, #ce9185);
--md-sys-color-outline: light-dark(#abb4b0, #4d5653);
--md-sys-color-outline-variant: light-dark(#d2dbd7, #343c39);
--md-sys-color-primary: light-dark(#4e7d71, #6a9a8d);
--md-sys-color-primary-container: light-dark(#b1e3d4, #0e4237);
--md-sys-color-primary-dim: light-dark(#417164, #6b9a8d);
--md-sys-color-primary-fixed: light-dark(#b1e3d4, #2a594e);
--md-sys-color-primary-fixed-dim: light-dark(#96c7b9, #0e4237);
--md-sys-color-primary-palette-key-color: light-dark(#518074, #518074);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#667872, #82958e);
--md-sys-color-secondary-container: light-dark(#c9ddd6, #2c3e38);
--md-sys-color-secondary-dim: light-dark(#596c66, #82958f);
--md-sys-color-secondary-fixed: light-dark(#c9ddd6, #43554f);
--md-sys-color-secondary-fixed-dim: light-dark(#aec1ba, #2c3e38);
--md-sys-color-secondary-palette-key-color: light-dark(#687b75, #687b75);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f9faf7, #111413);
--md-sys-color-surface-bright: light-dark(#f9faf7, #373a38);
--md-sys-color-surface-container: light-dark(#edeeec, #1e201f);
--md-sys-color-surface-container-high: light-dark(#e7e8e6, #282a29);
--md-sys-color-surface-container-highest: light-dark(#e2e3e1, #333534);
--md-sys-color-surface-container-low: light-dark(#f3f4f2, #1a1c1b);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0c0f0e);
--md-sys-color-surface-dim: light-dark(#d9dad8, #111413);
--md-sys-color-surface-tint: light-dark(#38675b, #9fd1c2);
--md-sys-color-surface-variant: light-dark(#dce4e0, #404946);
--md-sys-color-tertiary: light-dark(#9d675c, #bd8277);
--md-sys-color-tertiary-container: light-dark(#ffcec4, #592e26);
--md-sys-color-tertiary-dim: light-dark(#8f5a50, #bd8377);
--md-sys-color-tertiary-fixed: light-dark(#ffcec4, #74443b);
--md-sys-color-tertiary-fixed-dim: light-dark(#eeaea1, #592e26);
--md-sys-color-tertiary-palette-key-color: light-dark(#4e251d, #4e251d);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#f9faf7, #111413);
--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(#9fd1c2, #1f5045);
--md-sys-color-inverse-surface: light-dark(#2e3130, #e2e3e1);
--md-sys-color-neutral-palette-key-color: light-dark(#757775, #757775);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#707975, #707975);
--md-sys-color-on-background: light-dark(#1a1c1b, #e2e3e1);
--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(#c4f7e8, #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, #000e0a);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #041410);
--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(#ffe8e3, #1e0301);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #260703);
--md-sys-color-outline: light-dark(#262e2b, #e9f2ed);
--md-sys-color-outline-variant: light-dark(#434b48, #bcc5c0);
--md-sys-color-primary: light-dark(#00211a, #c8fbeb);
--md-sys-color-primary-container: light-dark(#00382e, #9bcdbe);
--md-sys-color-primary-dim: light-dark(#00251d, #c8fbec);
--md-sys-color-primary-fixed: light-dark(#215146, #baedde);
--md-sys-color-primary-fixed-dim: light-dark(#033a30, #9fd1c2);
--md-sys-color-primary-palette-key-color: light-dark(#518074, #518074);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#1e2f2b, #e0f4ed);
--md-sys-color-secondary-container: light-dark(#3b4d47, #b3c7c0);
--md-sys-color-secondary-dim: light-dark(#11231e, #e1f5ee);
--md-sys-color-secondary-fixed: light-dark(#3b4d47, #d3e7df);
--md-sys-color-secondary-fixed-dim: light-dark(#253631, #b7cbc4);
--md-sys-color-secondary-palette-key-color: light-dark(#687b75, #687b75);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f9faf7, #111413);
--md-sys-color-surface-bright: light-dark(#f9faf7, #4e514f);
--md-sys-color-surface-container: light-dark(#e2e3e1, #2e3130);
--md-sys-color-surface-container-high: light-dark(#d3d5d3, #393c3b);
--md-sys-color-surface-container-highest: light-dark(#c5c7c5, #454746);
--md-sys-color-surface-container-low: light-dark(#f0f1ef, #1e201f);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#b8b9b7, #111413);
--md-sys-color-surface-tint: light-dark(#38675b, #9fd1c2);
--md-sys-color-surface-variant: light-dark(#dce4e0, #404946);
--md-sys-color-tertiary: light-dark(#34110a, #ffece8);
--md-sys-color-tertiary-container: light-dark(#4e251d, #f4b3a6);
--md-sys-color-tertiary-dim: light-dark(#39140d, #ffede9);
--md-sys-color-tertiary-fixed: light-dark(#6b3d33, #ffdad3);
--md-sys-color-tertiary-fixed-dim: light-dark(#50271f, #f8b7aa);
--md-sys-color-tertiary-palette-key-color: light-dark(#4e251d, #4e251d);
}