@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(#fff8f1, #181306);
--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(#fcefd8, #363020);
--md-sys-color-inverse-primary: light-dark(#ffb598, #9a451f);
--md-sys-color-inverse-surface: light-dark(#363020, #ede1ca);
--md-sys-color-neutral-palette-key-color: light-dark(#7f7663, #7f7663);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#837656, #837656);
--md-sys-color-on-background: light-dark(#211b0d, #ede1ca);
--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, #591c00);
--md-sys-color-on-primary-container: light-dark(#7b2f09, #ffdbce);
--md-sys-color-on-primary-fixed: light-dark(#370e00, #370e00);
--md-sys-color-on-primary-fixed-variant: light-dark(#7b2f09, #7b2f09);
--md-sys-color-on-secondary: light-dark(#ffffff, #552008);
--md-sys-color-on-secondary-container: light-dark(#71361c, #ffdbce);
--md-sys-color-on-secondary-fixed: light-dark(#370e00, #370e00);
--md-sys-color-on-secondary-fixed-variant: light-dark(#71361c, #71361c);
--md-sys-color-on-surface: light-dark(#211b0d, #ede1ca);
--md-sys-color-on-surface-variant: light-dark(#51462a, #d5c5a0);
--md-sys-color-on-tertiary: light-dark(#ffffff, #3d2e00);
--md-sys-color-on-tertiary-container: light-dark(#584400, #ffdf90);
--md-sys-color-on-tertiary-fixed: light-dark(#241a00, #241a00);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#584400, #584400);
--md-sys-color-outline: light-dark(#837656, #9e8f6e);
--md-sys-color-outline-variant: light-dark(#d5c5a0, #51462a);
--md-sys-color-primary: light-dark(#9a451f, #ffb598);
--md-sys-color-primary-container: light-dark(#ffdbce, #7b2f09);
--md-sys-color-primary-dim: light-dark(#8a3a15, #f98f63);
--md-sys-color-primary-fixed: light-dark(#ffdbce, #ffdbce);
--md-sys-color-primary-fixed-dim: light-dark(#ffb598, #ffb598);
--md-sys-color-primary-palette-key-color: light-dark(#b95d35, #b95d35);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#8e4d31, #ffb598);
--md-sys-color-secondary-container: light-dark(#ffdbce, #71361c);
--md-sys-color-secondary-dim: light-dark(#804126, #ffa987);
--md-sys-color-secondary-fixed: light-dark(#ffdbce, #ffdbce);
--md-sys-color-secondary-fixed-dim: light-dark(#ffb598, #ffb598);
--md-sys-color-secondary-palette-key-color: light-dark(#ac6447, #ac6447);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f1, #181306);
--md-sys-color-surface-bright: light-dark(#fff8f1, #3f3828);
--md-sys-color-surface-container: light-dark(#f9edd5, #251f11);
--md-sys-color-surface-container-high: light-dark(#f3e7d0, #30291a);
--md-sys-color-surface-container-highest: light-dark(#ede1ca, #3b3424);
--md-sys-color-surface-container-low: light-dark(#fff2db, #211b0d);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #120e03);
--md-sys-color-surface-dim: light-dark(#e5d9c2, #181306);
--md-sys-color-surface-tint: light-dark(#9a451f, #ffb598);
--md-sys-color-surface-variant: light-dark(#f2e1bb, #51462a);
--md-sys-color-tertiary: light-dark(#745b0c, #e4c36c);
--md-sys-color-tertiary-container: light-dark(#ffdf90, #584400);
--md-sys-color-tertiary-dim: light-dark(#664f00, #f6d47b);
--md-sys-color-tertiary-fixed: light-dark(#ffdf90, #ffdf90);
--md-sys-color-tertiary-fixed-dim: light-dark(#e4c36c, #e4c36c);
--md-sys-color-tertiary-palette-key-color: light-dark(#8f7426, #8f7426);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fff8f1, #181306);
--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(#a19783, #6c6451);
--md-sys-color-inverse-primary: light-dark(#bc6038, #c5663e);
--md-sys-color-inverse-surface: light-dark(#363020, #ede1ca);
--md-sys-color-neutral-palette-key-color: light-dark(#7f7663, #7f7663);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#837656, #837656);
--md-sys-color-on-background: light-dark(#998f7b, #6a614f);
--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, #4e1800);
--md-sys-color-on-primary-container: light-dark(#bd6038, #c96a41);
--md-sys-color-on-primary-fixed: light-dark(#82340f, #ffb293);
--md-sys-color-on-primary-fixed-variant: light-dark(#a44d27, #ec8559);
--md-sys-color-on-secondary: light-dark(#fffbff, #4c1a03);
--md-sys-color-on-secondary-container: light-dark(#af6749, #bb7153);
--md-sys-color-on-secondary-fixed: light-dark(#783b21, #ffb293);
--md-sys-color-on-secondary-fixed-variant: light-dark(#985438, #dc8c6c);
--md-sys-color-on-surface: light-dark(#665e4c, #aca28d);
--md-sys-color-on-surface-variant: light-dark(#87795a, #908261);
--md-sys-color-on-tertiary: light-dark(#fffbff, #352800);
--md-sys-color-on-tertiary-container: light-dark(#927728, #9d8131);
--md-sys-color-on-tertiary-fixed: light-dark(#5f4900, #e1c16a);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#7d6315, #bb9d4a);
--md-sys-color-outline: light-dark(#c0b08d, #5f5336);
--md-sys-color-outline-variant: light-dark(#e8d7b2, #43391e);
--md-sys-color-primary: light-dark(#b65b33, #d9764c);
--md-sys-color-primary-container: light-dark(#ffcebc, #692300);
--md-sys-color-primary-dim: light-dark(#a64f28, #d9764c);
--md-sys-color-primary-fixed: light-dark(#ffcebc, #883913);
--md-sys-color-primary-fixed-dim: light-dark(#ffa885, #692300);
--md-sys-color-primary-palette-key-color: light-dark(#b95d35, #b95d35);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#a96245, #ca7d5e);
--md-sys-color-secondary-container: light-dark(#ffcebc, #612a11);
--md-sys-color-secondary-dim: light-dark(#9a5639, #cb7e5e);
--md-sys-color-secondary-fixed: light-dark(#ffcebc, #7e4025);
--md-sys-color-secondary-fixed-dim: light-dark(#fea886, #612a11);
--md-sys-color-secondary-palette-key-color: light-dark(#ac6447, #ac6447);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f1, #181306);
--md-sys-color-surface-bright: light-dark(#fff8f1, #3f3828);
--md-sys-color-surface-container: light-dark(#f9edd5, #251f11);
--md-sys-color-surface-container-high: light-dark(#f3e7d0, #30291a);
--md-sys-color-surface-container-highest: light-dark(#ede1ca, #3b3424);
--md-sys-color-surface-container-low: light-dark(#fff2db, #211b0d);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #120e03);
--md-sys-color-surface-dim: light-dark(#e5d9c2, #181306);
--md-sys-color-surface-tint: light-dark(#9a451f, #ffb598);
--md-sys-color-surface-variant: light-dark(#f2e1bb, #51462a);
--md-sys-color-tertiary: light-dark(#8c7123, #aa8d3d);
--md-sys-color-tertiary-container: light-dark(#f8d57d, #493800);
--md-sys-color-tertiary-dim: light-dark(#7e6516, #ab8e3d);
--md-sys-color-tertiary-fixed: light-dark(#f8d57d, #654e00);
--md-sys-color-tertiary-fixed-dim: light-dark(#daba64, #493800);
--md-sys-color-tertiary-palette-key-color: light-dark(#8f7426, #8f7426);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fff8f1, #181306);
--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(#ffb598, #7c300a);
--md-sys-color-inverse-surface: light-dark(#363020, #ede1ca);
--md-sys-color-neutral-palette-key-color: light-dark(#7f7663, #7f7663);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#837656, #837656);
--md-sys-color-on-background: light-dark(#211b0d, #ede1ca);
--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, #1c0400);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #250700);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #1c0400);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #250700);
--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, #100a00);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #181000);
--md-sys-color-outline: light-dark(#352b12, #ffeecc);
--md-sys-color-outline-variant: light-dark(#53482c, #d1c19d);
--md-sys-color-primary: light-dark(#521a00, #ffece6);
--md-sys-color-primary-container: light-dark(#7e310c, #ffb090);
--md-sys-color-primary-dim: light-dark(#3d1100, #ffede7);
--md-sys-color-primary-fixed: light-dark(#7e310c, #ffdbce);
--md-sys-color-primary-fixed-dim: light-dark(#5d1e00, #ffb598);
--md-sys-color-primary-palette-key-color: light-dark(#b95d35, #b95d35);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#4f1c05, #ffece6);
--md-sys-color-secondary-container: light-dark(#74381e, #ffb090);
--md-sys-color-secondary-dim: light-dark(#3d1100, #ffede7);
--md-sys-color-secondary-fixed: light-dark(#74381e, #ffdbce);
--md-sys-color-secondary-fixed-dim: light-dark(#58230a, #ffb598);
--md-sys-color-secondary-palette-key-color: light-dark(#ac6447, #ac6447);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f1, #181306);
--md-sys-color-surface-bright: light-dark(#fff8f1, #574f3e);
--md-sys-color-surface-container: light-dark(#ede1ca, #363020);
--md-sys-color-surface-container-high: light-dark(#dfd3bd, #423b2a);
--md-sys-color-surface-container-highest: light-dark(#d1c5af, #4d4635);
--md-sys-color-surface-container-low: light-dark(#fcefd8, #251f11);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#c3b8a2, #181306);
--md-sys-color-surface-tint: light-dark(#9a451f, #ffb598);
--md-sys-color-surface-variant: light-dark(#f2e1bb, #51462a);
--md-sys-color-tertiary: light-dark(#382a00, #ffeecc);
--md-sys-color-tertiary-container: light-dark(#5b4600, #e0bf69);
--md-sys-color-tertiary-dim: light-dark(#291e00, #ffefcf);
--md-sys-color-tertiary-fixed: light-dark(#5b4600, #ffdf90);
--md-sys-color-tertiary-fixed-dim: light-dark(#403100, #e4c36c);
--md-sys-color-tertiary-palette-key-color: light-dark(#8f7426, #8f7426);
}