@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(#f9f9fc, #111416);
--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(#f0f0f3, #2f3133);
--md-sys-color-inverse-primary: light-dark(#a0cced, #366380);
--md-sys-color-inverse-surface: light-dark(#2f3133, #e2e2e5);
--md-sys-color-neutral-palette-key-color: light-dark(#767779, #767779);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#72787e, #72787e);
--md-sys-color-on-background: light-dark(#1a1c1e, #e2e2e5);
--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(#fcfcff, #00060d);
--md-sys-color-on-primary-fixed: light-dark(#001e2e, #001e2e);
--md-sys-color-on-primary-fixed-variant: light-dark(#1a4b67, #1a4b67);
--md-sys-color-on-secondary: light-dark(#ffffff, #23323d);
--md-sys-color-on-secondary-container: light-dark(#566673, #a7b7c5);
--md-sys-color-on-secondary-fixed: light-dark(#0d1d28, #0d1d28);
--md-sys-color-on-secondary-fixed-variant: light-dark(#394955, #394955);
--md-sys-color-on-surface: light-dark(#1a1c1e, #e2e2e5);
--md-sys-color-on-surface-variant: light-dark(#41474d, #c1c7ce);
--md-sys-color-on-tertiary: light-dark(#ffffff, #41264c);
--md-sys-color-on-tertiary-container: light-dark(#fffbff, #10001a);
--md-sys-color-on-tertiary-fixed: light-dark(#2a1035, #2a1035);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#593c64, #593c64);
--md-sys-color-outline: light-dark(#72787e, #8b9197);
--md-sys-color-outline-variant: light-dark(#c1c7ce, #41474d);
--md-sys-color-primary: light-dark(#33617d, #a0cced);
--md-sys-color-primary-container: light-dark(#4d7997, #6a96b5);
--md-sys-color-primary-dim: light-dark(#295773, #abd7f9);
--md-sys-color-primary-fixed: light-dark(#c8e6ff, #c8e6ff);
--md-sys-color-primary-fixed-dim: light-dark(#a0cced, #a0cced);
--md-sys-color-primary-palette-key-color: light-dark(#507c9a, #507c9a);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#50606d, #b8c9d7);
--md-sys-color-secondary-container: light-dark(#d4e5f4, #394955);
--md-sys-color-secondary-dim: light-dark(#455461, #d4e5f4);
--md-sys-color-secondary-fixed: light-dark(#d4e5f4, #d4e5f4);
--md-sys-color-secondary-fixed-dim: light-dark(#b8c9d7, #b8c9d7);
--md-sys-color-secondary-palette-key-color: light-dark(#697986, #697986);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f9f9fc, #111416);
--md-sys-color-surface-bright: light-dark(#f9f9fc, #37393c);
--md-sys-color-surface-container: light-dark(#edeef0, #1e2022);
--md-sys-color-surface-container-high: light-dark(#e8e8ea, #282a2c);
--md-sys-color-surface-container-highest: light-dark(#e2e2e5, #333537);
--md-sys-color-surface-container-low: light-dark(#f3f3f6, #1a1c1e);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0c0e10);
--md-sys-color-surface-dim: light-dark(#d9dadc, #111416);
--md-sys-color-surface-tint: light-dark(#366380, #a0cced);
--md-sys-color-surface-variant: light-dark(#dde3ea, #41474d);
--md-sys-color-tertiary: light-dark(#6f517a, #dfbaea);
--md-sys-color-tertiary-container: light-dark(#896994, #a785b2);
--md-sys-color-tertiary-dim: light-dark(#654770, #f3cdfe);
--md-sys-color-tertiary-fixed: light-dark(#f8d8ff, #f8d8ff);
--md-sys-color-tertiary-fixed-dim: light-dark(#dfbaea, #dfbaea);
--md-sys-color-tertiary-palette-key-color: light-dark(#8c6c97, #8c6c97);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#f9f9fc, #111416);
--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(#97989b, #636467);
--md-sys-color-inverse-primary: light-dark(#537f9d, #5a85a4);
--md-sys-color-inverse-surface: light-dark(#2f3133, #e2e2e5);
--md-sys-color-neutral-palette-key-color: light-dark(#767779, #767779);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#72787e, #72787e);
--md-sys-color-on-background: light-dark(#8f9092, #616265);
--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(#537f9d, #5d89a8);
--md-sys-color-on-primary-fixed: light-dark(#21516d, #9dc9ea);
--md-sys-color-on-primary-fixed-variant: light-dark(#3f6b88, #79a5c5);
--md-sys-color-on-secondary: light-dark(#fcfcff, #1c2b37);
--md-sys-color-on-secondary-container: light-dark(#6c7c89, #768693);
--md-sys-color-on-secondary-fixed: light-dark(#3e4e5a, #b5c6d5);
--md-sys-color-on-secondary-fixed-variant: light-dark(#586875, #92a2b0);
--md-sys-color-on-surface: light-dark(#5d5f61, #a2a3a5);
--md-sys-color-on-surface-variant: light-dark(#757b81, #7e848a);
--md-sys-color-on-tertiary: light-dark(#fffbff, #391f45);
--md-sys-color-on-tertiary-container: light-dark(#8f6e9a, #9979a4);
--md-sys-color-on-tertiary-fixed: light-dark(#5e4169, #dcb8e7);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#7a5b85, #b794c2);
--md-sys-color-outline: light-dark(#adb3b9, #4f555a);
--md-sys-color-outline-variant: light-dark(#d4d9e0, #353b40);
--md-sys-color-primary: light-dark(#4d7997, #6a96b5);
--md-sys-color-primary-container: light-dark(#b3deff, #063e59);
--md-sys-color-primary-dim: light-dark(#406d8a, #6a96b5);
--md-sys-color-primary-fixed: light-dark(#b3deff, #275572);
--md-sys-color-primary-fixed-dim: light-dark(#96c2e3, #063e59);
--md-sys-color-primary-palette-key-color: light-dark(#507c9a, #507c9a);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#667784, #8293a0);
--md-sys-color-secondary-container: light-dark(#cadbea, #2c3c47);
--md-sys-color-secondary-dim: light-dark(#5a6a77, #8393a1);
--md-sys-color-secondary-fixed: light-dark(#cadbea, #43535f);
--md-sys-color-secondary-fixed-dim: light-dark(#afbfce, #2c3c47);
--md-sys-color-secondary-palette-key-color: light-dark(#697986, #697986);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f9f9fc, #111416);
--md-sys-color-surface-bright: light-dark(#f9f9fc, #37393c);
--md-sys-color-surface-container: light-dark(#edeef0, #1e2022);
--md-sys-color-surface-container-high: light-dark(#e8e8ea, #282a2c);
--md-sys-color-surface-container-highest: light-dark(#e2e2e5, #333537);
--md-sys-color-surface-container-low: light-dark(#f3f3f6, #1a1c1e);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0c0e10);
--md-sys-color-surface-dim: light-dark(#d9dadc, #111416);
--md-sys-color-surface-tint: light-dark(#366380, #a0cced);
--md-sys-color-surface-variant: light-dark(#dde3ea, #41474d);
--md-sys-color-tertiary: light-dark(#896994, #a785b2);
--md-sys-color-tertiary-container: light-dark(#f2ccfd, #4b2f56);
--md-sys-color-tertiary-dim: light-dark(#7c5d87, #a785b2);
--md-sys-color-tertiary-fixed: light-dark(#f2ccfd, #63466e);
--md-sys-color-tertiary-fixed-dim: light-dark(#d5b1e0, #4b2f56);
--md-sys-color-tertiary-palette-key-color: light-dark(#8c6c97, #8c6c97);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#f9f9fc, #111416);
--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(#a0cced, #1c4c68);
--md-sys-color-inverse-surface: light-dark(#2f3133, #e2e2e5);
--md-sys-color-neutral-palette-key-color: light-dark(#767779, #767779);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#72787e, #72787e);
--md-sys-color-on-background: light-dark(#1a1c1e, #e2e2e5);
--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, #00060d);
--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, #000d17);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #03131d);
--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, #10001a);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #1f052a);
--md-sys-color-outline: light-dark(#272d32, #ebf1f7);
--md-sys-color-outline-variant: light-dark(#444a4f, #bdc3ca);
--md-sys-color-primary: light-dark(#003046, #e3f2ff);
--md-sys-color-primary-container: light-dark(#1d4d69, #9cc8e9);
--md-sys-color-primary-dim: light-dark(#002234, #e5f2ff);
--md-sys-color-primary-fixed: light-dark(#1d4d69, #c8e6ff);
--md-sys-color-primary-fixed-dim: light-dark(#003650, #a0cced);
--md-sys-color-primary-palette-key-color: light-dark(#507c9a, #507c9a);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#1e2e39, #e3f2ff);
--md-sys-color-secondary-container: light-dark(#3b4b57, #b4c5d3);
--md-sys-color-secondary-dim: light-dark(#11212c, #e5f2ff);
--md-sys-color-secondary-fixed: light-dark(#3b4b57, #d4e5f4);
--md-sys-color-secondary-fixed-dim: light-dark(#253440, #b8c9d7);
--md-sys-color-secondary-palette-key-color: light-dark(#697986, #697986);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f9f9fc, #111416);
--md-sys-color-surface-bright: light-dark(#f9f9fc, #4e5052);
--md-sys-color-surface-container: light-dark(#e2e2e5, #2f3133);
--md-sys-color-surface-container-high: light-dark(#d4d4d7, #3a3c3e);
--md-sys-color-surface-container-highest: light-dark(#c6c6c9, #454749);
--md-sys-color-surface-container-low: light-dark(#f0f0f3, #1e2022);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#b8b9bb, #111416);
--md-sys-color-surface-tint: light-dark(#366380, #a0cced);
--md-sys-color-surface-variant: light-dark(#dde3ea, #41474d);
--md-sys-color-tertiary: light-dark(#3c2147, #fdeaff);
--md-sys-color-tertiary-container: light-dark(#5b3e66, #dbb6e6);
--md-sys-color-tertiary-dim: light-dark(#2e1439, #feebff);
--md-sys-color-tertiary-fixed: light-dark(#5b3e66, #f8d8ff);
--md-sys-color-tertiary-fixed-dim: light-dark(#43284e, #dfbaea);
--md-sys-color-tertiary-palette-key-color: light-dark(#8c6c97, #8c6c97);
}