@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(#f6faff, #0c141b);
--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(#e9f2fb, #293138);
--md-sys-color-inverse-primary: light-dark(#87ceff, #006590);
--md-sys-color-inverse-surface: light-dark(#293138, #dbe4ed);
--md-sys-color-neutral-palette-key-color: light-dark(#6f7880, #6f7880);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#6d7983, #6d7983);
--md-sys-color-on-background: light-dark(#141d23, #dbe4ed);
--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, #00344d);
--md-sys-color-on-primary-container: light-dark(#004c6d, #c8e6ff);
--md-sys-color-on-primary-fixed: light-dark(#001e2e, #001e2e);
--md-sys-color-on-primary-fixed-variant: light-dark(#004c6d, #004c6d);
--md-sys-color-on-secondary: light-dark(#ffffff, #1d314b);
--md-sys-color-on-secondary-container: light-dark(#344863, #d4e3ff);
--md-sys-color-on-secondary-fixed: light-dark(#051c35, #051c35);
--md-sys-color-on-secondary-fixed-variant: light-dark(#344863, #344863);
--md-sys-color-on-surface: light-dark(#141d23, #dbe4ed);
--md-sys-color-on-surface-variant: light-dark(#3d4851, #bcc8d3);
--md-sys-color-on-tertiary: light-dark(#ffffff, #212e5a);
--md-sys-color-on-tertiary-container: light-dark(#384472, #dce1ff);
--md-sys-color-on-tertiary-fixed: light-dark(#0a1844, #0a1844);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#384472, #384472);
--md-sys-color-outline: light-dark(#6d7983, #86929d);
--md-sys-color-outline-variant: light-dark(#bcc8d3, #3d4851);
--md-sys-color-primary: light-dark(#006590, #87ceff);
--md-sys-color-primary-container: light-dark(#c8e6ff, #004c6d);
--md-sys-color-primary-dim: light-dark(#00587e, #0eb6ff);
--md-sys-color-primary-fixed: light-dark(#c8e6ff, #c8e6ff);
--md-sys-color-primary-fixed-dim: light-dark(#87ceff, #87ceff);
--md-sys-color-primary-palette-key-color: light-dark(#0fb6ff, #0fb6ff);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#4c5f7c, #b3c8e9);
--md-sys-color-secondary-container: light-dark(#d4e3ff, #344863);
--md-sys-color-secondary-dim: light-dark(#40536f, #c7dbfd);
--md-sys-color-secondary-fixed: light-dark(#d4e3ff, #d4e3ff);
--md-sys-color-secondary-fixed-dim: light-dark(#b3c8e9, #b3c8e9);
--md-sys-color-secondary-palette-key-color: light-dark(#647896, #647896);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f6faff, #0c141b);
--md-sys-color-surface-bright: light-dark(#f6faff, #313a41);
--md-sys-color-surface-container: light-dark(#e6eff8, #182127);
--md-sys-color-surface-container-high: light-dark(#e0e9f2, #222b32);
--md-sys-color-surface-container-highest: light-dark(#dbe4ed, #2d363d);
--md-sys-color-surface-container-low: light-dark(#ecf5fe, #141d23);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #070f15);
--md-sys-color-surface-dim: light-dark(#d2dbe4, #0c141b);
--md-sys-color-surface-tint: light-dark(#006590, #87ceff);
--md-sys-color-surface-variant: light-dark(#d8e4ef, #3d4851);
--md-sys-color-tertiary: light-dark(#505c8b, #b8c4fa);
--md-sys-color-tertiary-container: light-dark(#dce1ff, #384472);
--md-sys-color-tertiary-dim: light-dark(#44507e, #bbc7fd);
--md-sys-color-tertiary-fixed: light-dark(#dce1ff, #dce1ff);
--md-sys-color-tertiary-fixed-dim: light-dark(#b8c4fa, #b8c4fa);
--md-sys-color-tertiary-palette-key-color: light-dark(#6975a5, #6975a5);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#f6faff, #0c141b);
--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(#9099a2, #5d656d);
--md-sys-color-inverse-primary: light-dark(#0082b8, #0089c2);
--md-sys-color-inverse-surface: light-dark(#293138, #dbe4ed);
--md-sys-color-neutral-palette-key-color: light-dark(#6f7880, #6f7880);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#6d7983, #6d7983);
--md-sys-color-on-background: light-dark(#88919a, #5a636b);
--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(#fcfcff, #002d43);
--md-sys-color-on-primary-container: light-dark(#0082b8, #008dc7);
--md-sys-color-on-primary-fixed: light-dark(#005175, #81ccff);
--md-sys-color-on-primary-fixed-variant: light-dark(#006d9b, #00aaf0);
--md-sys-color-on-secondary: light-dark(#fdfcff, #162a44);
--md-sys-color-on-secondary-container: light-dark(#677b99, #7185a4);
--md-sys-color-on-secondary-fixed: light-dark(#3a4d69, #b1c5e6);
--md-sys-color-on-secondary-fixed-variant: light-dark(#546784, #8da1c1);
--md-sys-color-on-surface: light-dark(#576068, #9ba4ac);
--md-sys-color-on-surface-variant: light-dark(#707c86, #79858f);
--md-sys-color-on-tertiary: light-dark(#fffbff, #1a2753);
--md-sys-color-on-tertiary-container: light-dark(#6c78a8, #7682b3);
--md-sys-color-on-tertiary-fixed: light-dark(#3e4a77, #b6c2f7);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#586494, #929ed1);
--md-sys-color-outline: light-dark(#a8b3be, #4a555f);
--md-sys-color-outline-variant: light-dark(#cedae6, #303b44);
--md-sys-color-primary: light-dark(#007cb0, #009ad9);
--md-sys-color-primary-container: light-dark(#b3deff, #003e5b);
--md-sys-color-primary-dim: light-dark(#006f9e, #009ada);
--md-sys-color-primary-fixed: light-dark(#b3deff, #00577c);
--md-sys-color-primary-fixed-dim: light-dark(#6dc6ff, #003e5b);
--md-sys-color-primary-palette-key-color: light-dark(#0fb6ff, #0fb6ff);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#627693, #7e92b1);
--md-sys-color-secondary-container: light-dark(#c6dafc, #273b56);
--md-sys-color-secondary-dim: light-dark(#556986, #7e92b1);
--md-sys-color-secondary-fixed: light-dark(#c6dafc, #3e526e);
--md-sys-color-secondary-fixed-dim: light-dark(#aabedf, #273b56);
--md-sys-color-secondary-palette-key-color: light-dark(#647896, #647896);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f6faff, #0c141b);
--md-sys-color-surface-bright: light-dark(#f6faff, #313a41);
--md-sys-color-surface-container: light-dark(#e6eff8, #182127);
--md-sys-color-surface-container-high: light-dark(#e0e9f2, #222b32);
--md-sys-color-surface-container-highest: light-dark(#dbe4ed, #2d363d);
--md-sys-color-surface-container-low: light-dark(#ecf5fe, #141d23);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #070f15);
--md-sys-color-surface-dim: light-dark(#d2dbe4, #0c141b);
--md-sys-color-surface-tint: light-dark(#006590, #87ceff);
--md-sys-color-surface-variant: light-dark(#d8e4ef, #3d4851);
--md-sys-color-tertiary: light-dark(#6772a3, #838ec1);
--md-sys-color-tertiary-container: light-dark(#cfd7ff, #2b3864);
--md-sys-color-tertiary-dim: light-dark(#5a6695, #838fc1);
--md-sys-color-tertiary-fixed: light-dark(#cfd7ff, #434f7d);
--md-sys-color-tertiary-fixed-dim: light-dark(#afbbf0, #2b3864);
--md-sys-color-tertiary-palette-key-color: light-dark(#6975a5, #6975a5);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#f6faff, #0c141b);
--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(#87ceff, #004d6f);
--md-sys-color-inverse-surface: light-dark(#293138, #dbe4ed);
--md-sys-color-neutral-palette-key-color: light-dark(#6f7880, #6f7880);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#6d7983, #6d7983);
--md-sys-color-on-background: light-dark(#141d23, #dbe4ed);
--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, #000d17);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #00131f);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #000b1d);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #001127);
--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, #00072b);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #000c39);
--md-sys-color-outline: light-dark(#222d36, #e5f1fd);
--md-sys-color-outline-variant: light-dark(#3f4b54, #b8c4cf);
--md-sys-color-primary: light-dark(#002f47, #e4f2ff);
--md-sys-color-primary-container: light-dark(#004e71, #7dcbff);
--md-sys-color-primary-dim: light-dark(#002234, #e5f2ff);
--md-sys-color-primary-fixed: light-dark(#004e71, #c8e6ff);
--md-sys-color-primary-fixed-dim: light-dark(#003650, #87ceff);
--md-sys-color-primary-palette-key-color: light-dark(#0fb6ff, #0fb6ff);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#182d47, #eaf0ff);
--md-sys-color-secondary-container: light-dark(#364a66, #b0c4e5);
--md-sys-color-secondary-dim: light-dark(#092039, #ebf1ff);
--md-sys-color-secondary-fixed: light-dark(#364a66, #d4e3ff);
--md-sys-color-secondary-fixed-dim: light-dark(#1f344e, #b3c8e9);
--md-sys-color-secondary-palette-key-color: light-dark(#647896, #647896);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f6faff, #0c141b);
--md-sys-color-surface-bright: light-dark(#f6faff, #485159);
--md-sys-color-surface-container: light-dark(#dbe4ed, #293138);
--md-sys-color-surface-container-high: light-dark(#ccd5de, #343c44);
--md-sys-color-surface-container-highest: light-dark(#bfc8d0, #3f484f);
--md-sys-color-surface-container-low: light-dark(#e9f2fb, #182127);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#b1bac3, #0c141b);
--md-sys-color-surface-tint: light-dark(#006590, #87ceff);
--md-sys-color-surface-variant: light-dark(#d8e4ef, #3d4851);
--md-sys-color-tertiary: light-dark(#1d2955, #eeefff);
--md-sys-color-tertiary-container: light-dark(#3b4774, #b5c0f6);
--md-sys-color-tertiary-dim: light-dark(#0f1c48, #efefff);
--md-sys-color-tertiary-fixed: light-dark(#3b4774, #dce1ff);
--md-sys-color-tertiary-fixed-dim: light-dark(#24305c, #b8c4fa);
--md-sys-color-tertiary-palette-key-color: light-dark(#6975a5, #6975a5);
}