@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, #322b4d);
--md-sys-color-on-tertiary-container: light-dark(#9d93bc, #9d93bc);
--md-sys-color-on-tertiary-fixed: light-dark(#1d1637, #1d1637);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#494265, #494265);
--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(#1e1738, #cbc1eb);
--md-sys-color-tertiary-container: light-dark(#332c4e, #332c4e);
--md-sys-color-tertiary-dim: light-dark(#554d72, #dcd1fd);
--md-sys-color-tertiary-fixed: light-dark(#e7deff, #e7deff);
--md-sys-color-tertiary-fixed-dim: light-dark(#cbc1eb, #cbc1eb);
--md-sys-color-tertiary-palette-key-color: light-dark(#332c4e, #332c4e);
}
: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, #2c2546);
--md-sys-color-on-tertiary-container: light-dark(#7d759b, #877fa6);
--md-sys-color-on-tertiary-fixed: light-dark(#4f476b, #c8bee9);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#696187, #a49bc3);
--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(#786f96, #948bb3);
--md-sys-color-tertiary-container: light-dark(#ded3ff, #3c3558);
--md-sys-color-tertiary-dim: light-dark(#6b6388, #958cb4);
--md-sys-color-tertiary-fixed: light-dark(#ded3ff, #544c70);
--md-sys-color-tertiary-fixed-dim: light-dark(#c1b7e2, #3c3558);
--md-sys-color-tertiary-palette-key-color: light-dark(#332c4e, #332c4e);
}
: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(#f1eaff, #0d0526);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #130b2c);
--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(#1e1738, #f4edff);
--md-sys-color-tertiary-container: light-dark(#332c4e, #c7bde7);
--md-sys-color-tertiary-dim: light-dark(#211a3b, #f5eeff);
--md-sys-color-tertiary-fixed: light-dark(#4c4468, #e7deff);
--md-sys-color-tertiary-fixed-dim: light-dark(#352e50, #cbc1eb);
--md-sys-color-tertiary-palette-key-color: light-dark(#332c4e, #332c4e);
}