@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(#fff8f8, #1d1014);
--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(#ffecef, #3c2c30);
--md-sys-color-inverse-primary: light-dark(#ffb1c8, #b90062);
--md-sys-color-inverse-surface: light-dark(#3c2c30, #f6dce2);
--md-sys-color-neutral-palette-key-color: light-dark(#867277, #867277);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#897177, #897177);
--md-sys-color-on-background: light-dark(#25181c, #f6dce2);
--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, #650033);
--md-sys-color-on-primary-container: light-dark(#8e004a, #ffd9e2);
--md-sys-color-on-primary-fixed: light-dark(#3e001d, #3e001d);
--md-sys-color-on-primary-fixed-variant: light-dark(#8e004a, #8e004a);
--md-sys-color-on-secondary: light-dark(#ffffff, #4c2525);
--md-sys-color-on-secondary-container: light-dark(#663b3b, #ffdad9);
--md-sys-color-on-secondary-fixed: light-dark(#331112, #331112);
--md-sys-color-on-secondary-fixed-variant: light-dark(#663b3b, #663b3b);
--md-sys-color-on-surface: light-dark(#25181c, #f6dce2);
--md-sys-color-on-surface-variant: light-dark(#564147, #dcbfc6);
--md-sys-color-on-tertiary: light-dark(#ffffff, #532212);
--md-sys-color-on-tertiary-container: light-dark(#6e3726, #ffdbd0);
--md-sys-color-on-tertiary-fixed: light-dark(#370d02, #370d02);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#6e3726, #6e3726);
--md-sys-color-outline: light-dark(#897177, #a48a90);
--md-sys-color-outline-variant: light-dark(#dcbfc6, #564147);
--md-sys-color-primary: light-dark(#b90062, #ffb1c8);
--md-sys-color-primary-container: light-dark(#ffd9e2, #8e004a);
--md-sys-color-primary-dim: light-dark(#a30056, #ff4a95);
--md-sys-color-primary-fixed: light-dark(#ffd9e2, #ffd9e2);
--md-sys-color-primary-fixed-dim: light-dark(#ffb1c8, #ffb1c8);
--md-sys-color-primary-palette-key-color: light-dark(#fe0089, #fe0089);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#815251, #f5b7b6);
--md-sys-color-secondary-container: light-dark(#ffdad9, #663b3b);
--md-sys-color-secondary-dim: light-dark(#744646, #febfbe);
--md-sys-color-secondary-fixed: light-dark(#ffdad9, #ffdad9);
--md-sys-color-secondary-fixed-dim: light-dark(#f5b7b6, #f5b7b6);
--md-sys-color-secondary-palette-key-color: light-dark(#9d6a69, #9d6a69);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f8, #1d1014);
--md-sys-color-surface-bright: light-dark(#fff8f8, #453539);
--md-sys-color-surface-container: light-dark(#ffe8ed, #2a1c20);
--md-sys-color-surface-container-high: light-dark(#fce2e7, #35262a);
--md-sys-color-surface-container-highest: light-dark(#f6dce2, #403135);
--md-sys-color-surface-container-low: light-dark(#fff0f2, #25181c);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #170b0e);
--md-sys-color-surface-dim: light-dark(#edd4d9, #1d1014);
--md-sys-color-surface-tint: light-dark(#b90062, #ffb1c8);
--md-sys-color-surface-variant: light-dark(#f9dbe2, #564147);
--md-sys-color-tertiary: light-dark(#8b4e3b, #ffb59f);
--md-sys-color-tertiary-container: light-dark(#ffdbd0, #6e3726);
--md-sys-color-tertiary-dim: light-dark(#7c4331, #fdae96);
--md-sys-color-tertiary-fixed: light-dark(#ffdbd0, #ffdbd0);
--md-sys-color-tertiary-fixed-dim: light-dark(#ffb59f, #ffb59f);
--md-sys-color-tertiary-palette-key-color: light-dark(#a86652, #a86652);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fff8f8, #1d1014);
--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(#a99398, #735f64);
--md-sys-color-inverse-primary: light-dark(#ec007e, #f80085);
--md-sys-color-inverse-surface: light-dark(#3c2c30, #f6dce2);
--md-sys-color-neutral-palette-key-color: light-dark(#867277, #867277);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#897177, #897177);
--md-sys-color-on-background: light-dark(#a08b90, #705d62);
--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(#fffbff, #58002c);
--md-sys-color-on-primary-container: light-dark(#ec007f, #ff0089);
--md-sys-color-on-primary-fixed: light-dark(#98004f, #ffadc5);
--md-sys-color-on-primary-fixed-variant: light-dark(#c8006a, #ff6ea4);
--md-sys-color-on-secondary: light-dark(#fffbff, #441e1f);
--md-sys-color-on-secondary-container: light-dark(#a06c6c, #ac7676);
--md-sys-color-on-secondary-fixed: light-dark(#6c4040, #f2b5b4);
--md-sys-color-on-secondary-fixed-variant: light-dark(#8a5959, #cb9291);
--md-sys-color-on-surface: light-dark(#6d5a5f, #b49da2);
--md-sys-color-on-surface-variant: light-dark(#8d747a, #967d83);
--md-sys-color-on-tertiary: light-dark(#fffbff, #4a1b0c);
--md-sys-color-on-tertiary-container: light-dark(#ab6954, #b7735e);
--md-sys-color-on-tertiary-fixed: light-dark(#753c2b, #ffb19a);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#945643, #d78e78);
--md-sys-color-outline: light-dark(#c7abb1, #644e54);
--md-sys-color-outline-variant: light-dark(#efd2d8, #48353a);
--md-sys-color-primary: light-dark(#e20079, #ff4895);
--md-sys-color-primary-container: light-dark(#ffcbd9, #77003d);
--md-sys-color-primary-dim: light-dark(#cb006c, #ff4a95);
--md-sys-color-primary-fixed: light-dark(#ffcbd9, #a10054);
--md-sys-color-primary-fixed-dim: light-dark(#ffa2bf, #77003d);
--md-sys-color-primary-palette-key-color: light-dark(#fe0089, #fe0089);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#9a6767, #ba8382);
--md-sys-color-secondary-container: light-dark(#ffcdcc, #572e2f);
--md-sys-color-secondary-dim: light-dark(#8c5b5b, #ba8382);
--md-sys-color-secondary-fixed: light-dark(#ffcdcc, #724545);
--md-sys-color-secondary-fixed-dim: light-dark(#eaaead, #572e2f);
--md-sys-color-secondary-palette-key-color: light-dark(#9d6a69, #9d6a69);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f8, #1d1014);
--md-sys-color-surface-bright: light-dark(#fff8f8, #453539);
--md-sys-color-surface-container: light-dark(#ffe8ed, #2a1c20);
--md-sys-color-surface-container-high: light-dark(#fce2e7, #35262a);
--md-sys-color-surface-container-highest: light-dark(#f6dce2, #403135);
--md-sys-color-surface-container-low: light-dark(#fff0f2, #25181c);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #170b0e);
--md-sys-color-surface-dim: light-dark(#edd4d9, #1d1014);
--md-sys-color-surface-tint: light-dark(#b90062, #ffb1c8);
--md-sys-color-surface-variant: light-dark(#f9dbe2, #564147);
--md-sys-color-tertiary: light-dark(#a56450, #c67f69);
--md-sys-color-tertiary-container: light-dark(#ffcec0, #5f2b1b);
--md-sys-color-tertiary-dim: light-dark(#965744, #c67f6a);
--md-sys-color-tertiary-fixed: light-dark(#ffcec0, #7b412f);
--md-sys-color-tertiary-fixed-dim: light-dark(#f8aa93, #5f2b1b);
--md-sys-color-tertiary-palette-key-color: light-dark(#a86652, #a86652);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fff8f8, #1d1014);
--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(#ffb1c8, #90004b);
--md-sys-color-inverse-surface: light-dark(#3c2c30, #f6dce2);
--md-sys-color-neutral-palette-key-color: light-dark(#867277, #867277);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#897177, #897177);
--md-sys-color-on-background: light-dark(#25181c, #f6dce2);
--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, #20000c);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #2b0012);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #1e0304);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #250708);
--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, #1e0300);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #280500);
--md-sys-color-outline: light-dark(#39272c, #ffebef);
--md-sys-color-outline-variant: light-dark(#584449, #d8bbc2);
--md-sys-color-primary: light-dark(#5d002e, #ffebef);
--md-sys-color-primary-container: light-dark(#92004c, #ffabc4);
--md-sys-color-primary-dim: light-dark(#460021, #ffecef);
--md-sys-color-primary-fixed: light-dark(#92004c, #ffd9e2);
--md-sys-color-primary-fixed-dim: light-dark(#690035, #ffb1c8);
--md-sys-color-primary-palette-key-color: light-dark(#fe0089, #fe0089);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#472121, #ffeceb);
--md-sys-color-secondary-container: light-dark(#693d3d, #f0b3b3);
--md-sys-color-secondary-dim: light-dark(#371415, #ffedec);
--md-sys-color-secondary-fixed: light-dark(#693d3d, #ffdad9);
--md-sys-color-secondary-fixed-dim: light-dark(#4f2728, #f5b7b6);
--md-sys-color-secondary-palette-key-color: light-dark(#9d6a69, #9d6a69);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f8, #1d1014);
--md-sys-color-surface-bright: light-dark(#fff8f8, #5d4b50);
--md-sys-color-surface-container: light-dark(#f6dce2, #3c2c30);
--md-sys-color-surface-container-high: light-dark(#e7ced4, #47373b);
--md-sys-color-surface-container-highest: light-dark(#d9c0c6, #534247);
--md-sys-color-surface-container-low: light-dark(#ffecef, #2a1c20);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#cab3b8, #1d1014);
--md-sys-color-surface-tint: light-dark(#b90062, #ffb1c8);
--md-sys-color-surface-variant: light-dark(#f9dbe2, #564147);
--md-sys-color-tertiary: light-dark(#4d1e0e, #ffece7);
--md-sys-color-tertiary-container: light-dark(#713a28, #feaf98);
--md-sys-color-tertiary-dim: light-dark(#3d1104, #ffede8);
--md-sys-color-tertiary-fixed: light-dark(#713a28, #ffdbd0);
--md-sys-color-tertiary-fixed-dim: light-dark(#552414, #ffb59f);
--md-sys-color-tertiary-palette-key-color: light-dark(#a86652, #a86652);
}