@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(#fff8f9, #1a1116);
--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(#feecf3, #382d33);
--md-sys-color-inverse-primary: light-dark(#74d5e4, #006874);
--md-sys-color-inverse-surface: light-dark(#382d33, #f0dee5);
--md-sys-color-neutral-palette-key-color: light-dark(#817379, #817379);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#86717c, #86717c);
--md-sys-color-on-background: light-dark(#22191e, #f0dee5);
--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(#004f58, #98f0ff);
--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, #4c2528);
--md-sys-color-on-secondary-container: light-dark(#663b3d, #ffdada);
--md-sys-color-on-secondary-fixed: light-dark(#331014, #331014);
--md-sys-color-on-secondary-fixed-variant: light-dark(#663b3d, #663b3d);
--md-sys-color-on-surface: light-dark(#22191e, #f0dee5);
--md-sys-color-on-surface-variant: light-dark(#53424b, #d8c0cc);
--md-sys-color-on-tertiary: light-dark(#ffffff, #3e2e00);
--md-sys-color-on-tertiary-container: light-dark(#594401, #ffdf92);
--md-sys-color-on-tertiary-fixed: light-dark(#241a00, #241a00);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#594401, #594401);
--md-sys-color-outline: light-dark(#86717c, #a18b96);
--md-sys-color-outline-variant: light-dark(#d8c0cc, #53424b);
--md-sys-color-primary: light-dark(#006874, #74d5e4);
--md-sys-color-primary-container: light-dark(#98f0ff, #004f58);
--md-sys-color-primary-dim: light-dark(#005b66, #8eeefe);
--md-sys-color-primary-fixed: light-dark(#98f0ff, #98f0ff);
--md-sys-color-primary-fixed-dim: light-dark(#74d5e4, #74d5e4);
--md-sys-color-primary-palette-key-color: light-dark(#098694, #098694);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#815154, #f4b7ba);
--md-sys-color-secondary-container: light-dark(#ffdada, #663b3d);
--md-sys-color-secondary-dim: light-dark(#734649, #fdbfc2);
--md-sys-color-secondary-fixed: light-dark(#ffdada, #ffdada);
--md-sys-color-secondary-fixed-dim: light-dark(#f4b7ba, #f4b7ba);
--md-sys-color-secondary-palette-key-color: light-dark(#9d6a6d, #9d6a6d);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f9, #1a1116);
--md-sys-color-surface-bright: light-dark(#fff8f9, #41363c);
--md-sys-color-surface-container: light-dark(#fbe9f1, #261d22);
--md-sys-color-surface-container-high: light-dark(#f6e3eb, #31272d);
--md-sys-color-surface-container-highest: light-dark(#f0dee5, #3d3237);
--md-sys-color-surface-container-low: light-dark(#fff0f5, #22191e);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #140c11);
--md-sys-color-surface-dim: light-dark(#e7d5dd, #1a1116);
--md-sys-color-surface-tint: light-dark(#006874, #74d5e4);
--md-sys-color-surface-variant: light-dark(#f5dce8, #53424b);
--md-sys-color-tertiary: light-dark(#725c1a, #e2c377);
--md-sys-color-tertiary-container: light-dark(#ffdf92, #594401);
--md-sys-color-tertiary-dim: light-dark(#65500e, #fada8b);
--md-sys-color-tertiary-fixed: light-dark(#ffdf92, #ffdf92);
--md-sys-color-tertiary-fixed-dim: light-dark(#e2c377, #e2c377);
--md-sys-color-tertiary-palette-key-color: light-dark(#8d7431, #8d7431);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fff8f9, #1a1116);
--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(#a3949b, #6e6167);
--md-sys-color-inverse-primary: light-dark(#098695, #1c8d9c);
--md-sys-color-inverse-surface: light-dark(#382d33, #f0dee5);
--md-sys-color-neutral-palette-key-color: light-dark(#817379, #817379);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#86717c, #86717c);
--md-sys-color-on-background: light-dark(#9b8c93, #6c5f65);
--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(#0a8695, #23919f);
--md-sys-color-on-primary-fixed: light-dark(#00555e, #72d2e1);
--md-sys-color-on-primary-fixed-variant: light-dark(#00717e, #49adbc);
--md-sys-color-on-secondary: light-dark(#fffbff, #441e21);
--md-sys-color-on-secondary-container: light-dark(#a06c6f, #ab7679);
--md-sys-color-on-secondary-fixed: light-dark(#6c4042, #f1b5b7);
--md-sys-color-on-secondary-fixed-variant: light-dark(#8a595c, #ca9294);
--md-sys-color-on-surface: light-dark(#685c62, #ae9fa6);
--md-sys-color-on-surface-variant: light-dark(#8a7580, #927d88);
--md-sys-color-on-tertiary: light-dark(#fffbff, #362800);
--md-sys-color-on-tertiary-container: light-dark(#907733, #9b813c);
--md-sys-color-on-tertiary-fixed: light-dark(#5f4907, #dfc175);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#7b6421, #b99d55);
--md-sys-color-outline: light-dark(#c3acb7, #614f59);
--md-sys-color-outline-variant: light-dark(#ebd2de, #46353e);
--md-sys-color-primary: light-dark(#00818f, #369eac);
--md-sys-color-primary-container: light-dark(#87e7f7, #004148);
--md-sys-color-primary-dim: light-dark(#007380, #369ead);
--md-sys-color-primary-fixed: light-dark(#87e7f7, #005a64);
--md-sys-color-primary-fixed-dim: light-dark(#6acbda, #004148);
--md-sys-color-primary-palette-key-color: light-dark(#098694, #098694);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#9a676a, #b98385);
--md-sys-color-secondary-container: light-dark(#ffcdce, #572e31);
--md-sys-color-secondary-dim: light-dark(#8c5b5d, #b98385);
--md-sys-color-secondary-fixed: light-dark(#ffcdce, #724447);
--md-sys-color-secondary-fixed-dim: light-dark(#eaaeb0, #572e31);
--md-sys-color-secondary-palette-key-color: light-dark(#9d6a6d, #9d6a6d);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f9, #1a1116);
--md-sys-color-surface-bright: light-dark(#fff8f9, #41363c);
--md-sys-color-surface-container: light-dark(#fbe9f1, #261d22);
--md-sys-color-surface-container-high: light-dark(#f6e3eb, #31272d);
--md-sys-color-surface-container-highest: light-dark(#f0dee5, #3d3237);
--md-sys-color-surface-container-low: light-dark(#fff0f5, #22191e);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #140c11);
--md-sys-color-surface-dim: light-dark(#e7d5dd, #1a1116);
--md-sys-color-surface-tint: light-dark(#006874, #74d5e4);
--md-sys-color-surface-variant: light-dark(#f5dce8, #53424b);
--md-sys-color-tertiary: light-dark(#8a722e, #a98e47);
--md-sys-color-tertiary-container: light-dark(#f5d688, #493800);
--md-sys-color-tertiary-dim: light-dark(#7d6523, #a98e48);
--md-sys-color-tertiary-fixed: light-dark(#f5d688, #644e0c);
--md-sys-color-tertiary-fixed-dim: light-dark(#d8ba6f, #493800);
--md-sys-color-tertiary-palette-key-color: light-dark(#8d7431, #8d7431);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fff8f9, #1a1116);
--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(#74d5e4, #005059);
--md-sys-color-inverse-surface: light-dark(#382d33, #f0dee5);
--md-sys-color-neutral-palette-key-color: light-dark(#817379, #817379);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#86717c, #86717c);
--md-sys-color-on-background: light-dark(#22191e, #f0dee5);
--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, #1e0305);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #25060a);
--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, #110a00);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #181000);
--md-sys-color-outline: light-dark(#372830, #ffebf3);
--md-sys-color-outline-variant: light-dark(#56444e, #d4bcc8);
--md-sys-color-primary: light-dark(#003138, #cdf7ff);
--md-sys-color-primary-container: light-dark(#00515b, #70d1e0);
--md-sys-color-primary-dim: light-dark(#002428, #d0f8ff);
--md-sys-color-primary-fixed: light-dark(#00515b, #98f0ff);
--md-sys-color-primary-fixed-dim: light-dark(#003940, #74d5e4);
--md-sys-color-primary-palette-key-color: light-dark(#098694, #098694);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#472124, #ffeceb);
--md-sys-color-secondary-container: light-dark(#693d40, #f0b3b6);
--md-sys-color-secondary-dim: light-dark(#371417, #ffedec);
--md-sys-color-secondary-fixed: light-dark(#693d40, #ffdada);
--md-sys-color-secondary-fixed-dim: light-dark(#4e272a, #f4b7ba);
--md-sys-color-secondary-palette-key-color: light-dark(#9d6a6d, #9d6a6d);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f9, #1a1116);
--md-sys-color-surface-bright: light-dark(#fff8f9, #594d53);
--md-sys-color-surface-container: light-dark(#f0dee5, #382d33);
--md-sys-color-surface-container-high: light-dark(#e1d0d7, #44383e);
--md-sys-color-surface-container-highest: light-dark(#d3c2c9, #4f4449);
--md-sys-color-surface-container-low: light-dark(#feecf3, #261d22);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#c5b4bb, #1a1116);
--md-sys-color-surface-tint: light-dark(#006874, #74d5e4);
--md-sys-color-surface-variant: light-dark(#f5dce8, #53424b);
--md-sys-color-tertiary: light-dark(#382a00, #ffeecc);
--md-sys-color-tertiary-container: light-dark(#5b4603, #debf74);
--md-sys-color-tertiary-dim: light-dark(#291e00, #ffefcf);
--md-sys-color-tertiary-fixed: light-dark(#5b4603, #ffdf92);
--md-sys-color-tertiary-fixed-dim: light-dark(#403000, #e2c377);
--md-sys-color-tertiary-palette-key-color: light-dark(#8d7431, #8d7431);
}