@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(#fff8f8, #171213);
--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(#faeeef, #352f30);
--md-sys-color-inverse-primary: light-dark(#ffb1c8, #894b60);
--md-sys-color-inverse-surface: light-dark(#352f30, #ece0e1);
--md-sys-color-neutral-palette-key-color: light-dark(#7e7576, #7e7576);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#847377, #847377);
--md-sys-color-on-background: light-dark(#201a1b, #ece0e1);
--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, #521e32);
--md-sys-color-on-primary-container: light-dark(#7b4054, #7b4054);
--md-sys-color-on-primary-fixed: light-dark(#38091d, #38091d);
--md-sys-color-on-primary-fixed-variant: light-dark(#6d3448, #6d3448);
--md-sys-color-on-secondary: light-dark(#ffffff, #432931);
--md-sys-color-on-secondary-container: light-dark(#7a5a63, #d5aeb8);
--md-sys-color-on-secondary-fixed: light-dark(#2b151c, #2b151c);
--md-sys-color-on-secondary-fixed-variant: light-dark(#5b3f47, #5b3f47);
--md-sys-color-on-surface: light-dark(#201a1b, #ece0e1);
--md-sys-color-on-surface-variant: light-dark(#514347, #d6c2c6);
--md-sys-color-on-tertiary: light-dark(#ffffff, #4c2700);
--md-sys-color-on-tertiary-container: light-dark(#784716, #784716);
--md-sys-color-on-tertiary-fixed: light-dark(#2e1500, #2e1500);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#693c0a, #693c0a);
--md-sys-color-outline: light-dark(#847377, #9e8c90);
--md-sys-color-outline-variant: light-dark(#d6c2c6, #514347);
--md-sys-color-primary: light-dark(#894b60, #ffd9e2);
--md-sys-color-primary-container: light-dark(#ffb1c8, #ffb1c8);
--md-sys-color-primary-dim: light-dark(#7b4054, #ffb1c8);
--md-sys-color-primary-fixed: light-dark(#ffd9e2, #ffd9e2);
--md-sys-color-primary-fixed-dim: light-dark(#ffb1c8, #ffb1c8);
--md-sys-color-primary-palette-key-color: light-dark(#a56378, #a56378);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#75565f, #e4bcc6);
--md-sys-color-secondary-container: light-dark(#fed5df, #5e4149);
--md-sys-color-secondary-dim: light-dark(#684a53, #fbd2dd);
--md-sys-color-secondary-fixed: light-dark(#ffd9e2, #ffd9e2);
--md-sys-color-secondary-fixed-dim: light-dark(#e4bcc6, #e4bcc6);
--md-sys-color-secondary-palette-key-color: light-dark(#906e77, #906e77);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f8, #171213);
--md-sys-color-surface-bright: light-dark(#fff8f8, #3e3739);
--md-sys-color-surface-container: light-dark(#f7ebec, #241e1f);
--md-sys-color-surface-container-high: light-dark(#f2e5e7, #2f282a);
--md-sys-color-surface-container-highest: light-dark(#ece0e1, #3a3334);
--md-sys-color-surface-container-low: light-dark(#fdf1f2, #201a1b);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #120d0e);
--md-sys-color-surface-dim: light-dark(#e3d7d9, #171213);
--md-sys-color-surface-tint: light-dark(#894b60, #ffb1c8);
--md-sys-color-surface-variant: light-dark(#f3dde1, #514347);
--md-sys-color-tertiary: light-dark(#855321, #ffddc3);
--md-sys-color-tertiary-container: light-dark(#fdb97e, #fdb97e);
--md-sys-color-tertiary-dim: light-dark(#774716, #fcb87d);
--md-sys-color-tertiary-fixed: light-dark(#ffdcc1, #ffdcc1);
--md-sys-color-tertiary-fixed-dim: light-dark(#fcb87d, #fcb87d);
--md-sys-color-tertiary-palette-key-color: light-dark(#fdb97e, #fdb97e);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fff8f8, #171213);
--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(#a09697, #6b6264);
--md-sys-color-inverse-primary: light-dark(#a8667b, #b06d82);
--md-sys-color-inverse-surface: light-dark(#352f30, #ece0e1);
--md-sys-color-neutral-palette-key-color: light-dark(#7e7576, #7e7576);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#847377, #847377);
--md-sys-color-on-background: light-dark(#988e8f, #696062);
--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, #4a182b);
--md-sys-color-on-primary-container: light-dark(#a9667b, #b47085);
--md-sys-color-on-primary-fixed: light-dark(#743a4e, #fcaec5);
--md-sys-color-on-primary-fixed-variant: light-dark(#925368, #d48ba1);
--md-sys-color-on-secondary: light-dark(#fffbff, #3b222a);
--md-sys-color-on-secondary-container: light-dark(#93717a, #9e7b84);
--md-sys-color-on-secondary-fixed: light-dark(#61444c, #e1bac4);
--md-sys-color-on-secondary-fixed-variant: light-dark(#7e5e67, #bb97a0);
--md-sys-color-on-surface: light-dark(#655d5e, #aba0a2);
--md-sys-color-on-surface-variant: light-dark(#87767a, #907f83);
--md-sys-color-on-tertiary: light-dark(#fffbff, #422100);
--md-sys-color-on-tertiary-container: light-dark(#a66d3a, #b17743);
--md-sys-color-on-tertiary-fixed: light-dark(#704110, #fab67b);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#8f5a28, #d1935b);
--md-sys-color-outline: light-dark(#c1adb1, #5f5054);
--md-sys-color-outline-variant: light-dark(#e9d4d8, #44373a);
--md-sys-color-primary: light-dark(#a36176, #c37c92);
--md-sys-color-primary-container: light-dark(#ffcbd9, #5e283b);
--md-sys-color-primary-dim: light-dark(#945569, #c37d92);
--md-sys-color-primary-fixed: light-dark(#ffcbd9, #793e52);
--md-sys-color-primary-fixed-dim: light-dark(#f4a8be, #5e283b);
--md-sys-color-primary-palette-key-color: light-dark(#a56378, #a56378);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#8d6c75, #ab8791);
--md-sys-color-secondary-container: light-dark(#f7ced9, #4e323a);
--md-sys-color-secondary-dim: light-dark(#7f5f68, #ab8891);
--md-sys-color-secondary-fixed: light-dark(#f7ced9, #674951);
--md-sys-color-secondary-fixed-dim: light-dark(#dab3bd, #4e323a);
--md-sys-color-secondary-palette-key-color: light-dark(#906e77, #906e77);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f8, #171213);
--md-sys-color-surface-bright: light-dark(#fff8f8, #3e3739);
--md-sys-color-surface-container: light-dark(#f7ebec, #241e1f);
--md-sys-color-surface-container-high: light-dark(#f2e5e7, #2f282a);
--md-sys-color-surface-container-highest: light-dark(#ece0e1, #3a3334);
--md-sys-color-surface-container-low: light-dark(#fdf1f2, #201a1b);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #120d0e);
--md-sys-color-surface-dim: light-dark(#e3d7d9, #171213);
--md-sys-color-surface-tint: light-dark(#894b60, #ffb1c8);
--md-sys-color-surface-variant: light-dark(#f3dde1, #514347);
--md-sys-color-tertiary: light-dark(#9f6835, #c0844e);
--md-sys-color-tertiary-container: light-dark(#ffd0aa, #5a2f00);
--md-sys-color-tertiary-dim: light-dark(#915c2a, #c0844e);
--md-sys-color-tertiary-fixed: light-dark(#ffd0aa, #764615);
--md-sys-color-tertiary-fixed-dim: light-dark(#f2af75, #5a2f00);
--md-sys-color-tertiary-palette-key-color: light-dark(#fdb97e, #fdb97e);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fff8f8, #171213);
--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(#ffb1c8, #6f3649);
--md-sys-color-inverse-surface: light-dark(#352f30, #ece0e1);
--md-sys-color-neutral-palette-key-color: light-dark(#7e7576, #7e7576);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#847377, #847377);
--md-sys-color-on-background: light-dark(#201a1b, #ece0e1);
--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, #2b0113);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #2a0112);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #18050c);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #1f0a12);
--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, #200d00);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #1f0c00);
--md-sys-color-outline: light-dark(#35292c, #ffebef);
--md-sys-color-outline-variant: light-dark(#544549, #d2bec2);
--md-sys-color-primary: light-dark(#4d1a2d, #ffebef);
--md-sys-color-primary-container: light-dark(#70374b, #ffb1c8);
--md-sys-color-primary-dim: light-dark(#3d0d21, #ffecef);
--md-sys-color-primary-fixed: light-dark(#70374b, #ffd9e2);
--md-sys-color-primary-fixed-dim: light-dark(#552134, #ffb1c8);
--md-sys-color-primary-palette-key-color: light-dark(#a56378, #a56378);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#3e252d, #ffebef);
--md-sys-color-secondary-container: light-dark(#5e4149, #e0b9c2);
--md-sys-color-secondary-dim: light-dark(#301820, #ffecef);
--md-sys-color-secondary-fixed: light-dark(#5e4149, #ffd9e2);
--md-sys-color-secondary-fixed-dim: light-dark(#452b33, #e4bcc6);
--md-sys-color-secondary-palette-key-color: light-dark(#906e77, #906e77);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f8, #171213);
--md-sys-color-surface-bright: light-dark(#fff8f8, #564e50);
--md-sys-color-surface-container: light-dark(#ece0e1, #352f30);
--md-sys-color-surface-container-high: light-dark(#ddd2d3, #413a3b);
--md-sys-color-surface-container-highest: light-dark(#cfc4c5, #4c4546);
--md-sys-color-surface-container-low: light-dark(#faeeef, #241e1f);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#c1b6b8, #171213);
--md-sys-color-surface-tint: light-dark(#894b60, #ffb1c8);
--md-sys-color-surface-variant: light-dark(#f3dde1, #514347);
--md-sys-color-tertiary: light-dark(#462300, #ffede0);
--md-sys-color-tertiary-container: light-dark(#6c3e0d, #fdb97e);
--md-sys-color-tertiary-dim: light-dark(#331900, #ffeee2);
--md-sys-color-tertiary-fixed: light-dark(#6c3e0d, #ffdcc1);
--md-sys-color-tertiary-fixed-dim: light-dark(#4f2900, #fcb87d);
--md-sys-color-tertiary-palette-key-color: light-dark(#fdb97e, #fdb97e);
}