@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(#ddb8ff, #744b9d);
--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(#8f6f77, #8f6f77);
--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, #431a6b);
--md-sys-color-on-primary-container: light-dark(#5b3383, #f0dbff);
--md-sys-color-on-primary-fixed: light-dark(#2c0051, #2c0051);
--md-sys-color-on-primary-fixed-variant: light-dark(#5b3383, #5b3383);
--md-sys-color-on-secondary: light-dark(#ffffff, #3e2459);
--md-sys-color-on-secondary-container: light-dark(#563b71, #f0dbff);
--md-sys-color-on-secondary-fixed: light-dark(#280d42, #280d42);
--md-sys-color-on-secondary-fixed-variant: light-dark(#563b71, #563b71);
--md-sys-color-on-surface: light-dark(#25181c, #f6dce2);
--md-sys-color-on-surface-variant: light-dark(#5b3f47, #e3bdc6);
--md-sys-color-on-tertiary: light-dark(#ffffff, #541d32);
--md-sys-color-on-tertiary-container: light-dark(#703348, #ffd9e2);
--md-sys-color-on-tertiary-fixed: light-dark(#3a071d, #3a071d);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#703348, #703348);
--md-sys-color-outline: light-dark(#8e6f77, #aa8891);
--md-sys-color-outline-variant: light-dark(#e3bdc6, #5b3f47);
--md-sys-color-primary: light-dark(#744b9d, #ddb8ff);
--md-sys-color-primary-container: light-dark(#f0dbff, #5b3383);
--md-sys-color-primary-dim: light-dark(#673f90, #cda0f9);
--md-sys-color-primary-fixed: light-dark(#f0dbff, #f0dbff);
--md-sys-color-primary-fixed-dim: light-dark(#ddb8ff, #ddb8ff);
--md-sys-color-primary-palette-key-color: light-dark(#8e64b8, #8e64b8);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#6e528a, #dbb9f9);
--md-sys-color-secondary-container: light-dark(#f0dbff, #563b71);
--md-sys-color-secondary-dim: light-dark(#62467d, #debcfc);
--md-sys-color-secondary-fixed: light-dark(#f0dbff, #f0dbff);
--md-sys-color-secondary-fixed-dim: light-dark(#dbb9f9, #dbb9f9);
--md-sys-color-secondary-palette-key-color: light-dark(#886ba5, #886ba5);
--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(#744b9d, #ddb8ff);
--md-sys-color-surface-variant: light-dark(#ffd9e2, #5b3f47);
--md-sys-color-tertiary: light-dark(#8c4a60, #ffb1c8);
--md-sys-color-tertiary-container: light-dark(#ffd9e2, #703348);
--md-sys-color-tertiary-dim: light-dark(#7e3e54, #ffacc5);
--md-sys-color-tertiary-fixed: light-dark(#ffd9e2, #ffd9e2);
--md-sys-color-tertiary-fixed-dim: light-dark(#ffb1c8, #ffb1c8);
--md-sys-color-tertiary-palette-key-color: light-dark(#a86278, #a86278);
}
: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(#9167bb, #986ec2);
--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(#8f6f77, #8f6f77);
--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, #3c1164);
--md-sys-color-on-primary-container: light-dark(#9167bb, #9c72c6);
--md-sys-color-on-primary-fixed: light-dark(#613989, #dbb4ff);
--md-sys-color-on-primary-fixed-variant: light-dark(#7d54a6, #b98de4);
--md-sys-color-on-secondary: light-dark(#fffbff, #371d51);
--md-sys-color-on-secondary-container: light-dark(#8b6ea8, #9678b3);
--md-sys-color-on-secondary-fixed: light-dark(#5b4077, #d8b7f6);
--md-sys-color-on-secondary-fixed-variant: light-dark(#775a93, #b393d0);
--md-sys-color-on-surface: light-dark(#6d5a5f, #b49da2);
--md-sys-color-on-surface-variant: light-dark(#92727b, #9b7a83);
--md-sys-color-on-tertiary: light-dark(#fffbff, #4c162b);
--md-sys-color-on-tertiary-container: light-dark(#ac647b, #b76e85);
--md-sys-color-on-tertiary-fixed: light-dark(#76384e, #ffadc5);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#955168, #d78aa1);
--md-sys-color-outline: light-dark(#cda9b2, #694c54);
--md-sys-color-outline-variant: light-dark(#f6cfd8, #4d333a);
--md-sys-color-primary: light-dark(#8b62b5, #a97ed4);
--md-sys-color-primary-container: light-dark(#e9cfff, #4e2575);
--md-sys-color-primary-dim: light-dark(#7e55a7, #a97ed4);
--md-sys-color-primary-fixed: light-dark(#e9cfff, #663e8e);
--md-sys-color-primary-fixed-dim: light-dark(#d6acff, #4e2575);
--md-sys-color-primary-palette-key-color: light-dark(#8e64b8, #8e64b8);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#8668a2, #a384c0);
--md-sys-color-secondary-container: light-dark(#e9cfff, #482e63);
--md-sys-color-secondary-dim: light-dark(#785c94, #a385c0);
--md-sys-color-secondary-fixed: light-dark(#e9cfff, #60457c);
--md-sys-color-secondary-fixed-dim: light-dark(#d1b0ef, #482e63);
--md-sys-color-secondary-palette-key-color: light-dark(#886ba5, #886ba5);
--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(#744b9d, #ddb8ff);
--md-sys-color-surface-variant: light-dark(#ffd9e2, #5b3f47);
--md-sys-color-tertiary: light-dark(#a65f76, #c67b92);
--md-sys-color-tertiary-container: light-dark(#ffcbd9, #60263b);
--md-sys-color-tertiary-dim: light-dark(#975369, #c67b92);
--md-sys-color-tertiary-fixed: light-dark(#ffcbd9, #7c3d52);
--md-sys-color-tertiary-fixed-dim: light-dark(#f8a6be, #60263b);
--md-sys-color-tertiary-palette-key-color: light-dark(#a86278, #a86278);
}
: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(#ddb8ff, #5c3484);
--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(#8f6f77, #8f6f77);
--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, #15002c);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #1d0039);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #15002c);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #1d0137);
--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, #20000c);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #2b0012);
--md-sys-color-outline: light-dark(#3d252c, #ffebef);
--md-sys-color-outline-variant: light-dark(#5d4249, #dfb9c2);
--md-sys-color-primary: light-dark(#3f1466, #f9ebff);
--md-sys-color-primary-container: light-dark(#5e3686, #dab3ff);
--md-sys-color-primary-dim: light-dark(#310159, #f9ecff);
--md-sys-color-primary-fixed: light-dark(#5e3686, #f0dbff);
--md-sys-color-primary-fixed-dim: light-dark(#461d6d, #ddb8ff);
--md-sys-color-primary-palette-key-color: light-dark(#8e64b8, #8e64b8);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#3a1f54, #f9ebff);
--md-sys-color-secondary-container: light-dark(#583d73, #d7b5f5);
--md-sys-color-secondary-dim: light-dark(#2c1146, #f9ecff);
--md-sys-color-secondary-fixed: light-dark(#583d73, #f0dbff);
--md-sys-color-secondary-fixed-dim: light-dark(#40265b, #dbb9f9);
--md-sys-color-secondary-palette-key-color: light-dark(#886ba5, #886ba5);
--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(#744b9d, #ddb8ff);
--md-sys-color-surface-variant: light-dark(#ffd9e2, #5b3f47);
--md-sys-color-tertiary: light-dark(#4f182d, #ffebef);
--md-sys-color-tertiary-container: light-dark(#73354b, #feabc4);
--md-sys-color-tertiary-dim: light-dark(#3f0b21, #ffecef);
--md-sys-color-tertiary-fixed: light-dark(#73354b, #ffd9e2);
--md-sys-color-tertiary-fixed-dim: light-dark(#571f34, #ffb1c8);
--md-sys-color-tertiary-palette-key-color: light-dark(#a86278, #a86278);
}