@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(#fafbe5, #121408);
--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(#f2f2dd, #2f3223);
--md-sys-color-inverse-primary: light-dark(#ffb960, #865300);
--md-sys-color-inverse-surface: light-dark(#2f3223, #e3e4cf);
--md-sys-color-neutral-palette-key-color: light-dark(#767866, #767866);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#767a5d, #767a5d);
--md-sys-color-on-background: light-dark(#1b1d10, #e3e4cf);
--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, #472a00);
--md-sys-color-on-primary-container: light-dark(#653e00, #ffddb8);
--md-sys-color-on-primary-fixed: light-dark(#2a1700, #2a1700);
--md-sys-color-on-primary-fixed-variant: light-dark(#653e00, #653e00);
--md-sys-color-on-secondary: light-dark(#ffffff, #472a00);
--md-sys-color-on-secondary-container: light-dark(#653e00, #ffddb8);
--md-sys-color-on-secondary-fixed: light-dark(#2a1700, #2a1700);
--md-sys-color-on-secondary-fixed-variant: light-dark(#653e00, #653e00);
--md-sys-color-on-surface: light-dark(#1b1d10, #e3e4cf);
--md-sys-color-on-surface-variant: light-dark(#45492f, #c5c9a8);
--md-sys-color-on-tertiary: light-dark(#ffffff, #2c3400);
--md-sys-color-on-tertiary-container: light-dark(#414b08, #dcea97);
--md-sys-color-on-tertiary-fixed: light-dark(#181e00, #181e00);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#414b08, #414b08);
--md-sys-color-outline: light-dark(#757a5c, #8f9375);
--md-sys-color-outline-variant: light-dark(#c5c9a8, #45492f);
--md-sys-color-primary: light-dark(#865300, #ffb960);
--md-sys-color-primary-container: light-dark(#ffddb8, #653e00);
--md-sys-color-primary-dim: light-dark(#754800, #ffb14b);
--md-sys-color-primary-fixed: light-dark(#ffddb8, #ffddb8);
--md-sys-color-primary-fixed-dim: light-dark(#ffb960, #ffb960);
--md-sys-color-primary-palette-key-color: light-dark(#b17003, #b17003);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#825513, #f8bb71);
--md-sys-color-secondary-container: light-dark(#ffddb8, #653e00);
--md-sys-color-secondary-dim: light-dark(#744906, #fbbe73);
--md-sys-color-secondary-fixed: light-dark(#ffddb8, #ffddb8);
--md-sys-color-secondary-fixed-dim: light-dark(#f8bb71, #f8bb71);
--md-sys-color-secondary-palette-key-color: light-dark(#9f6d2b, #9f6d2b);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fafbe5, #121408);
--md-sys-color-surface-bright: light-dark(#fafbe5, #383a2c);
--md-sys-color-surface-container: light-dark(#efefda, #1f2113);
--md-sys-color-surface-container-high: light-dark(#e9ead4, #292b1d);
--md-sys-color-surface-container-highest: light-dark(#e3e4cf, #343627);
--md-sys-color-surface-container-low: light-dark(#f4f5df, #1b1d10);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0d0f04);
--md-sys-color-surface-dim: light-dark(#dbdbc6, #121408);
--md-sys-color-surface-tint: light-dark(#865300, #ffb960);
--md-sys-color-surface-variant: light-dark(#e2e5c2, #45492f);
--md-sys-color-tertiary: light-dark(#586420, #c0ce7e);
--md-sys-color-tertiary-container: light-dark(#dcea97, #414b08);
--md-sys-color-tertiary-dim: light-dark(#4c5715, #e7f6a1);
--md-sys-color-tertiary-fixed: light-dark(#dcea97, #dcea97);
--md-sys-color-tertiary-fixed-dim: light-dark(#c0ce7e, #c0ce7e);
--md-sys-color-tertiary-palette-key-color: light-dark(#717d37, #717d37);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fafbe5, #121408);
--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(#989a87, #646655);
--md-sys-color-inverse-primary: light-dark(#ab6c00, #b37206);
--md-sys-color-inverse-surface: light-dark(#2f3223, #e3e4cf);
--md-sys-color-neutral-palette-key-color: light-dark(#767866, #767866);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#767a5d, #767a5d);
--md-sys-color-on-background: light-dark(#90927f, #626453);
--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(#fffbff, #3e2400);
--md-sys-color-on-primary-container: light-dark(#ab6c00, #b8760d);
--md-sys-color-on-primary-fixed: light-dark(#6d4300, #ffb556);
--md-sys-color-on-primary-fixed-variant: light-dark(#905a00, #d9912d);
--md-sys-color-on-secondary: light-dark(#fffbff, #3e2400);
--md-sys-color-on-secondary-container: light-dark(#a2702d, #ae7a36);
--md-sys-color-on-secondary-fixed: light-dark(#6d4300, #f5b96f);
--md-sys-color-on-secondary-fixed-variant: light-dark(#8b5d1b, #cd954f);
--md-sys-color-on-surface: light-dark(#5e6050, #a3a491);
--md-sys-color-on-surface-variant: light-dark(#797d60, #818668);
--md-sys-color-on-tertiary: light-dark(#fcffe0, #252d00);
--md-sys-color-on-tertiary-container: light-dark(#748039, #7e8a42);
--md-sys-color-on-tertiary-fixed: light-dark(#46510e, #becb7c);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#606c28, #9aa75b);
--md-sys-color-outline: light-dark(#b1b594, #52563c);
--md-sys-color-outline-variant: light-dark(#d8dcb9, #383c24);
--md-sys-color-primary: light-dark(#a46700, #c7821d);
--md-sys-color-primary-container: light-dark(#ffd19d, #543300);
--md-sys-color-primary-dim: light-dark(#935c00, #c7821d);
--md-sys-color-primary-fixed: light-dark(#ffd19d, #734700);
--md-sys-color-primary-fixed-dim: light-dark(#faad48, #543300);
--md-sys-color-primary-palette-key-color: light-dark(#b17003, #b17003);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#9c6a28, #bc8642);
--md-sys-color-secondary-container: light-dark(#ffd19d, #543300);
--md-sys-color-secondary-dim: light-dark(#8d5e1d, #bc8642);
--md-sys-color-secondary-fixed: light-dark(#ffd19d, #734804);
--md-sys-color-secondary-fixed-dim: light-dark(#eeb269, #543300);
--md-sys-color-secondary-palette-key-color: light-dark(#9f6d2b, #9f6d2b);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fafbe5, #121408);
--md-sys-color-surface-bright: light-dark(#fafbe5, #383a2c);
--md-sys-color-surface-container: light-dark(#efefda, #1f2113);
--md-sys-color-surface-container-high: light-dark(#e9ead4, #292b1d);
--md-sys-color-surface-container-highest: light-dark(#e3e4cf, #343627);
--md-sys-color-surface-container-low: light-dark(#f4f5df, #1b1d10);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0d0f04);
--md-sys-color-surface-dim: light-dark(#dbdbc6, #121408);
--md-sys-color-surface-tint: light-dark(#865300, #ffb960);
--md-sys-color-surface-variant: light-dark(#e2e5c2, #45492f);
--md-sys-color-tertiary: light-dark(#6e7a34, #8a974e);
--md-sys-color-tertiary-container: light-dark(#d2e08e, #353e00);
--md-sys-color-tertiary-dim: light-dark(#626d29, #8b974e);
--md-sys-color-tertiary-fixed: light-dark(#d2e08e, #4b5613);
--md-sys-color-tertiary-fixed-dim: light-dark(#b7c475, #353e00);
--md-sys-color-tertiary-palette-key-color: light-dark(#717d37, #717d37);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fafbe5, #121408);
--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(#ffb960, #673f00);
--md-sys-color-inverse-surface: light-dark(#2f3223, #e3e4cf);
--md-sys-color-neutral-palette-key-color: light-dark(#767866, #767866);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#767a5d, #767a5d);
--md-sys-color-on-background: light-dark(#1b1d10, #e3e4cf);
--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, #140900);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #1c0e00);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #140900);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #1c0e00);
--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, #090d00);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #0f1300);
--md-sys-color-outline: light-dark(#2a2e17, #eff3cf);
--md-sys-color-outline-variant: light-dark(#474b32, #c1c5a4);
--md-sys-color-primary: light-dark(#412600, #ffeddc);
--md-sys-color-primary-container: light-dark(#694000, #ffb351);
--md-sys-color-primary-dim: light-dark(#301b00, #ffeede);
--md-sys-color-primary-fixed: light-dark(#694000, #ffddb8);
--md-sys-color-primary-fixed-dim: light-dark(#4a2c00, #ffb960);
--md-sys-color-primary-palette-key-color: light-dark(#b17003, #b17003);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#412600, #ffeddc);
--md-sys-color-secondary-container: light-dark(#694000, #f4b76d);
--md-sys-color-secondary-dim: light-dark(#301b00, #ffeede);
--md-sys-color-secondary-fixed: light-dark(#694000, #ffddb8);
--md-sys-color-secondary-fixed-dim: light-dark(#4a2c00, #f8bb71);
--md-sys-color-secondary-palette-key-color: light-dark(#9f6d2b, #9f6d2b);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fafbe5, #121408);
--md-sys-color-surface-bright: light-dark(#fafbe5, #4f5141);
--md-sys-color-surface-container: light-dark(#e3e4cf, #2f3223);
--md-sys-color-surface-container-high: light-dark(#d5d6c1, #3b3d2e);
--md-sys-color-surface-container-highest: light-dark(#c7c8b3, #464838);
--md-sys-color-surface-container-low: light-dark(#f2f2dd, #1f2113);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#b9baa6, #121408);
--md-sys-color-surface-tint: light-dark(#865300, #ffb960);
--md-sys-color-surface-variant: light-dark(#e2e5c2, #45492f);
--md-sys-color-tertiary: light-dark(#283000, #eaf8a3);
--md-sys-color-tertiary-container: light-dark(#434e0b, #bcca7a);
--md-sys-color-tertiary-dim: light-dark(#1c2200, #eaf8a4);
--md-sys-color-tertiary-fixed: light-dark(#434e0b, #dcea97);
--md-sys-color-tertiary-fixed-dim: light-dark(#2e3600, #c0ce7e);
--md-sys-color-tertiary-palette-key-color: light-dark(#717d37, #717d37);
}