@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(#f9f9fb, #121415);
--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(#f1f0f3, #2f3133);
--md-sys-color-inverse-primary: light-dark(#a3cbea, #3a637e);
--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(#759dba, #759dba);
--md-sys-color-on-primary-fixed: light-dark(#001e2f, #001e2f);
--md-sys-color-on-primary-fixed-variant: light-dark(#204b65, #204b65);
--md-sys-color-on-secondary: light-dark(#ffffff, #24323d);
--md-sys-color-on-secondary-container: light-dark(#566470, #a8b7c4);
--md-sys-color-on-secondary-fixed: light-dark(#0f1d27, #0f1d27);
--md-sys-color-on-secondary-fixed-variant: light-dark(#3a4854, #3a4854);
--md-sys-color-on-surface: light-dark(#1a1c1e, #e2e2e5);
--md-sys-color-on-surface-variant: light-dark(#42474d, #c2c7cd);
--md-sys-color-on-tertiary: light-dark(#ffffff, #3f264b);
--md-sys-color-on-tertiary-container: light-dark(#ac8db9, #ac8db9);
--md-sys-color-on-tertiary-fixed: light-dark(#291135, #291135);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#573d63, #573d63);
--md-sys-color-outline: light-dark(#72787d, #8c9197);
--md-sys-color-outline-variant: light-dark(#c2c7cd, #42474d);
--md-sys-color-primary: light-dark(#001e2f, #a3cbea);
--md-sys-color-primary-container: light-dark(#00344d, #00344d);
--md-sys-color-primary-dim: light-dark(#2e5671, #b4dcfc);
--md-sys-color-primary-fixed: light-dark(#c8e6ff, #c8e6ff);
--md-sys-color-primary-fixed-dim: light-dark(#a3cbea, #a3cbea);
--md-sys-color-primary-palette-key-color: light-dark(#547b97, #547b97);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#52606c, #b9c8d6);
--md-sys-color-secondary-container: light-dark(#d2e2f0, #3a4854);
--md-sys-color-secondary-dim: light-dark(#465460, #d2e2f0);
--md-sys-color-secondary-fixed: light-dark(#d5e4f2, #d5e4f2);
--md-sys-color-secondary-fixed-dim: light-dark(#b9c8d6, #b9c8d6);
--md-sys-color-secondary-palette-key-color: light-dark(#6a7985, #6a7985);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f9f9fb, #121415);
--md-sys-color-surface-bright: light-dark(#f9f9fb, #38393b);
--md-sys-color-surface-container: light-dark(#eeeef0, #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(#dadadc, #121415);
--md-sys-color-surface-tint: light-dark(#3a637e, #a3cbea);
--md-sys-color-surface-variant: light-dark(#dee3e9, #42474d);
--md-sys-color-tertiary: light-dark(#291135, #ddbbe9);
--md-sys-color-tertiary-container: light-dark(#3f264b, #3f264b);
--md-sys-color-tertiary-dim: light-dark(#634870, #ebc8f8);
--md-sys-color-tertiary-fixed: light-dark(#f6d9ff, #f6d9ff);
--md-sys-color-tertiary-fixed-dim: light-dark(#ddbbe9, #ddbbe9);
--md-sys-color-tertiary-palette-key-color: light-dark(#3f264b, #3f264b);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#f9f9fb, #121415);
--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(#97989a, #636467);
--md-sys-color-inverse-primary: light-dark(#577e9a, #5e85a1);
--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, #616264);
--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(#577e9b, #6189a5);
--md-sys-color-on-primary-fixed: light-dark(#27506a, #a1c9e8);
--md-sys-color-on-primary-fixed-variant: light-dark(#436b86, #7da5c2);
--md-sys-color-on-secondary: light-dark(#fcfcff, #1d2b36);
--md-sys-color-on-secondary-container: light-dark(#6d7c88, #778692);
--md-sys-color-on-secondary-fixed: light-dark(#404e59, #b7c6d3);
--md-sys-color-on-secondary-fixed-variant: light-dark(#5a6874, #93a2af);
--md-sys-color-on-surface: light-dark(#5e5f61, #a2a3a5);
--md-sys-color-on-surface-variant: light-dark(#767b81, #7e848a);
--md-sys-color-on-tertiary: light-dark(#fffbff, #382044);
--md-sys-color-on-tertiary-container: light-dark(#8d6f99, #9879a4);
--md-sys-color-on-tertiary-fixed: light-dark(#5d4269, #dab8e7);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#795c85, #b595c1);
--md-sys-color-outline: light-dark(#adb2b9, #4f555a);
--md-sys-color-outline-variant: light-dark(#d4d9e0, #353b40);
--md-sys-color-primary: light-dark(#517995, #6e95b2);
--md-sys-color-primary-container: light-dark(#b5defe, #103e57);
--md-sys-color-primary-dim: light-dark(#446c88, #6e96b3);
--md-sys-color-primary-fixed: light-dark(#b5defe, #2c5570);
--md-sys-color-primary-fixed-dim: light-dark(#9ac2e1, #103e57);
--md-sys-color-primary-palette-key-color: light-dark(#547b97, #547b97);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#687683, #84939f);
--md-sys-color-secondary-container: light-dark(#ccdbe9, #2e3c47);
--md-sys-color-secondary-dim: light-dark(#5b6a76, #8493a0);
--md-sys-color-secondary-fixed: light-dark(#ccdbe9, #44535e);
--md-sys-color-secondary-fixed-dim: light-dark(#b0bfcc, #2e3c47);
--md-sys-color-secondary-palette-key-color: light-dark(#6a7985, #6a7985);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f9f9fb, #121415);
--md-sys-color-surface-bright: light-dark(#f9f9fb, #38393b);
--md-sys-color-surface-container: light-dark(#eeeef0, #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(#dadadc, #121415);
--md-sys-color-surface-tint: light-dark(#3a637e, #a3cbea);
--md-sys-color-surface-variant: light-dark(#dee3e9, #42474d);
--md-sys-color-tertiary: light-dark(#876a94, #a586b1);
--md-sys-color-tertiary-container: light-dark(#f0cdfc, #4a3056);
--md-sys-color-tertiary-dim: light-dark(#7a5d86, #a586b2);
--md-sys-color-tertiary-fixed: light-dark(#f0cdfc, #62476e);
--md-sys-color-tertiary-fixed-dim: light-dark(#d3b1df, #4a3056);
--md-sys-color-tertiary-palette-key-color: light-dark(#3f264b, #3f264b);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#f9f9fb, #121415);
--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(#a3cbea, #224c66);
--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(#dceeff, #000d17);
--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, #010d16);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #04131c);
--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(#fbe4ff, #170124);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #1e062a);
--md-sys-color-outline: light-dark(#272d32, #ebf0f7);
--md-sys-color-outline-variant: light-dark(#444a4f, #bec3c9);
--md-sys-color-primary: light-dark(#001e2f, #e4f2ff);
--md-sys-color-primary-container: light-dark(#00344d, #9fc8e6);
--md-sys-color-primary-dim: light-dark(#002234, #e5f2ff);
--md-sys-color-primary-fixed: light-dark(#234d67, #c8e6ff);
--md-sys-color-primary-fixed-dim: light-dark(#03364f, #a3cbea);
--md-sys-color-primary-palette-key-color: light-dark(#547b97, #547b97);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#202e38, #e4f2ff);
--md-sys-color-secondary-container: light-dark(#3d4b56, #b5c4d2);
--md-sys-color-secondary-dim: light-dark(#13212b, #e5f2ff);
--md-sys-color-secondary-fixed: light-dark(#3d4b56, #d5e4f2);
--md-sys-color-secondary-fixed-dim: light-dark(#26343f, #b9c8d6);
--md-sys-color-secondary-palette-key-color: light-dark(#6a7985, #6a7985);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f9f9fb, #121415);
--md-sys-color-surface-bright: light-dark(#f9f9fb, #4f5052);
--md-sys-color-surface-container: light-dark(#e2e2e5, #2f3133);
--md-sys-color-surface-container-high: light-dark(#d4d4d6, #3a3c3e);
--md-sys-color-surface-container-highest: light-dark(#c6c6c9, #454749);
--md-sys-color-surface-container-low: light-dark(#f1f0f3, #1e2022);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#b8b9bb, #121415);
--md-sys-color-surface-tint: light-dark(#3a637e, #a3cbea);
--md-sys-color-surface-variant: light-dark(#dee3e9, #42474d);
--md-sys-color-tertiary: light-dark(#291135, #fdeaff);
--md-sys-color-tertiary-container: light-dark(#3f264b, #d9b7e5);
--md-sys-color-tertiary-dim: light-dark(#2d1539, #fdebff);
--md-sys-color-tertiary-fixed: light-dark(#5a3f66, #f6d9ff);
--md-sys-color-tertiary-fixed-dim: light-dark(#42294e, #ddbbe9);
--md-sys-color-tertiary-palette-key-color: light-dark(#3f264b, #3f264b);
}