@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(#fcf9f4, #131311);
--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(#f3f0ec, #31302e);
--md-sys-color-inverse-primary: light-dark(#c6c8b0, #5d604c);
--md-sys-color-inverse-surface: light-dark(#31302e, #e5e2de);
--md-sys-color-neutral-palette-key-color: light-dark(#787773, #787773);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#787773, #787773);
--md-sys-color-on-background: light-dark(#1c1c19, #e5e2de);
--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, #2f3220);
--md-sys-color-on-primary-container: light-dark(#464835, #e3e4cb);
--md-sys-color-on-primary-fixed: light-dark(#1a1d0d, #1a1d0d);
--md-sys-color-on-primary-fixed-variant: light-dark(#464835, #464835);
--md-sys-color-on-secondary: light-dark(#ffffff, #303126);
--md-sys-color-on-secondary-container: light-dark(#46483b, #e4e3d3);
--md-sys-color-on-secondary-fixed: light-dark(#1b1c12, #1b1c12);
--md-sys-color-on-secondary-fixed-variant: light-dark(#46483b, #46483b);
--md-sys-color-on-surface: light-dark(#1c1c19, #e5e2de);
--md-sys-color-on-surface-variant: light-dark(#474744, #c9c6c2);
--md-sys-color-on-tertiary: light-dark(#ffffff, #2e321b);
--md-sys-color-on-tertiary-container: light-dark(#45492f, #e2e5c2);
--md-sys-color-on-tertiary-fixed: light-dark(#1a1d08, #1a1d08);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#45492f, #45492f);
--md-sys-color-outline: light-dark(#787773, #92908d);
--md-sys-color-outline-variant: light-dark(#c9c6c2, #474744);
--md-sys-color-primary: light-dark(#5d604c, #c6c8b0);
--md-sys-color-primary-container: light-dark(#e3e4cb, #464835);
--md-sys-color-primary-dim: light-dark(#515440, #d4d6bd);
--md-sys-color-primary-fixed: light-dark(#e3e4cb, #e3e4cb);
--md-sys-color-primary-fixed-dim: light-dark(#c6c8b0, #c6c8b0);
--md-sys-color-primary-palette-key-color: light-dark(#767963, #767963);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#5e5f52, #c7c7b7);
--md-sys-color-secondary-container: light-dark(#e4e3d3, #46483b);
--md-sys-color-secondary-dim: light-dark(#525347, #d5d5c5);
--md-sys-color-secondary-fixed: light-dark(#e4e3d3, #e4e3d3);
--md-sys-color-secondary-fixed-dim: light-dark(#c7c7b7, #c7c7b7);
--md-sys-color-secondary-palette-key-color: light-dark(#77786a, #77786a);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fcf9f4, #131311);
--md-sys-color-surface-bright: light-dark(#fcf9f4, #3a3936);
--md-sys-color-surface-container: light-dark(#f1ede9, #20201d);
--md-sys-color-surface-container-high: light-dark(#ebe8e3, #2a2a27);
--md-sys-color-surface-container-highest: light-dark(#e5e2de, #353532);
--md-sys-color-surface-container-low: light-dark(#f6f3ef, #1c1c19);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0e0e0c);
--md-sys-color-surface-dim: light-dark(#dcdad5, #131311);
--md-sys-color-surface-tint: light-dark(#5d604c, #c6c8b0);
--md-sys-color-surface-variant: light-dark(#e5e2de, #474744);
--md-sys-color-tertiary: light-dark(#5d6145, #c5c9a8);
--md-sys-color-tertiary-container: light-dark(#e2e5c2, #45492f);
--md-sys-color-tertiary-dim: light-dark(#51553a, #f0f4d0);
--md-sys-color-tertiary-fixed: light-dark(#e2e5c2, #e2e5c2);
--md-sys-color-tertiary-fixed-dim: light-dark(#c5c9a8, #c5c9a8);
--md-sys-color-tertiary-palette-key-color: light-dark(#767a5d, #767a5d);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fcf9f4, #131311);
--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(#9a9894, #656461);
--md-sys-color-inverse-primary: light-dark(#797c66, #80826c);
--md-sys-color-inverse-surface: light-dark(#31302e, #e5e2de);
--md-sys-color-neutral-palette-key-color: light-dark(#787773, #787773);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#787773, #787773);
--md-sys-color-on-background: light-dark(#92908c, #63625f);
--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(#fdffe4, #282b1a);
--md-sys-color-on-primary-container: light-dark(#797c66, #838670);
--md-sys-color-on-primary-fixed: light-dark(#4b4e3b, #c4c6ad);
--md-sys-color-on-primary-fixed-variant: light-dark(#656853, #a0a28b);
--md-sys-color-on-secondary: light-dark(#fefdec, #292b20);
--md-sys-color-on-secondary-container: light-dark(#7a7b6d, #848577);
--md-sys-color-on-secondary-fixed: light-dark(#4c4d41, #c5c5b5);
--md-sys-color-on-secondary-fixed-variant: light-dark(#66675a, #a1a192);
--md-sys-color-on-surface: light-dark(#605f5c, #a5a39f);
--md-sys-color-on-surface-variant: light-dark(#7c7a77, #85837f);
--md-sys-color-on-tertiary: light-dark(#fcffe0, #282c15);
--md-sys-color-on-tertiary-container: light-dark(#787d5f, #828769);
--md-sys-color-on-tertiary-fixed: light-dark(#4a4e34, #c3c7a5);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#65694d, #9fa383);
--md-sys-color-outline: light-dark(#b4b2ae, #555451);
--md-sys-color-outline-variant: light-dark(#dbd8d4, #3b3a37);
--md-sys-color-primary: light-dark(#747661, #90937c);
--md-sys-color-primary-container: light-dark(#d9dbc1, #393c2a);
--md-sys-color-primary-dim: light-dark(#676a55, #91937c);
--md-sys-color-primary-fixed: light-dark(#d9dbc1, #50533f);
--md-sys-color-primary-fixed-dim: light-dark(#bdbfa7, #393c2a);
--md-sys-color-primary-palette-key-color: light-dark(#767963, #767963);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#757668, #919283);
--md-sys-color-secondary-container: light-dark(#dadac9, #3a3b2f);
--md-sys-color-secondary-dim: light-dark(#68695b, #919283);
--md-sys-color-secondary-fixed: light-dark(#dadac9, #515245);
--md-sys-color-secondary-fixed-dim: light-dark(#bebeae, #3a3b2f);
--md-sys-color-secondary-palette-key-color: light-dark(#77786a, #77786a);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fcf9f4, #131311);
--md-sys-color-surface-bright: light-dark(#fcf9f4, #3a3936);
--md-sys-color-surface-container: light-dark(#f1ede9, #20201d);
--md-sys-color-surface-container-high: light-dark(#ebe8e3, #2a2a27);
--md-sys-color-surface-container-highest: light-dark(#e5e2de, #353532);
--md-sys-color-surface-container-low: light-dark(#f6f3ef, #1c1c19);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0e0e0c);
--md-sys-color-surface-dim: light-dark(#dcdad5, #131311);
--md-sys-color-surface-tint: light-dark(#5d604c, #c6c8b0);
--md-sys-color-surface-variant: light-dark(#e5e2de, #474744);
--md-sys-color-tertiary: light-dark(#73775a, #8f9375);
--md-sys-color-tertiary-container: light-dark(#d8dcb9, #383c24);
--md-sys-color-tertiary-dim: light-dark(#666a4e, #909475);
--md-sys-color-tertiary-fixed: light-dark(#d8dcb9, #4f5339);
--md-sys-color-tertiary-fixed-dim: light-dark(#bcc09f, #383c24);
--md-sys-color-tertiary-palette-key-color: light-dark(#767a5d, #767a5d);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fcf9f4, #131311);
--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(#c6c8b0, #474a37);
--md-sys-color-inverse-surface: light-dark(#31302e, #e5e2de);
--md-sys-color-neutral-palette-key-color: light-dark(#787773, #787773);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#787773, #787773);
--md-sys-color-on-background: light-dark(#1c1c19, #e5e2de);
--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, #0a0c02);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #101205);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #0a0c04);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #101208);
--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, #0f1302);
--md-sys-color-outline: light-dark(#2d2c2a, #f3efeb);
--md-sys-color-outline-variant: light-dark(#4a4946, #c5c2be);
--md-sys-color-primary: light-dark(#2b2e1c, #f0f2d8);
--md-sys-color-primary-container: light-dark(#484b38, #c2c5ac);
--md-sys-color-primary-dim: light-dark(#1e2111, #f1f3d8);
--md-sys-color-primary-fixed: light-dark(#484b38, #e3e4cb);
--md-sys-color-primary-fixed-dim: light-dark(#313423, #c6c8b0);
--md-sys-color-primary-palette-key-color: light-dark(#767963, #767963);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#2c2d22, #f1f1e0);
--md-sys-color-secondary-container: light-dark(#494a3e, #c3c4b4);
--md-sys-color-secondary-dim: light-dark(#1f2016, #f2f2e1);
--md-sys-color-secondary-fixed: light-dark(#494a3e, #e4e3d3);
--md-sys-color-secondary-fixed-dim: light-dark(#323428, #c7c7b7);
--md-sys-color-secondary-palette-key-color: light-dark(#77786a, #77786a);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fcf9f4, #131311);
--md-sys-color-surface-bright: light-dark(#fcf9f4, #51504d);
--md-sys-color-surface-container: light-dark(#e5e2de, #31302e);
--md-sys-color-surface-container-high: light-dark(#d7d4d0, #3c3b39);
--md-sys-color-surface-container-highest: light-dark(#c9c6c2, #474744);
--md-sys-color-surface-container-low: light-dark(#f3f0ec, #20201d);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#bbb8b4, #131311);
--md-sys-color-surface-tint: light-dark(#5d604c, #c6c8b0);
--md-sys-color-surface-variant: light-dark(#e5e2de, #474744);
--md-sys-color-tertiary: light-dark(#2a2e17, #eff3cf);
--md-sys-color-tertiary-container: light-dark(#474b32, #c1c5a4);
--md-sys-color-tertiary-dim: light-dark(#1d210b, #f0f4d0);
--md-sys-color-tertiary-fixed: light-dark(#474b32, #e2e5c2);
--md-sys-color-tertiary-fixed-dim: light-dark(#31351d, #c5c9a8);
--md-sys-color-tertiary-palette-key-color: light-dark(#767a5d, #767a5d);
}