@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, #15130e);
--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(#f7f0e7, #33302b);
--md-sys-color-inverse-primary: light-dark(#e0c47d, #715c20);
--md-sys-color-inverse-surface: light-dark(#33302b, #e8e1d9);
--md-sys-color-neutral-palette-key-color: light-dark(#7b766f, #7b766f);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7e7668, #7e7668);
--md-sys-color-on-background: light-dark(#1e1b16, #e8e1d9);
--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, #3d2e00);
--md-sys-color-on-primary-container: light-dark(#645015, #645015);
--md-sys-color-on-primary-fixed: light-dark(#241a00, #241a00);
--md-sys-color-on-primary-fixed-variant: light-dark(#574408, #574408);
--md-sys-color-on-secondary: light-dark(#ffffff, #392f17);
--md-sys-color-on-secondary-container: light-dark(#6d6145, #c6b796);
--md-sys-color-on-secondary-fixed: light-dark(#231b05, #231b05);
--md-sys-color-on-secondary-fixed-variant: light-dark(#50462c, #50462c);
--md-sys-color-on-surface: light-dark(#1e1b16, #e8e1d9);
--md-sys-color-on-surface-variant: light-dark(#4c4639, #cfc5b4);
--md-sys-color-on-tertiary: light-dark(#ffffff, #253508);
--md-sys-color-on-tertiary-container: light-dark(#465928, #465928);
--md-sys-color-on-tertiary-fixed: light-dark(#121f00, #121f00);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#3b4c1d, #3b4c1d);
--md-sys-color-outline: light-dark(#7e7668, #989080);
--md-sys-color-outline-variant: light-dark(#cfc5b4, #4c4639);
--md-sys-color-primary: light-dark(#715c20, #fee096);
--md-sys-color-primary-container: light-dark(#e0c47d, #e0c47d);
--md-sys-color-primary-dim: light-dark(#645015, #fde096);
--md-sys-color-primary-fixed: light-dark(#fde096, #fde096);
--md-sys-color-primary-fixed-dim: light-dark(#e0c47d, #e0c47d);
--md-sys-color-primary-palette-key-color: light-dark(#8c7536, #8c7536);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#695d41, #d5c5a3);
--md-sys-color-secondary-container: light-dark(#efdebb, #53482e);
--md-sys-color-secondary-dim: light-dark(#5c5136, #f1e1be);
--md-sys-color-secondary-fixed: light-dark(#f1e1be, #f1e1be);
--md-sys-color-secondary-fixed-dim: light-dark(#d5c5a3, #d5c5a3);
--md-sys-color-secondary-palette-key-color: light-dark(#827658, #827658);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f1, #15130e);
--md-sys-color-surface-bright: light-dark(#fff8f1, #3c3933);
--md-sys-color-surface-container: light-dark(#f4ede4, #221f1a);
--md-sys-color-surface-container-high: light-dark(#eee7df, #2c2a24);
--md-sys-color-surface-container-highest: light-dark(#e8e1d9, #37342f);
--md-sys-color-surface-container-low: light-dark(#faf3ea, #1e1b16);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #100e09);
--md-sys-color-surface-dim: light-dark(#e0d9d1, #15130e);
--md-sys-color-surface-tint: light-dark(#715c20, #e0c47d);
--md-sys-color-surface-variant: light-dark(#ebe1d0, #4c4639);
--md-sys-color-tertiary: light-dark(#526532, #d5ebac);
--md-sys-color-tertiary-container: light-dark(#b9cf92, #b9cf92);
--md-sys-color-tertiary-dim: light-dark(#465828, #e2f9b9);
--md-sys-color-tertiary-fixed: light-dark(#d4ebab, #d4ebab);
--md-sys-color-tertiary-fixed-dim: light-dark(#b8ce92, #b8ce92);
--md-sys-color-tertiary-palette-key-color: light-dark(#b9cf92, #b9cf92);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fff8f1, #15130e);
--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(#9d9790, #68645d);
--md-sys-color-inverse-primary: light-dark(#8e7738, #967e3e);
--md-sys-color-inverse-surface: light-dark(#33302b, #e8e1d9);
--md-sys-color-neutral-palette-key-color: light-dark(#7b766f, #7b766f);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7e7668, #7e7668);
--md-sys-color-on-background: light-dark(#948f88, #66625b);
--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, #352800);
--md-sys-color-on-primary-container: light-dark(#8f7739, #998242);
--md-sys-color-on-primary-fixed: light-dark(#5d4a0e, #ddc17b);
--md-sys-color-on-primary-fixed-variant: light-dark(#7a6427, #b79e5b);
--md-sys-color-on-secondary: light-dark(#fffbff, #322911);
--md-sys-color-on-secondary-container: light-dark(#85795b, #908365);
--md-sys-color-on-secondary-fixed: light-dark(#564b31, #d2c3a1);
--md-sys-color-on-secondary-fixed-variant: light-dark(#716549, #ad9f7f);
--md-sys-color-on-surface: light-dark(#635e58, #a7a29b);
--md-sys-color-on-surface-variant: light-dark(#817a6b, #8a8273);
--md-sys-color-on-tertiary: light-dark(#faffe8, #1e2e03);
--md-sys-color-on-tertiary-container: light-dark(#6d814b, #778b55);
--md-sys-color-on-tertiary-fixed: light-dark(#405222, #b6cc8f);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#5a6d3a, #92a86e);
--md-sys-color-outline: light-dark(#bab1a1, #5a5346);
--md-sys-color-outline-variant: light-dark(#e2d8c6, #3f3a2d);
--md-sys-color-primary: light-dark(#897234, #a78e4d);
--md-sys-color-primary-container: light-dark(#f3d68d, #493800);
--md-sys-color-primary-dim: light-dark(#7b6528, #a78f4d);
--md-sys-color-primary-fixed: light-dark(#f3d68d, #624f13);
--md-sys-color-primary-fixed-dim: light-dark(#d6ba74, #493800);
--md-sys-color-primary-palette-key-color: light-dark(#8c7536, #8c7536);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#807356, #9d8f70);
--md-sys-color-secondary-container: light-dark(#e8d7b4, #433920);
--md-sys-color-secondary-dim: light-dark(#73674a, #9d9071);
--md-sys-color-secondary-fixed: light-dark(#e8d7b4, #5b5035);
--md-sys-color-secondary-fixed-dim: light-dark(#cbbc9a, #433920);
--md-sys-color-secondary-palette-key-color: light-dark(#827658, #827658);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f1, #15130e);
--md-sys-color-surface-bright: light-dark(#fff8f1, #3c3933);
--md-sys-color-surface-container: light-dark(#f4ede4, #221f1a);
--md-sys-color-surface-container-high: light-dark(#eee7df, #2c2a24);
--md-sys-color-surface-container-highest: light-dark(#e8e1d9, #37342f);
--md-sys-color-surface-container-low: light-dark(#faf3ea, #1e1b16);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #100e09);
--md-sys-color-surface-dim: light-dark(#e0d9d1, #15130e);
--md-sys-color-surface-tint: light-dark(#715c20, #e0c47d);
--md-sys-color-surface-variant: light-dark(#ebe1d0, #4c4639);
--md-sys-color-tertiary: light-dark(#687b46, #839860);
--md-sys-color-tertiary-container: light-dark(#cbe1a3, #2e3f11);
--md-sys-color-tertiary-dim: light-dark(#5b6e3b, #849860);
--md-sys-color-tertiary-fixed: light-dark(#cbe1a3, #455726);
--md-sys-color-tertiary-fixed-dim: light-dark(#afc589, #2e3f11);
--md-sys-color-tertiary-palette-key-color: light-dark(#b9cf92, #b9cf92);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fff8f1, #15130e);
--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(#e0c47d, #59460a);
--md-sys-color-inverse-surface: light-dark(#33302b, #e8e1d9);
--md-sys-color-neutral-palette-key-color: light-dark(#7b766f, #7b766f);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7e7668, #7e7668);
--md-sys-color-on-background: light-dark(#1e1b16, #e8e1d9);
--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, #181000);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #181000);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #100a00);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #171001);
--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, #0b1500);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #0a1400);
--md-sys-color-outline: light-dark(#312c20, #f9efdd);
--md-sys-color-outline-variant: light-dark(#4f493c, #cbc2b1);
--md-sys-color-primary: light-dark(#382a00, #ffeecb);
--md-sys-color-primary-container: light-dark(#5a470b, #e0c47d);
--md-sys-color-primary-dim: light-dark(#291e00, #ffefcf);
--md-sys-color-primary-fixed: light-dark(#5a470b, #fde096);
--md-sys-color-primary-fixed-dim: light-dark(#403100, #e0c47d);
--md-sys-color-primary-palette-key-color: light-dark(#8c7536, #8c7536);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#342b13, #ffeecb);
--md-sys-color-secondary-container: light-dark(#53482e, #d1c19f);
--md-sys-color-secondary-dim: light-dark(#271f08, #ffefcf);
--md-sys-color-secondary-fixed: light-dark(#53482e, #f1e1be);
--md-sys-color-secondary-fixed-dim: light-dark(#3b3219, #d5c5a3);
--md-sys-color-secondary-palette-key-color: light-dark(#827658, #827658);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f1, #15130e);
--md-sys-color-surface-bright: light-dark(#fff8f1, #535049);
--md-sys-color-surface-container: light-dark(#e8e1d9, #33302b);
--md-sys-color-surface-container-high: light-dark(#dad3cb, #3e3b35);
--md-sys-color-surface-container-highest: light-dark(#ccc6be, #4a4640);
--md-sys-color-surface-container-low: light-dark(#f7f0e7, #221f1a);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#beb8b0, #15130e);
--md-sys-color-surface-tint: light-dark(#715c20, #e0c47d);
--md-sys-color-surface-variant: light-dark(#ebe1d0, #4c4639);
--md-sys-color-tertiary: light-dark(#213104, #e2f8b8);
--md-sys-color-tertiary-container: light-dark(#3d4f1f, #b9cf92);
--md-sys-color-tertiary-dim: light-dark(#152300, #e2f9b9);
--md-sys-color-tertiary-fixed: light-dark(#3d4f1f, #d4ebab);
--md-sys-color-tertiary-fixed-dim: light-dark(#27380a, #b8ce92);
--md-sys-color-tertiary-palette-key-color: light-dark(#b9cf92, #b9cf92);
}