@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(#f6fafb, #0f1415);
--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(#edf1f2, #2c3132);
--md-sys-color-inverse-primary: light-dark(#75d4e5, #006875);
--md-sys-color-inverse-surface: light-dark(#2c3132, #dfe3e4);
--md-sys-color-neutral-palette-key-color: light-dark(#737879, #737879);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#6e797b, #6e797b);
--md-sys-color-on-background: light-dark(#181c1d, #dfe3e4);
--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(#ffffff, #ffffff);
--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, #12353b);
--md-sys-color-on-secondary-container: light-dark(#486a70, #98bbc2);
--md-sys-color-on-secondary-fixed: light-dark(#001f24, #001f24);
--md-sys-color-on-secondary-fixed-variant: light-dark(#2a4c52, #2a4c52);
--md-sys-color-on-surface: light-dark(#181c1d, #dfe3e4);
--md-sys-color-on-surface-variant: light-dark(#3e494b, #bdc9cb);
--md-sys-color-on-tertiary: light-dark(#ffffff, #43205b);
--md-sys-color-on-tertiary-container: light-dark(#ffffff, #ffffff);
--md-sys-color-on-tertiary-fixed: light-dark(#2d0745, #2d0745);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#5b3773, #5b3773);
--md-sys-color-outline: light-dark(#6e797b, #879395);
--md-sys-color-outline-variant: light-dark(#bdc9cb, #3e494b);
--md-sys-color-primary: light-dark(#006874, #75d4e5);
--md-sys-color-primary-container: light-dark(#008392, #008392);
--md-sys-color-primary-dim: light-dark(#005b66, #83e3f3);
--md-sys-color-primary-fixed: light-dark(#9af0ff, #9af0ff);
--md-sys-color-primary-fixed-dim: light-dark(#75d4e5, #75d4e5);
--md-sys-color-primary-palette-key-color: light-dark(#008392, #008392);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#42646a, #aacdd3);
--md-sys-color-secondary-container: light-dark(#c5e9f0, #2a4c52);
--md-sys-color-secondary-dim: light-dark(#36585d, #c5e9f0);
--md-sys-color-secondary-fixed: light-dark(#c5e9f0, #c5e9f0);
--md-sys-color-secondary-fixed-dim: light-dark(#aacdd3, #aacdd3);
--md-sys-color-secondary-palette-key-color: light-dark(#5b7d83, #5b7d83);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f6fafb, #0f1415);
--md-sys-color-surface-bright: light-dark(#f6fafb, #353a3b);
--md-sys-color-surface-container: light-dark(#ebeeef, #1c2021);
--md-sys-color-surface-container-high: light-dark(#e5e9ea, #262b2c);
--md-sys-color-surface-container-highest: light-dark(#dfe3e4, #313636);
--md-sys-color-surface-container-low: light-dark(#f0f4f5, #181c1d);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0a0f10);
--md-sys-color-surface-dim: light-dark(#d7dbdc, #0f1415);
--md-sys-color-surface-tint: light-dark(#006875, #75d4e5);
--md-sys-color-surface-variant: light-dark(#d9e5e7, #3e494b);
--md-sys-color-tertiary: light-dark(#744e8c, #e2b6fc);
--md-sys-color-tertiary-container: light-dark(#8e67a7, #8e67a7);
--md-sys-color-tertiary-dim: light-dark(#684380, #dfb3f9);
--md-sys-color-tertiary-fixed: light-dark(#f3daff, #f3daff);
--md-sys-color-tertiary-fixed-dim: light-dark(#e2b6fc, #e2b6fc);
--md-sys-color-tertiary-palette-key-color: light-dark(#8e67a7, #8e67a7);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#f6fafb, #0f1415);
--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(#94999a, #606566);
--md-sys-color-inverse-primary: light-dark(#0b8695, #1d8d9c);
--md-sys-color-inverse-surface: light-dark(#2c3132, #dfe3e4);
--md-sys-color-neutral-palette-key-color: light-dark(#737879, #737879);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#6e797b, #6e797b);
--md-sys-color-on-background: light-dark(#8c9192, #5e6364);
--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(#0c8695, #2391a0);
--md-sys-color-on-primary-fixed: light-dark(#00545f, #72d2e2);
--md-sys-color-on-primary-fixed-variant: light-dark(#00717e, #4aadbd);
--md-sys-color-on-secondary: light-dark(#f7feff, #092e34);
--md-sys-color-on-secondary-container: light-dark(#5e7f86, #688a90);
--md-sys-color-on-secondary-fixed: light-dark(#305157, #a7cad1);
--md-sys-color-on-secondary-fixed-variant: light-dark(#4a6c72, #84a6ac);
--md-sys-color-on-surface: light-dark(#5b6061, #9fa4a4);
--md-sys-color-on-surface-variant: light-dark(#717d7f, #7a8587);
--md-sys-color-on-tertiary: light-dark(#fffbff, #3c1954);
--md-sys-color-on-tertiary-container: light-dark(#926aab, #9c74b6);
--md-sys-color-on-tertiary-fixed: light-dark(#613d79, #dfb4fa);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#7d5796, #ba90d3);
--md-sys-color-outline: light-dark(#a9b4b6, #4b5658);
--md-sys-color-outline-variant: light-dark(#cfdbdd, #313c3e);
--md-sys-color-primary: light-dark(#00818f, #369ead);
--md-sys-color-primary-container: light-dark(#88e7f8, #004149);
--md-sys-color-primary-dim: light-dark(#007380, #379ead);
--md-sys-color-primary-fixed: light-dark(#88e7f8, #005a64);
--md-sys-color-primary-fixed-dim: light-dark(#6bcbdb, #004149);
--md-sys-color-primary-palette-key-color: light-dark(#008392, #008392);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#597a80, #74969d);
--md-sys-color-secondary-container: light-dark(#bcdfe6, #1d3f45);
--md-sys-color-secondary-dim: light-dark(#4c6d73, #75979d);
--md-sys-color-secondary-fixed: light-dark(#bcdfe6, #35565c);
--md-sys-color-secondary-fixed-dim: light-dark(#a0c3ca, #1d3f45);
--md-sys-color-secondary-palette-key-color: light-dark(#5b7d83, #5b7d83);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f6fafb, #0f1415);
--md-sys-color-surface-bright: light-dark(#f6fafb, #353a3b);
--md-sys-color-surface-container: light-dark(#ebeeef, #1c2021);
--md-sys-color-surface-container-high: light-dark(#e5e9ea, #262b2c);
--md-sys-color-surface-container-highest: light-dark(#dfe3e4, #313636);
--md-sys-color-surface-container-low: light-dark(#f0f4f5, #181c1d);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0a0f10);
--md-sys-color-surface-dim: light-dark(#d7dbdc, #0f1415);
--md-sys-color-surface-tint: light-dark(#006875, #75d4e5);
--md-sys-color-surface-variant: light-dark(#d9e5e7, #3e494b);
--md-sys-color-tertiary: light-dark(#8c65a5, #aa81c3);
--md-sys-color-tertiary-container: light-dark(#eecdff, #4e2a66);
--md-sys-color-tertiary-dim: light-dark(#7e5897, #aa81c3);
--md-sys-color-tertiary-fixed: light-dark(#eecdff, #66427f);
--md-sys-color-tertiary-fixed-dim: light-dark(#d8adf2, #4e2a66);
--md-sys-color-tertiary-palette-key-color: light-dark(#8e67a7, #8e67a7);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#f6fafb, #0f1415);
--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(#75d4e5, #00505a);
--md-sys-color-inverse-surface: light-dark(#2c3132, #dfe3e4);
--md-sys-color-neutral-palette-key-color: light-dark(#737879, #737879);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#6e797b, #6e797b);
--md-sys-color-on-background: light-dark(#181c1d, #dfe3e4);
--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, #000e10);
--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, #170029);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #200035);
--md-sys-color-outline: light-dark(#232e30, #e7f2f4);
--md-sys-color-outline-variant: light-dark(#404b4d, #b9c5c7);
--md-sys-color-primary: light-dark(#003138, #cef7ff);
--md-sys-color-primary-container: light-dark(#00515b, #70d0e1);
--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, #75d4e5);
--md-sys-color-primary-palette-key-color: light-dark(#008392, #008392);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#0c3136, #d3f6fd);
--md-sys-color-secondary-container: light-dark(#2d4e54, #a6c9cf);
--md-sys-color-secondary-dim: light-dark(#002429, #d3f7fe);
--md-sys-color-secondary-fixed: light-dark(#2d4e54, #c5e9f0);
--md-sys-color-secondary-fixed-dim: light-dark(#14373d, #aacdd3);
--md-sys-color-secondary-palette-key-color: light-dark(#5b7d83, #5b7d83);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f6fafb, #0f1415);
--md-sys-color-surface-bright: light-dark(#f6fafb, #4c5152);
--md-sys-color-surface-container: light-dark(#dfe3e4, #2c3132);
--md-sys-color-surface-container-high: light-dark(#d1d5d6, #373c3d);
--md-sys-color-surface-container-highest: light-dark(#c3c7c8, #434848);
--md-sys-color-surface-container-low: light-dark(#edf1f2, #1c2021);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#b5b9ba, #0f1415);
--md-sys-color-surface-tint: light-dark(#006875, #75d4e5);
--md-sys-color-surface-variant: light-dark(#d9e5e7, #3e494b);
--md-sys-color-tertiary: light-dark(#3f1b57, #fbebff);
--md-sys-color-tertiary-container: light-dark(#5e3a76, #deb2f8);
--md-sys-color-tertiary-dim: light-dark(#310c49, #fbecff);
--md-sys-color-tertiary-fixed: light-dark(#5e3a76, #f3daff);
--md-sys-color-tertiary-fixed-dim: light-dark(#46225e, #e2b6fc);
--md-sys-color-tertiary-palette-key-color: light-dark(#8e67a7, #8e67a7);
}