@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(#fff8f6, #1b110f);
--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(#ffede9, #3a2d2b);
--md-sys-color-inverse-primary: light-dark(#ffb4a5, #a63925);
--md-sys-color-inverse-surface: light-dark(#3a2d2b, #f4ded9);
--md-sys-color-neutral-palette-key-color: light-dark(#847370, #847370);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#8b716c, #8b716c);
--md-sys-color-on-background: light-dark(#241916, #f4ded9);
--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, #650b00);
--md-sys-color-on-primary-container: light-dark(#ffffff, #ffffff);
--md-sys-color-on-primary-fixed: light-dark(#3e0400, #3e0400);
--md-sys-color-on-primary-fixed-variant: light-dark(#862210, #862210);
--md-sys-color-on-secondary: light-dark(#ffffff, #512219);
--md-sys-color-on-secondary-container: light-dark(#794136, #eca394);
--md-sys-color-on-secondary-fixed: light-dark(#370e06, #370e06);
--md-sys-color-on-secondary-fixed-variant: light-dark(#6d382d, #6d382d);
--md-sys-color-on-surface: light-dark(#241916, #f4ded9);
--md-sys-color-on-surface-variant: light-dark(#57423d, #dfc0b9);
--md-sys-color-on-tertiary: light-dark(#ffffff, #00373a);
--md-sys-color-on-tertiary-container: light-dark(#000607, #000607);
--md-sys-color-on-tertiary-fixed: light-dark(#002022, #002022);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#004f54, #004f54);
--md-sys-color-outline: light-dark(#8b716c, #a68a85);
--md-sys-color-outline-variant: light-dark(#dfc0b9, #57423d);
--md-sys-color-primary: light-dark(#a63925, #ffb4a5);
--md-sys-color-primary-container: light-dark(#c7513a, #c7513a);
--md-sys-color-primary-dim: light-dark(#962e1a, #f9765c);
--md-sys-color-primary-fixed: light-dark(#ffdad3, #ffdad3);
--md-sys-color-primary-fixed-dim: light-dark(#ffb4a5, #ffb4a5);
--md-sys-color-primary-palette-key-color: light-dark(#c7513a, #c7513a);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#894f43, #ffb4a5);
--md-sys-color-secondary-container: light-dark(#fdb1a2, #6d382d);
--md-sys-color-secondary-dim: light-dark(#7b4338, #fdb1a2);
--md-sys-color-secondary-fixed: light-dark(#ffdad3, #ffdad3);
--md-sys-color-secondary-fixed-dim: light-dark(#ffb4a5, #ffb4a5);
--md-sys-color-secondary-palette-key-color: light-dark(#a6675a, #a6675a);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f6, #1b110f);
--md-sys-color-surface-bright: light-dark(#fff8f6, #443633);
--md-sys-color-surface-container: light-dark(#ffe9e5, #291d1a);
--md-sys-color-surface-container-high: light-dark(#fae3df, #342724);
--md-sys-color-surface-container-highest: light-dark(#f4ded9, #3f322f);
--md-sys-color-surface-container-low: light-dark(#fff0ee, #241916);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #160c0a);
--md-sys-color-surface-dim: light-dark(#ebd5d1, #1b110f);
--md-sys-color-surface-tint: light-dark(#a63925, #ffb4a5);
--md-sys-color-surface-variant: light-dark(#fcdbd5, #57423d);
--md-sys-color-tertiary: light-dark(#00696f, #74d5dd);
--md-sys-color-tertiary-container: light-dark(#00848b, #00848b);
--md-sys-color-tertiary-dim: light-dark(#005c61, #8becf4);
--md-sys-color-tertiary-fixed: light-dark(#91f2f9, #91f2f9);
--md-sys-color-tertiary-fixed-dim: light-dark(#74d5dd, #74d5dd);
--md-sys-color-tertiary-palette-key-color: light-dark(#00848b, #00848b);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fff8f6, #1b110f);
--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(#a79490, #71615d);
--md-sys-color-inverse-primary: light-dark(#cb543d, #d45a42);
--md-sys-color-inverse-surface: light-dark(#3a2d2b, #f4ded9);
--md-sys-color-neutral-palette-key-color: light-dark(#847370, #847370);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#8b716c, #8b716c);
--md-sys-color-on-background: light-dark(#9f8c88, #6f5f5b);
--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, #580900);
--md-sys-color-on-primary-container: light-dark(#cb543d, #d85e46);
--md-sys-color-on-primary-fixed: light-dark(#8d2815, #ffb1a1);
--md-sys-color-on-primary-fixed-variant: light-dark(#b1412c, #fc795e);
--md-sys-color-on-secondary: light-dark(#fffbff, #491c13);
--md-sys-color-on-secondary-container: light-dark(#a9695c, #b57366);
--md-sys-color-on-secondary-fixed: light-dark(#733d32, #fdb1a2);
--md-sys-color-on-secondary-fixed-variant: light-dark(#92564a, #d58e80);
--md-sys-color-on-surface: light-dark(#6b5b58, #b29f9b);
--md-sys-color-on-surface-variant: light-dark(#8f7570, #987d78);
--md-sys-color-on-tertiary: light-dark(#f4ffff, #002f32);
--md-sys-color-on-tertiary-container: light-dark(#0b878e, #239299);
--md-sys-color-on-tertiary-fixed: light-dark(#00555a, #71d3da);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#007278, #49aeb5);
--md-sys-color-outline: light-dark(#c9aba5, #664f4a);
--md-sys-color-outline-variant: light-dark(#f2d2cb, #4a3531);
--md-sys-color-primary: light-dark(#c44f38, #e96a51);
--md-sys-color-primary-container: light-dark(#ffcec4, #741504);
--md-sys-color-primary-dim: light-dark(#b3432d, #e96a51);
--md-sys-color-primary-fixed: light-dark(#ffcec4, #942c19);
--md-sys-color-primary-fixed-dim: light-dark(#ffa794, #741504);
--md-sys-color-primary-palette-key-color: light-dark(#c7513a, #c7513a);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#a36457, #c37f72);
--md-sys-color-secondary-container: light-dark(#ffcec4, #5d2c21);
--md-sys-color-secondary-dim: light-dark(#94584b, #c48072);
--md-sys-color-secondary-fixed: light-dark(#ffcec4, #794236);
--md-sys-color-secondary-fixed-dim: light-dark(#f5ab9b, #5d2c21);
--md-sys-color-secondary-palette-key-color: light-dark(#a6675a, #a6675a);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f6, #1b110f);
--md-sys-color-surface-bright: light-dark(#fff8f6, #443633);
--md-sys-color-surface-container: light-dark(#ffe9e5, #291d1a);
--md-sys-color-surface-container-high: light-dark(#fae3df, #342724);
--md-sys-color-surface-container-highest: light-dark(#f4ded9, #3f322f);
--md-sys-color-surface-container-low: light-dark(#fff0ee, #241916);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #160c0a);
--md-sys-color-surface-dim: light-dark(#ebd5d1, #1b110f);
--md-sys-color-surface-tint: light-dark(#a63925, #ffb4a5);
--md-sys-color-surface-variant: light-dark(#fcdbd5, #57423d);
--md-sys-color-tertiary: light-dark(#008188, #369ea6);
--md-sys-color-tertiary-container: light-dark(#87e8ef, #004145);
--md-sys-color-tertiary-dim: light-dark(#00737a, #369fa6);
--md-sys-color-tertiary-fixed: light-dark(#87e8ef, #005a5f);
--md-sys-color-tertiary-fixed-dim: light-dark(#6accd3, #004145);
--md-sys-color-tertiary-palette-key-color: light-dark(#00848b, #00848b);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fff8f6, #1b110f);
--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(#ffb4a5, #872311);
--md-sys-color-inverse-surface: light-dark(#3a2d2b, #f4ded9);
--md-sys-color-neutral-palette-key-color: light-dark(#847370, #847370);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#8b716c, #8b716c);
--md-sys-color-on-background: light-dark(#241916, #f4ded9);
--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, #200100);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #2b0200);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #200100);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #290501);
--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, #000607);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #001416);
--md-sys-color-outline: light-dark(#3b2724, #ffece8);
--md-sys-color-outline-variant: light-dark(#5a443f, #dabcb6);
--md-sys-color-primary: light-dark(#5d0900, #ffece8);
--md-sys-color-primary-container: light-dark(#892412, #ffaf9e);
--md-sys-color-primary-dim: light-dark(#450500, #ffede9);
--md-sys-color-primary-fixed: light-dark(#892412, #ffdad3);
--md-sys-color-primary-fixed-dim: light-dark(#690c00, #ffb4a5);
--md-sys-color-primary-palette-key-color: light-dark(#c7513a, #c7513a);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#4c1e15, #ffece8);
--md-sys-color-secondary-container: light-dark(#703a2f, #fbb0a1);
--md-sys-color-secondary-dim: light-dark(#3c1209, #ffede9);
--md-sys-color-secondary-fixed: light-dark(#703a2f, #ffdad3);
--md-sys-color-secondary-fixed-dim: light-dark(#54241b, #ffb4a5);
--md-sys-color-secondary-palette-key-color: light-dark(#a6675a, #a6675a);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f6, #1b110f);
--md-sys-color-surface-bright: light-dark(#fff8f6, #5c4d4a);
--md-sys-color-surface-container: light-dark(#f4ded9, #3a2d2b);
--md-sys-color-surface-container-high: light-dark(#e5d0cb, #463835);
--md-sys-color-surface-container-highest: light-dark(#d7c2be, #524340);
--md-sys-color-surface-container-low: light-dark(#ffede9, #291d1a);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#c9b4b0, #1b110f);
--md-sys-color-surface-tint: light-dark(#a63925, #ffb4a5);
--md-sys-color-surface-variant: light-dark(#fcdbd5, #57423d);
--md-sys-color-tertiary: light-dark(#003235, #c0faff);
--md-sys-color-tertiary-container: light-dark(#005256, #70d1d9);
--md-sys-color-tertiary-dim: light-dark(#002426, #c3fbff);
--md-sys-color-tertiary-fixed: light-dark(#005256, #91f2f9);
--md-sys-color-tertiary-fixed-dim: light-dark(#00393c, #74d5dd);
--md-sys-color-tertiary-palette-key-color: light-dark(#00848b, #00848b);
}