@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, #10131b);
--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(#eff0fc, #2d3039);
--md-sys-color-inverse-primary: light-dark(#b1c5ff, #0056d0);
--md-sys-color-inverse-surface: light-dark(#2d3039, #e1e2ee);
--md-sys-color-neutral-palette-key-color: light-dark(#757781, #757781);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#737787, #737787);
--md-sys-color-on-background: light-dark(#191b24, #e1e2ee);
--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, #002c71);
--md-sys-color-on-primary-container: light-dark(#fefcff, #000519);
--md-sys-color-on-primary-fixed: light-dark(#001847, #001847);
--md-sys-color-on-primary-fixed-variant: light-dark(#00409f, #00409f);
--md-sys-color-on-secondary: light-dark(#ffffff, #0c2d6a);
--md-sys-color-on-secondary-container: light-dark(#2c4785, #9ab4f9);
--md-sys-color-on-secondary-fixed: light-dark(#001847, #001847);
--md-sys-color-on-secondary-fixed-variant: light-dark(#294482, #294482);
--md-sys-color-on-surface: light-dark(#191b24, #e1e2ee);
--md-sys-color-on-surface-variant: light-dark(#424655, #c2c6d8);
--md-sys-color-on-tertiary: light-dark(#ffffff, #591d00);
--md-sys-color-on-tertiary-container: light-dark(#fffbff, #110200);
--md-sys-color-on-tertiary-fixed: light-dark(#370e00, #370e00);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#7e2c00, #7e2c00);
--md-sys-color-outline: light-dark(#727787, #8c90a1);
--md-sys-color-outline-variant: light-dark(#c2c6d8, #424655);
--md-sys-color-primary: light-dark(#0054cb, #b1c5ff);
--md-sys-color-primary-container: light-dark(#076bfc, #5a8cff);
--md-sys-color-primary-dim: light-dark(#004bb7, #5b8cff);
--md-sys-color-primary-fixed: light-dark(#dae2ff, #dae2ff);
--md-sys-color-primary-fixed-dim: light-dark(#b1c5ff, #b1c5ff);
--md-sys-color-primary-palette-key-color: light-dark(#126eff, #126eff);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#425c9c, #b1c5ff);
--md-sys-color-secondary-container: light-dark(#9eb7fd, #294482);
--md-sys-color-secondary-dim: light-dark(#36508f, #9eb7fd);
--md-sys-color-secondary-fixed: light-dark(#dae2ff, #dae2ff);
--md-sys-color-secondary-fixed-dim: light-dark(#b1c5ff, #b1c5ff);
--md-sys-color-secondary-palette-key-color: light-dark(#5c75b6, #5c75b6);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#faf8ff, #10131b);
--md-sys-color-surface-bright: light-dark(#faf8ff, #363942);
--md-sys-color-surface-container: light-dark(#ecedf9, #1d1f28);
--md-sys-color-surface-container-high: light-dark(#e6e7f4, #272a33);
--md-sys-color-surface-container-highest: light-dark(#e1e2ee, #32343e);
--md-sys-color-surface-container-low: light-dark(#f2f3ff, #191b24);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0b0e16);
--md-sys-color-surface-dim: light-dark(#d8d9e5, #10131b);
--md-sys-color-surface-tint: light-dark(#0056d0, #b1c5ff);
--md-sys-color-surface-variant: light-dark(#dee2f4, #424655);
--md-sys-color-tertiary: light-dark(#a13b00, #ffb598);
--md-sys-color-tertiary-container: light-dark(#ca4b00, #f16520);
--md-sys-color-tertiary-dim: light-dark(#913400, #ff6f2b);
--md-sys-color-tertiary-fixed: light-dark(#ffdbce, #ffdbce);
--md-sys-color-tertiary-fixed-dim: light-dark(#ffb598, #ffb598);
--md-sys-color-tertiary-palette-key-color: light-dark(#ce4d00, #ce4d00);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#faf8ff, #10131b);
--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(#9698a3, #62646e);
--md-sys-color-inverse-primary: light-dark(#1f71ff, #3679ff);
--md-sys-color-inverse-surface: light-dark(#2d3039, #e1e2ee);
--md-sys-color-neutral-palette-key-color: light-dark(#757781, #757781);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#737787, #737787);
--md-sys-color-on-background: light-dark(#8e909b, #60626c);
--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, #002664);
--md-sys-color-on-primary-container: light-dark(#2071ff, #3f7dff);
--md-sys-color-on-primary-fixed: light-dark(#0045aa, #aec3ff);
--md-sys-color-on-primary-fixed-variant: light-dark(#005ee0, #759dff);
--md-sys-color-on-secondary: light-dark(#fefcff, #012663);
--md-sys-color-on-secondary-container: light-dark(#5f78b9, #6982c4);
--md-sys-color-on-secondary-fixed: light-dark(#2f4a88, #aec3ff);
--md-sys-color-on-secondary-fixed-variant: light-dark(#4b64a4, #859ee2);
--md-sys-color-on-surface: light-dark(#5c5f69, #a0a2ae);
--md-sys-color-on-surface-variant: light-dark(#767a8a, #7e8393);
--md-sys-color-on-tertiary: light-dark(#fffbff, #4e1800);
--md-sys-color-on-tertiary-container: light-dark(#d25004, #e05913);
--md-sys-color-on-tertiary-fixed: light-dark(#873000, #ffb293);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#b24200, #ff783b);
--md-sys-color-outline: light-dark(#adb1c3, #4f5463);
--md-sys-color-outline-variant: light-dark(#d4d8eb, #353a48);
--md-sys-color-primary: light-dark(#076bfc, #5a8cff);
--md-sys-color-primary-container: light-dark(#ccd8ff, #003585);
--md-sys-color-primary-dim: light-dark(#005fe3, #5b8cff);
--md-sys-color-primary-fixed: light-dark(#ccd8ff, #004ab4);
--md-sys-color-primary-fixed-dim: light-dark(#a3bcff, #003585);
--md-sys-color-primary-palette-key-color: light-dark(#126eff, #126eff);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#5973b4, #768fd2);
--md-sys-color-secondary-container: light-dark(#ccd8ff, #1a3774);
--md-sys-color-secondary-dim: light-dark(#4c66a6, #768fd2);
--md-sys-color-secondary-fixed: light-dark(#ccd8ff, #344f8d);
--md-sys-color-secondary-fixed-dim: light-dark(#a3bcff, #1a3774);
--md-sys-color-secondary-palette-key-color: light-dark(#5c75b6, #5c75b6);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#faf8ff, #10131b);
--md-sys-color-surface-bright: light-dark(#faf8ff, #363942);
--md-sys-color-surface-container: light-dark(#ecedf9, #1d1f28);
--md-sys-color-surface-container-high: light-dark(#e6e7f4, #272a33);
--md-sys-color-surface-container-highest: light-dark(#e1e2ee, #32343e);
--md-sys-color-surface-container-low: light-dark(#f2f3ff, #191b24);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0b0e16);
--md-sys-color-surface-dim: light-dark(#d8d9e5, #10131b);
--md-sys-color-surface-tint: light-dark(#0056d0, #b1c5ff);
--md-sys-color-surface-variant: light-dark(#dee2f4, #424655);
--md-sys-color-tertiary: light-dark(#ca4b00, #f16520);
--md-sys-color-tertiary-container: light-dark(#ffcebc, #692300);
--md-sys-color-tertiary-dim: light-dark(#b54300, #f16621);
--md-sys-color-tertiary-fixed: light-dark(#ffcebc, #8f3300);
--md-sys-color-tertiary-fixed-dim: light-dark(#ffa884, #692300);
--md-sys-color-tertiary-palette-key-color: light-dark(#ce4d00, #ce4d00);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#faf8ff, #10131b);
--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(#b1c5ff, #0042a2);
--md-sys-color-inverse-surface: light-dark(#2d3039, #e1e2ee);
--md-sys-color-neutral-palette-key-color: light-dark(#757781, #757781);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#737787, #737787);
--md-sys-color-on-background: light-dark(#191b24, #e1e2ee);
--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, #000519);
--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, #000925);
--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, #110200);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #250800);
--md-sys-color-outline: light-dark(#272c3a, #edefff);
--md-sys-color-outline-variant: light-dark(#444958, #bec2d4);
--md-sys-color-primary: light-dark(#002869, #edefff);
--md-sys-color-primary-container: light-dark(#0043a4, #acc1ff);
--md-sys-color-primary-dim: light-dark(#001c4f, #eef0ff);
--md-sys-color-primary-fixed: light-dark(#0043a4, #dae2ff);
--md-sys-color-primary-fixed-dim: light-dark(#002e76, #b1c5ff);
--md-sys-color-primary-palette-key-color: light-dark(#126eff, #126eff);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#042866, #edefff);
--md-sys-color-secondary-container: light-dark(#2c4785, #acc1ff);
--md-sys-color-secondary-dim: light-dark(#001c4f, #eef0ff);
--md-sys-color-secondary-fixed: light-dark(#2c4785, #dae2ff);
--md-sys-color-secondary-fixed-dim: light-dark(#102f6d, #b1c5ff);
--md-sys-color-secondary-palette-key-color: light-dark(#5c75b6, #5c75b6);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#faf8ff, #10131b);
--md-sys-color-surface-bright: light-dark(#faf8ff, #4d505a);
--md-sys-color-surface-container: light-dark(#e1e2ee, #2d3039);
--md-sys-color-surface-container-high: light-dark(#d2d4e0, #393b44);
--md-sys-color-surface-container-highest: light-dark(#c4c6d2, #444650);
--md-sys-color-surface-container-low: light-dark(#eff0fc, #1d1f28);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#b7b8c4, #10131b);
--md-sys-color-surface-tint: light-dark(#0056d0, #b1c5ff);
--md-sys-color-surface-variant: light-dark(#dee2f4, #424655);
--md-sys-color-tertiary: light-dark(#521a00, #ffece6);
--md-sys-color-tertiary-container: light-dark(#822e00, #ffb090);
--md-sys-color-tertiary-dim: light-dark(#3d1100, #ffede7);
--md-sys-color-tertiary-fixed: light-dark(#822e00, #ffdbce);
--md-sys-color-tertiary-fixed-dim: light-dark(#5d1e00, #ffb598);
--md-sys-color-tertiary-palette-key-color: light-dark(#ce4d00, #ce4d00);
}