@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(#fff8f5, #151311);
--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(#f7efec, #33302e);
--md-sys-color-inverse-primary: light-dark(#dcc2ae, #6f5a4a);
--md-sys-color-inverse-surface: light-dark(#33302e, #e8e1dd);
--md-sys-color-neutral-palette-key-color: light-dark(#7b7673, #7b7673);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7b7673, #7b7673);
--md-sys-color-on-background: light-dark(#1e1b19, #e8e1dd);
--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, #3e2d1f);
--md-sys-color-on-primary-container: light-dark(#564334, #f9ddc9);
--md-sys-color-on-primary-fixed: light-dark(#27190c, #27190c);
--md-sys-color-on-primary-fixed-variant: light-dark(#564334, #564334);
--md-sys-color-on-secondary: light-dark(#ffffff, #3a2e25);
--md-sys-color-on-secondary-container: light-dark(#51443a, #f3dfd1);
--md-sys-color-on-secondary-fixed: light-dark(#231a11, #231a11);
--md-sys-color-on-secondary-fixed-variant: light-dark(#51443a, #51443a);
--md-sys-color-on-surface: light-dark(#1e1b19, #e8e1dd);
--md-sys-color-on-surface-variant: light-dark(#4a4644, #ccc5c2);
--md-sys-color-on-tertiary: light-dark(#ffffff, #412c19);
--md-sys-color-on-tertiary-container: light-dark(#5a422d, #ffdcc1);
--md-sys-color-on-tertiary-fixed: light-dark(#2a1707, #2a1707);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#5a422d, #5a422d);
--md-sys-color-outline: light-dark(#7b7673, #95908d);
--md-sys-color-outline-variant: light-dark(#ccc5c2, #4a4644);
--md-sys-color-primary: light-dark(#6f5a4a, #dcc2ae);
--md-sys-color-primary-container: light-dark(#f9ddc9, #564334);
--md-sys-color-primary-dim: light-dark(#624f3f, #ebcfbb);
--md-sys-color-primary-fixed: light-dark(#f9ddc9, #f9ddc9);
--md-sys-color-primary-fixed-dim: light-dark(#dcc2ae, #dcc2ae);
--md-sys-color-primary-palette-key-color: light-dark(#897362, #897362);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#6a5c51, #d6c3b6);
--md-sys-color-secondary-container: light-dark(#f3dfd1, #51443a);
--md-sys-color-secondary-dim: light-dark(#5d5046, #e4d1c4);
--md-sys-color-secondary-fixed: light-dark(#f3dfd1, #f3dfd1);
--md-sys-color-secondary-fixed-dim: light-dark(#d6c3b6, #d6c3b6);
--md-sys-color-secondary-palette-key-color: light-dark(#837469, #837469);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f5, #151311);
--md-sys-color-surface-bright: light-dark(#fff8f5, #3c3836);
--md-sys-color-surface-container: light-dark(#f4ece9, #221f1d);
--md-sys-color-surface-container-high: light-dark(#eee7e3, #2d2927);
--md-sys-color-surface-container-highest: light-dark(#e8e1dd, #383432);
--md-sys-color-surface-container-low: light-dark(#faf2ee, #1e1b19);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #100e0c);
--md-sys-color-surface-dim: light-dark(#e0d9d5, #151311);
--md-sys-color-surface-tint: light-dark(#6f5a4a, #dcc2ae);
--md-sys-color-surface-variant: light-dark(#e8e1dd, #4a4644);
--md-sys-color-tertiary: light-dark(#745943, #e3c0a5);
--md-sys-color-tertiary-container: light-dark(#ffdcc1, #5a422d);
--md-sys-color-tertiary-dim: light-dark(#674d38, #fad6ba);
--md-sys-color-tertiary-fixed: light-dark(#ffdcc1, #ffdcc1);
--md-sys-color-tertiary-fixed-dim: light-dark(#e3c0a5, #e3c0a5);
--md-sys-color-tertiary-palette-key-color: light-dark(#8e715a, #8e715a);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fff8f5, #151311);
--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(#9d9794, #686361);
--md-sys-color-inverse-primary: light-dark(#8c7564, #937c6b);
--md-sys-color-inverse-surface: light-dark(#33302e, #e8e1dd);
--md-sys-color-neutral-palette-key-color: light-dark(#7b7673, #7b7673);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7b7673, #7b7673);
--md-sys-color-on-background: light-dark(#958f8c, #66615f);
--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, #362619);
--md-sys-color-on-primary-container: light-dark(#8c7664, #97806e);
--md-sys-color-on-primary-fixed: light-dark(#5b4839, #dabfab);
--md-sys-color-on-primary-fixed-variant: light-dark(#776252, #b49c89);
--md-sys-color-on-secondary: light-dark(#fffbff, #32281f);
--md-sys-color-on-secondary-container: light-dark(#86776c, #918176);
--md-sys-color-on-secondary-fixed: light-dark(#574a40, #d3c1b4);
--md-sys-color-on-secondary-fixed-variant: light-dark(#726459, #ae9d91);
--md-sys-color-on-surface: light-dark(#635e5c, #a8a29f);
--md-sys-color-on-surface-variant: light-dark(#7f7a77, #87827f);
--md-sys-color-on-tertiary: light-dark(#fffbff, #3a2513);
--md-sys-color-on-tertiary-container: light-dark(#91745d, #9c7e66);
--md-sys-color-on-tertiary-fixed: light-dark(#604732, #e0bea3);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#7c614b, #ba9a81);
--md-sys-color-outline: light-dark(#b7b1ad, #575351);
--md-sys-color-outline-variant: light-dark(#dfd7d4, #3d3937);
--md-sys-color-primary: light-dark(#86705f, #a48c7a);
--md-sys-color-primary-container: light-dark(#efd4bf, #483728);
--md-sys-color-primary-dim: light-dark(#796453, #a48d7b);
--md-sys-color-primary-fixed: light-dark(#efd4bf, #614d3e);
--md-sys-color-primary-fixed-dim: light-dark(#d2b8a5, #483728);
--md-sys-color-primary-palette-key-color: light-dark(#897362, #897362);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#817267, #9e8e82);
--md-sys-color-secondary-container: light-dark(#e9d5c8, #44382e);
--md-sys-color-secondary-dim: light-dark(#74655a, #9e8e82);
--md-sys-color-secondary-fixed: light-dark(#e9d5c8, #5c4e44);
--md-sys-color-secondary-fixed-dim: light-dark(#ccbaad, #44382e);
--md-sys-color-secondary-palette-key-color: light-dark(#837469, #837469);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f5, #151311);
--md-sys-color-surface-bright: light-dark(#fff8f5, #3c3836);
--md-sys-color-surface-container: light-dark(#f4ece9, #221f1d);
--md-sys-color-surface-container-high: light-dark(#eee7e3, #2d2927);
--md-sys-color-surface-container-highest: light-dark(#e8e1dd, #383432);
--md-sys-color-surface-container-low: light-dark(#faf2ee, #1e1b19);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #100e0c);
--md-sys-color-surface-dim: light-dark(#e0d9d5, #151311);
--md-sys-color-surface-tint: light-dark(#6f5a4a, #dcc2ae);
--md-sys-color-surface-variant: light-dark(#e8e1dd, #4a4644);
--md-sys-color-tertiary: light-dark(#8b6f58, #aa8b72);
--md-sys-color-tertiary-container: light-dark(#f6d2b7, #4c3522);
--md-sys-color-tertiary-dim: light-dark(#7e624c, #aa8b73);
--md-sys-color-tertiary-fixed: light-dark(#f6d2b7, #654c37);
--md-sys-color-tertiary-fixed-dim: light-dark(#d9b79c, #4c3522);
--md-sys-color-tertiary-palette-key-color: light-dark(#8e715a, #8e715a);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fff8f5, #151311);
--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(#dcc2ae, #574435);
--md-sys-color-inverse-surface: light-dark(#33302e, #e8e1dd);
--md-sys-color-neutral-palette-key-color: light-dark(#7b7673, #7b7673);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7b7673, #7b7673);
--md-sys-color-on-background: light-dark(#1e1b19, #e8e1dd);
--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, #140901);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #1b0e04);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #120904);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #180f08);
--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, #160800);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #1e0d01);
--md-sys-color-outline: light-dark(#2f2b29, #f6eeeb);
--md-sys-color-outline-variant: light-dark(#4c4846, #c8c1be);
--md-sys-color-primary: light-dark(#39291b, #ffede0);
--md-sys-color-primary-container: light-dark(#584536, #d8beaa);
--md-sys-color-primary-dim: light-dark(#2b1c10, #ffeee2);
--md-sys-color-primary-fixed: light-dark(#584536, #f9ddc9);
--md-sys-color-primary-fixed-dim: light-dark(#402f21, #dcc2ae);
--md-sys-color-primary-palette-key-color: light-dark(#897362, #897362);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#352a21, #ffede0);
--md-sys-color-secondary-container: light-dark(#54473d, #d2bfb2);
--md-sys-color-secondary-dim: light-dark(#281d15, #ffeee2);
--md-sys-color-secondary-fixed: light-dark(#54473d, #f3dfd1);
--md-sys-color-secondary-fixed-dim: light-dark(#3c3027, #d6c3b6);
--md-sys-color-secondary-palette-key-color: light-dark(#837469, #837469);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f5, #151311);
--md-sys-color-surface-bright: light-dark(#fff8f5, #534f4d);
--md-sys-color-surface-container: light-dark(#e8e1dd, #33302e);
--md-sys-color-surface-container-high: light-dark(#dad3d0, #3e3b38);
--md-sys-color-surface-container-highest: light-dark(#ccc5c2, #4a4644);
--md-sys-color-surface-container-low: light-dark(#f7efec, #221f1d);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#beb7b4, #151311);
--md-sys-color-surface-tint: light-dark(#6f5a4a, #dcc2ae);
--md-sys-color-surface-variant: light-dark(#e8e1dd, #4a4644);
--md-sys-color-tertiary: light-dark(#3c2815, #ffede0);
--md-sys-color-tertiary-container: light-dark(#5c4430, #debca1);
--md-sys-color-tertiary-dim: light-dark(#2e1b0a, #ffeee2);
--md-sys-color-tertiary-fixed: light-dark(#5c4430, #ffdcc1);
--md-sys-color-tertiary-fixed-dim: light-dark(#442e1b, #e3c0a5);
--md-sys-color-tertiary-palette-key-color: light-dark(#8e715a, #8e715a);
}