@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(#faf8ff, #11131a);
--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(#f0f0fa, #2e3037);
--md-sys-color-inverse-primary: light-dark(#b2c5ff, #2058c3);
--md-sys-color-inverse-surface: light-dark(#2e3037, #e2e2eb);
--md-sys-color-neutral-palette-key-color: light-dark(#76777f, #76777f);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#737785, #737785);
--md-sys-color-on-background: light-dark(#191b22, #e2e2eb);
--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, #002c72);
--md-sys-color-on-primary-container: light-dark(#fefcff, #000418);
--md-sys-color-on-primary-fixed: light-dark(#001847, #001847);
--md-sys-color-on-primary-fixed-variant: light-dark(#0040a0, #0040a0);
--md-sys-color-on-secondary: light-dark(#ffffff, #1f2f56);
--md-sys-color-on-secondary-container: light-dark(#475780, #a8b7e7);
--md-sys-color-on-secondary-fixed: light-dark(#061940, #061940);
--md-sys-color-on-secondary-fixed-variant: light-dark(#36466e, #36466e);
--md-sys-color-on-surface: light-dark(#191b22, #e2e2eb);
--md-sys-color-on-surface-variant: light-dark(#434653, #c3c6d5);
--md-sys-color-on-tertiary: light-dark(#ffffff, #560068);
--md-sys-color-on-tertiary-container: light-dark(#fffbff, #100015);
--md-sys-color-on-tertiary-fixed: light-dark(#350041, #350041);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#722084, #722084);
--md-sys-color-outline: light-dark(#737784, #8d909f);
--md-sys-color-outline-variant: light-dark(#c3c6d5, #434653);
--md-sys-color-primary: light-dark(#1b56c1, #b2c5ff);
--md-sys-color-primary-container: light-dark(#3e6fdb, #5e8cfa);
--md-sys-color-primary-dim: light-dark(#044bb7, #618ffd);
--md-sys-color-primary-fixed: light-dark(#dae2ff, #dae2ff);
--md-sys-color-primary-fixed-dim: light-dark(#b2c5ff, #b2c5ff);
--md-sys-color-primary-palette-key-color: light-dark(#4172de, #4172de);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#4e5d87, #b6c5f6);
--md-sys-color-secondary-container: light-dark(#becefe, #384871);
--md-sys-color-secondary-dim: light-dark(#42517b, #b6c5f6);
--md-sys-color-secondary-fixed: light-dark(#dae2ff, #dae2ff);
--md-sys-color-secondary-fixed-dim: light-dark(#b6c5f6, #b6c5f6);
--md-sys-color-secondary-palette-key-color: light-dark(#6776a2, #6776a2);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#faf8ff, #11131a);
--md-sys-color-surface-bright: light-dark(#faf8ff, #373940);
--md-sys-color-surface-container: light-dark(#ededf7, #1d1f26);
--md-sys-color-surface-container-high: light-dark(#e7e7f1, #282a31);
--md-sys-color-surface-container-highest: light-dark(#e2e2eb, #33343c);
--md-sys-color-surface-container-low: light-dark(#f3f3fc, #191b22);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0c0e14);
--md-sys-color-surface-dim: light-dark(#d9d9e3, #11131a);
--md-sys-color-surface-tint: light-dark(#2058c3, #b2c5ff);
--md-sys-color-surface-variant: light-dark(#dfe2f2, #434653);
--md-sys-color-tertiary: light-dark(#8a389b, #f6adff);
--md-sys-color-tertiary-container: light-dark(#a652b6, #c66fd5);
--md-sys-color-tertiary-dim: light-dark(#7f2e91, #ef94fe);
--md-sys-color-tertiary-fixed: light-dark(#fed6ff, #fed6ff);
--md-sys-color-tertiary-fixed-dim: light-dark(#f6adff, #f6adff);
--md-sys-color-tertiary-palette-key-color: light-dark(#a955b9, #a955b9);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#faf8ff, #11131a);
--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(#9798a0, #63646c);
--md-sys-color-inverse-primary: light-dark(#4475e1, #4c7ce8);
--md-sys-color-inverse-surface: light-dark(#2e3037, #e2e2eb);
--md-sys-color-neutral-palette-key-color: light-dark(#76777f, #76777f);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#737785, #737785);
--md-sys-color-on-background: light-dark(#8f8f98, #60626a);
--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(#fefcff, #002564);
--md-sys-color-on-primary-container: light-dark(#4475e1, #507fec);
--md-sys-color-on-primary-fixed: light-dark(#0045ab, #aec3ff);
--md-sys-color-on-primary-fixed-variant: light-dark(#2c61cc, #769dff);
--md-sys-color-on-secondary: light-dark(#fefcff, #17284f);
--md-sys-color-on-secondary-container: light-dark(#6979a5, #7483af);
--md-sys-color-on-secondary-fixed: light-dark(#3b4b74, #b3c3f3);
--md-sys-color-on-secondary-fixed-variant: light-dark(#566590, #8f9fcd);
--md-sys-color-on-surface: light-dark(#5d5f67, #a1a2ab);
--md-sys-color-on-surface-variant: light-dark(#777a88, #7f8391);
--md-sys-color-on-tertiary: light-dark(#fffbff, #4b005c);
--md-sys-color-on-tertiary-container: light-dark(#ac58bc, #b862c7);
--md-sys-color-on-tertiary-fixed: light-dark(#78268a, #f5a9ff);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#9644a7, #d77ee6);
--md-sys-color-outline: light-dark(#aeb1c0, #505461);
--md-sys-color-outline-variant: light-dark(#d6d8e8, #363a46);
--md-sys-color-primary: light-dark(#3e6fdb, #5e8cfa);
--md-sys-color-primary-container: light-dark(#ccd8ff, #003586);
--md-sys-color-primary-dim: light-dark(#2e62ce, #5e8dfa);
--md-sys-color-primary-fixed: light-dark(#ccd8ff, #004ab5);
--md-sys-color-primary-fixed-dim: light-dark(#a4bcff, #003586);
--md-sys-color-primary-palette-key-color: light-dark(#4172de, #4172de);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#64749f, #8090bd);
--md-sys-color-secondary-container: light-dark(#ccd8ff, #293960);
--md-sys-color-secondary-dim: light-dark(#576791, #8190bd);
--md-sys-color-secondary-fixed: light-dark(#ccd8ff, #405079);
--md-sys-color-secondary-fixed-dim: light-dark(#acbcec, #293960);
--md-sys-color-secondary-palette-key-color: light-dark(#6776a2, #6776a2);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#faf8ff, #11131a);
--md-sys-color-surface-bright: light-dark(#faf8ff, #373940);
--md-sys-color-surface-container: light-dark(#ededf7, #1d1f26);
--md-sys-color-surface-container-high: light-dark(#e7e7f1, #282a31);
--md-sys-color-surface-container-highest: light-dark(#e2e2eb, #33343c);
--md-sys-color-surface-container-low: light-dark(#f3f3fc, #191b22);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0c0e14);
--md-sys-color-surface-dim: light-dark(#d9d9e3, #11131a);
--md-sys-color-surface-tint: light-dark(#2058c3, #b2c5ff);
--md-sys-color-surface-variant: light-dark(#dfe2f2, #434653);
--md-sys-color-tertiary: light-dark(#a652b6, #c66fd5);
--md-sys-color-tertiary-container: light-dark(#fcc8ff, #630c76);
--md-sys-color-tertiary-dim: light-dark(#9845a8, #c66fd5);
--md-sys-color-tertiary-fixed: light-dark(#fcc8ff, #7e2c8f);
--md-sys-color-tertiary-fixed-dim: light-dark(#f39fff, #630c76);
--md-sys-color-tertiary-palette-key-color: light-dark(#a955b9, #a955b9);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#faf8ff, #11131a);
--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(#b2c5ff, #0041a2);
--md-sys-color-inverse-surface: light-dark(#2e3037, #e2e2eb);
--md-sys-color-neutral-palette-key-color: light-dark(#76777f, #76777f);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#737785, #737785);
--md-sys-color-on-background: light-dark(#191b22, #e2e2eb);
--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, #000418);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #000f32);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #000926);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #000f32);
--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, #100015);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #24002d);
--md-sys-color-outline: light-dark(#282c38, #edefff);
--md-sys-color-outline-variant: light-dark(#454955, #bfc2d1);
--md-sys-color-primary: light-dark(#002869, #edefff);
--md-sys-color-primary-container: light-dark(#0043a5, #acc1ff);
--md-sys-color-primary-dim: light-dark(#001c4f, #eef0ff);
--md-sys-color-primary-fixed: light-dark(#0043a5, #dae2ff);
--md-sys-color-primary-fixed-dim: light-dark(#002e77, #b2c5ff);
--md-sys-color-primary-palette-key-color: light-dark(#4172de, #4172de);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#1a2b52, #edefff);
--md-sys-color-secondary-container: light-dark(#384871, #b2c2f1);
--md-sys-color-secondary-dim: light-dark(#0b1e44, #eef0ff);
--md-sys-color-secondary-fixed: light-dark(#384871, #dae2ff);
--md-sys-color-secondary-fixed-dim: light-dark(#213159, #b6c5f6);
--md-sys-color-secondary-palette-key-color: light-dark(#6776a2, #6776a2);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#faf8ff, #11131a);
--md-sys-color-surface-bright: light-dark(#faf8ff, #4e5057);
--md-sys-color-surface-container: light-dark(#e2e2eb, #2e3037);
--md-sys-color-surface-container-high: light-dark(#d3d4dd, #393b43);
--md-sys-color-surface-container-highest: light-dark(#c5c6cf, #45464e);
--md-sys-color-surface-container-low: light-dark(#f0f0fa, #1d1f26);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#b8b8c1, #11131a);
--md-sys-color-surface-tint: light-dark(#2058c3, #b2c5ff);
--md-sys-color-surface-variant: light-dark(#dfe2f2, #434653);
--md-sys-color-tertiary: light-dark(#4f0060, #ffeafc);
--md-sys-color-tertiary-container: light-dark(#752386, #f5a7ff);
--md-sys-color-tertiary-dim: light-dark(#3b0048, #ffebfc);
--md-sys-color-tertiary-fixed: light-dark(#752386, #fed6ff);
--md-sys-color-tertiary-fixed-dim: light-dark(#5a006d, #f6adff);
--md-sys-color-tertiary-palette-key-color: light-dark(#a955b9, #a955b9);
}