@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, #4f2500);
--md-sys-color-on-tertiary-container: light-dark(#0d0300, #0d0300);
--md-sys-color-on-tertiary-fixed: light-dark(#301400, #301400);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#703701, #703701);
--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(#8d4e19, #ffb783);
--md-sys-color-tertiary-container: light-dark(#ab662f, #ab662f);
--md-sys-color-tertiary-dim: light-dark(#7f430d, #f2a164);
--md-sys-color-tertiary-fixed: light-dark(#ffdcc5, #ffdcc5);
--md-sys-color-tertiary-fixed-dim: light-dark(#ffb783, #ffb783);
--md-sys-color-tertiary-palette-key-color: light-dark(#ab662f, #ab662f);
}
: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, #452000);
--md-sys-color-on-tertiary-container: light-dark(#af6932, #bb733b);
--md-sys-color-on-tertiary-fixed: light-dark(#773d06, #ffb37d);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#975620, #dc8e53);
--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(#a8642d, #ca7f46);
--md-sys-color-tertiary-container: light-dark(#ffcfb0, #5e2d00);
--md-sys-color-tertiary-dim: light-dark(#995722, #ca7f46);
--md-sys-color-tertiary-fixed: light-dark(#ffcfb0, #7d410b);
--md-sys-color-tertiary-fixed-dim: light-dark(#fdaa6d, #5e2d00);
--md-sys-color-tertiary-palette-key-color: light-dark(#ab662f, #ab662f);
}
: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, #0d0300);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #200b00);
--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(#492200, #ffece2);
--md-sys-color-tertiary-container: light-dark(#733a03, #ffb179);
--md-sys-color-tertiary-dim: light-dark(#361700, #ffede4);
--md-sys-color-tertiary-fixed: light-dark(#733a03, #ffdcc5);
--md-sys-color-tertiary-fixed-dim: light-dark(#522700, #ffb783);
--md-sys-color-tertiary-palette-key-color: light-dark(#ab662f, #ab662f);
}