@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, #181211);
--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(#fbeeeb, #362f2d);
--md-sys-color-inverse-primary: light-dark(#ffb4a5, #894f43);
--md-sys-color-inverse-surface: light-dark(#362f2d, #ece0dd);
--md-sys-color-neutral-palette-key-color: light-dark(#7e7573, #7e7573);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#857370, #857370);
--md-sys-color-on-background: light-dark(#201a19, #ece0dd);
--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, #512219);
--md-sys-color-on-primary-container: light-dark(#fffbff, #160100);
--md-sys-color-on-primary-fixed: light-dark(#370e07, #370e07);
--md-sys-color-on-primary-fixed-variant: light-dark(#6d382d, #6d382d);
--md-sys-color-on-secondary: light-dark(#ffffff, #432a25);
--md-sys-color-on-secondary-container: light-dark(#785a53, #d3aca5);
--md-sys-color-on-secondary-fixed: light-dark(#2b1611, #2b1611);
--md-sys-color-on-secondary-fixed-variant: light-dark(#5c403a, #5c403a);
--md-sys-color-on-surface: light-dark(#201a19, #ece0dd);
--md-sys-color-on-surface-variant: light-dark(#524340, #d7c2be);
--md-sys-color-on-tertiary: light-dark(#ffffff, #3d2e00);
--md-sys-color-on-tertiary-container: light-dark(#4f3d02, #4f3d02);
--md-sys-color-on-tertiary-fixed: light-dark(#241a00, #241a00);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#574409, #574409);
--md-sys-color-outline: light-dark(#857370, #a08c89);
--md-sys-color-outline-variant: light-dark(#d7c2be, #524340);
--md-sys-color-primary: light-dark(#864c41, #ffb4a5);
--md-sys-color-primary-container: light-dark(#a36457, #c38072);
--md-sys-color-primary-dim: light-dark(#7b4338, #fdb1a2);
--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(#a6675a, #a6675a);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#765751, #e5beb6);
--md-sys-color-secondary-container: light-dark(#fdd4cb, #5c403a);
--md-sys-color-secondary-dim: light-dark(#694b45, #fad1c9);
--md-sys-color-secondary-fixed: light-dark(#ffdad3, #ffdad3);
--md-sys-color-secondary-fixed-dim: light-dark(#e5beb6, #e5beb6);
--md-sys-color-secondary-palette-key-color: light-dark(#906f68, #906f68);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f6, #181211);
--md-sys-color-surface-bright: light-dark(#fff8f6, #3f3836);
--md-sys-color-surface-container: light-dark(#f8ebe9, #241e1d);
--md-sys-color-surface-container-high: light-dark(#f2e5e3, #2f2827);
--md-sys-color-surface-container-highest: light-dark(#ece0dd, #3a3332);
--md-sys-color-surface-container-low: light-dark(#fef1ee, #201a19);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #120d0c);
--md-sys-color-surface-dim: light-dark(#e4d7d5, #181211);
--md-sys-color-surface-tint: light-dark(#894f43, #ffb4a5);
--md-sys-color-surface-variant: light-dark(#f4ded9, #524340);
--md-sys-color-tertiary: light-dark(#715c20, #e0c47d);
--md-sys-color-tertiary-container: light-dark(#c3a965, #c3a965);
--md-sys-color-tertiary-dim: light-dark(#645015, #fde096);
--md-sys-color-tertiary-fixed: light-dark(#fde096, #fde096);
--md-sys-color-tertiary-fixed-dim: light-dark(#dfc47d, #dfc47d);
--md-sys-color-tertiary-palette-key-color: light-dark(#c3a965, #c3a965);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fff8f6, #181211);
--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(#a09694, #6b6261);
--md-sys-color-inverse-primary: light-dark(#a9695c, #b07062);
--md-sys-color-inverse-surface: light-dark(#362f2d, #ece0dd);
--md-sys-color-neutral-palette-key-color: light-dark(#7e7573, #7e7573);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#857370, #857370);
--md-sys-color-on-background: light-dark(#988e8c, #69605f);
--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, #491c13);
--md-sys-color-on-primary-container: light-dark(#a9695c, #b57366);
--md-sys-color-on-primary-fixed: light-dark(#733d32, #fdb1a2);
--md-sys-color-on-primary-fixed-variant: light-dark(#92564a, #d48e80);
--md-sys-color-on-secondary: light-dark(#fffbff, #3c241f);
--md-sys-color-on-secondary-container: light-dark(#93726b, #9e7c75);
--md-sys-color-on-secondary-fixed: light-dark(#62453f, #e2bbb3);
--md-sys-color-on-secondary-fixed-variant: light-dark(#7e5f59, #bc9890);
--md-sys-color-on-surface: light-dark(#665d5b, #aba19e);
--md-sys-color-on-surface-variant: light-dark(#897773, #917f7b);
--md-sys-color-on-tertiary: light-dark(#fffbff, #352800);
--md-sys-color-on-tertiary-container: light-dark(#8e7839, #998242);
--md-sys-color-on-tertiary-fixed: light-dark(#5d4a0f, #ddc17b);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#796427, #b79e5b);
--md-sys-color-outline: light-dark(#c2ada9, #60504d);
--md-sys-color-outline-variant: light-dark(#ead4d0, #453734);
--md-sys-color-primary: light-dark(#a36457, #c38072);
--md-sys-color-primary-container: light-dark(#ffcec4, #5d2c22);
--md-sys-color-primary-dim: light-dark(#94584c, #c38072);
--md-sys-color-primary-fixed: light-dark(#ffcec4, #794236);
--md-sys-color-primary-fixed-dim: light-dark(#f5ab9b, #5d2c22);
--md-sys-color-primary-palette-key-color: light-dark(#a6675a, #a6675a);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#8e6d66, #ac8981);
--md-sys-color-secondary-container: light-dark(#f9d0c8, #4e342e);
--md-sys-color-secondary-dim: light-dark(#80605a, #ac8982);
--md-sys-color-secondary-fixed: light-dark(#f9d0c8, #674a44);
--md-sys-color-secondary-fixed-dim: light-dark(#dbb4ad, #4e342e);
--md-sys-color-secondary-palette-key-color: light-dark(#906f68, #906f68);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f6, #181211);
--md-sys-color-surface-bright: light-dark(#fff8f6, #3f3836);
--md-sys-color-surface-container: light-dark(#f8ebe9, #241e1d);
--md-sys-color-surface-container-high: light-dark(#f2e5e3, #2f2827);
--md-sys-color-surface-container-highest: light-dark(#ece0dd, #3a3332);
--md-sys-color-surface-container-low: light-dark(#fef1ee, #201a19);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #120d0c);
--md-sys-color-surface-dim: light-dark(#e4d7d5, #181211);
--md-sys-color-surface-tint: light-dark(#894f43, #ffb4a5);
--md-sys-color-surface-variant: light-dark(#f4ded9, #524340);
--md-sys-color-tertiary: light-dark(#897234, #a78e4d);
--md-sys-color-tertiary-container: light-dark(#f3d68e, #493800);
--md-sys-color-tertiary-dim: light-dark(#7b6629, #a78f4e);
--md-sys-color-tertiary-fixed: light-dark(#f3d68e, #624f13);
--md-sys-color-tertiary-fixed-dim: light-dark(#d6bb75, #493800);
--md-sys-color-tertiary-palette-key-color: light-dark(#c3a965, #c3a965);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fff8f6, #181211);
--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, #6e392e);
--md-sys-color-inverse-surface: light-dark(#362f2d, #ece0dd);
--md-sys-color-neutral-palette-key-color: light-dark(#7e7573, #7e7573);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#857370, #857370);
--md-sys-color-on-background: light-dark(#201a19, #ece0dd);
--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, #160100);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #290501);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #180604);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #1f0c08);
--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, #171000);
--md-sys-color-outline: light-dark(#362926, #ffece8);
--md-sys-color-outline-variant: light-dark(#554643, #d3beba);
--md-sys-color-primary: light-dark(#4c1e15, #ffece8);
--md-sys-color-primary-container: light-dark(#703a2f, #fbb0a1);
--md-sys-color-primary-dim: light-dark(#3c120a, #ffede9);
--md-sys-color-primary-fixed: light-dark(#703a2f, #ffdad3);
--md-sys-color-primary-fixed-dim: light-dark(#54241b, #ffb4a5);
--md-sys-color-primary-palette-key-color: light-dark(#a6675a, #a6675a);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#3e2621, #ffece8);
--md-sys-color-secondary-container: light-dark(#5f423c, #e1bab2);
--md-sys-color-secondary-dim: light-dark(#301915, #ffede9);
--md-sys-color-secondary-fixed: light-dark(#5f423c, #ffdad3);
--md-sys-color-secondary-fixed-dim: light-dark(#462c27, #e5beb6);
--md-sys-color-secondary-palette-key-color: light-dark(#906f68, #906f68);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f6, #181211);
--md-sys-color-surface-bright: light-dark(#fff8f6, #564e4d);
--md-sys-color-surface-container: light-dark(#ece0dd, #362f2d);
--md-sys-color-surface-container-high: light-dark(#ded2cf, #413a38);
--md-sys-color-surface-container-highest: light-dark(#d0c4c2, #4d4543);
--md-sys-color-surface-container-low: light-dark(#fbeeeb, #241e1d);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#c2b6b4, #181211);
--md-sys-color-surface-tint: light-dark(#894f43, #ffb4a5);
--md-sys-color-surface-variant: light-dark(#f4ded9, #524340);
--md-sys-color-tertiary: light-dark(#382a00, #ffeecb);
--md-sys-color-tertiary-container: light-dark(#5a470b, #dbc07a);
--md-sys-color-tertiary-dim: light-dark(#291e00, #ffefce);
--md-sys-color-tertiary-fixed: light-dark(#5a470b, #fde096);
--md-sys-color-tertiary-fixed-dim: light-dark(#403100, #dfc47d);
--md-sys-color-tertiary-palette-key-color: light-dark(#c3a965, #c3a965);
}