@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(#fbeeec, #362f2e);
--md-sys-color-inverse-primary: light-dark(#ffb4a5, #884f43);
--md-sys-color-inverse-surface: light-dark(#362f2e, #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(#7a4338, #7a4338);
--md-sys-color-on-primary-fixed: light-dark(#360e07, #360e07);
--md-sys-color-on-primary-fixed-variant: light-dark(#6c382e, #6c382e);
--md-sys-color-on-secondary: light-dark(#ffffff, #432a25);
--md-sys-color-on-secondary-container: light-dark(#7a5b55, #d2ada5);
--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, #00382f);
--md-sys-color-on-tertiary-container: light-dark(#1d5c50, #1d5c50);
--md-sys-color-on-tertiary-fixed: light-dark(#00201b, #00201b);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#0b5045, #0b5045);
--md-sys-color-outline: light-dark(#857370, #9f8c89);
--md-sys-color-outline-variant: light-dark(#d7c2be, #524340);
--md-sys-color-primary: light-dark(#884f43, #ffdad3);
--md-sys-color-primary-container: light-dark(#ffb4a5, #ffb4a5);
--md-sys-color-primary-dim: light-dark(#7a4338, #ffb4a5);
--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(#a5675a, #a5675a);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#755751, #e5beb6);
--md-sys-color-secondary-container: light-dark(#ffd7cf, #5c403a);
--md-sys-color-secondary-dim: light-dark(#684b46, #f1c9c1);
--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(#906f69, #906f69);
--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(#e3d7d5, #181211);
--md-sys-color-surface-tint: light-dark(#884f43, #ffb4a5);
--md-sys-color-surface-variant: light-dark(#f4ded9, #524340);
--md-sys-color-tertiary: light-dark(#2b685c, #b0eedf);
--md-sys-color-tertiary-container: light-dark(#95d2c3, #95d2c3);
--md-sys-color-tertiary-dim: light-dark(#1d5c50, #b6f5e5);
--md-sys-color-tertiary-fixed: light-dark(#b1efdf, #b1efdf);
--md-sys-color-tertiary-fixed-dim: light-dark(#95d2c3, #95d2c3);
--md-sys-color-tertiary-palette-key-color: light-dark(#95d2c3, #95d2c3);
}
: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(#a8695d, #b07063);
--md-sys-color-inverse-surface: light-dark(#362f2e, #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(#a86a5d, #b47366);
--md-sys-color-on-primary-fixed: light-dark(#733d33, #fcb2a3);
--md-sys-color-on-primary-fixed-variant: light-dark(#92574b, #d48f81);
--md-sys-color-on-secondary: light-dark(#fffbff, #3b241f);
--md-sys-color-on-secondary-container: light-dark(#93726c, #9e7c76);
--md-sys-color-on-secondary-fixed: light-dark(#624540, #e2bbb4);
--md-sys-color-on-secondary-fixed-variant: light-dark(#7e5f59, #bc9891);
--md-sys-color-on-surface: light-dark(#665d5c, #aba19e);
--md-sys-color-on-surface-variant: light-dark(#897773, #917f7b);
--md-sys-color-on-tertiary: light-dark(#f4fffa, #003028);
--md-sys-color-on-tertiary-container: light-dark(#498477, #538f82);
--md-sys-color-on-tertiary-fixed: light-dark(#14564a, #93d0c1);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#347064, #6fab9d);
--md-sys-color-outline: light-dark(#c2ada9, #60504d);
--md-sys-color-outline-variant: light-dark(#ead4d0, #453734);
--md-sys-color-primary: light-dark(#a26458, #c38072);
--md-sys-color-primary-container: light-dark(#ffcec4, #5d2c22);
--md-sys-color-primary-dim: light-dark(#94584c, #c38073);
--md-sys-color-primary-fixed: light-dark(#ffcec4, #794237);
--md-sys-color-primary-fixed-dim: light-dark(#f5ab9c, #5d2c22);
--md-sys-color-primary-palette-key-color: light-dark(#a5675a, #a5675a);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#8d6d67, #ac8982);
--md-sys-color-secondary-container: light-dark(#f8d0c8, #4e342e);
--md-sys-color-secondary-dim: light-dark(#80615a, #ac8982);
--md-sys-color-secondary-fixed: light-dark(#f8d0c8, #674a44);
--md-sys-color-secondary-fixed-dim: light-dark(#dbb4ad, #4e342e);
--md-sys-color-secondary-palette-key-color: light-dark(#906f69, #906f69);
--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(#e3d7d5, #181211);
--md-sys-color-surface-tint: light-dark(#884f43, #ffb4a5);
--md-sys-color-surface-variant: light-dark(#f4ded9, #524340);
--md-sys-color-tertiary: light-dark(#437f72, #609c8e);
--md-sys-color-tertiary-container: light-dark(#a7e5d6, #004238);
--md-sys-color-tertiary-dim: light-dark(#367266, #619c8e);
--md-sys-color-tertiary-fixed: light-dark(#a7e5d6, #1b5b4f);
--md-sys-color-tertiary-fixed-dim: light-dark(#8cc9ba, #004238);
--md-sys-color-tertiary-palette-key-color: light-dark(#95d2c3, #95d2c3);
}
: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, #6e392f);
--md-sys-color-inverse-surface: light-dark(#362f2e, #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, #280501);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #280502);
--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, #001410);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #001510);
--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(#6f3a30, #ffb4a5);
--md-sys-color-primary-dim: light-dark(#3b120a, #ffede9);
--md-sys-color-primary-fixed: light-dark(#6f3a30, #ffdad3);
--md-sys-color-primary-fixed-dim: light-dark(#54251b, #ffb4a5);
--md-sys-color-primary-palette-key-color: light-dark(#a5675a, #a5675a);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#3e2621, #ffece8);
--md-sys-color-secondary-container: light-dark(#5e423d, #e1bab2);
--md-sys-color-secondary-dim: light-dark(#301a15, #ffede9);
--md-sys-color-secondary-fixed: light-dark(#5e423d, #ffdad3);
--md-sys-color-secondary-fixed-dim: light-dark(#452c27, #e5beb6);
--md-sys-color-secondary-palette-key-color: light-dark(#906f69, #906f69);
--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, #362f2e);
--md-sys-color-surface-container-high: light-dark(#ded2cf, #413a38);
--md-sys-color-surface-container-highest: light-dark(#d0c4c2, #4d4544);
--md-sys-color-surface-container-low: light-dark(#fbeeec, #241e1d);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#c1b6b4, #181211);
--md-sys-color-surface-tint: light-dark(#884f43, #ffb4a5);
--md-sys-color-surface-variant: light-dark(#f4ded9, #524340);
--md-sys-color-tertiary: light-dark(#00332b, #befded);
--md-sys-color-tertiary-container: light-dark(#105247, #95d2c3);
--md-sys-color-tertiary-dim: light-dark(#00251e, #bffded);
--md-sys-color-tertiary-fixed: light-dark(#105247, #b1efdf);
--md-sys-color-tertiary-fixed-dim: light-dark(#003a31, #95d2c3);
--md-sys-color-tertiary-palette-key-color: light-dark(#95d2c3, #95d2c3);
}