@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(#f7fbec, #10150c);
--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(#eff2e4, #2d3228);
--md-sys-color-inverse-primary: light-dark(#ffb1c8, #904760);
--md-sys-color-inverse-surface: light-dark(#2d3228, #e0e4d6);
--md-sys-color-neutral-palette-key-color: light-dark(#74796d, #74796d);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#727a68, #727a68);
--md-sys-color-on-background: light-dark(#191d14, #e0e4d6);
--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, #581932);
--md-sys-color-on-primary-container: light-dark(#733049, #ffd9e2);
--md-sys-color-on-primary-fixed: light-dark(#3c031d, #3c031d);
--md-sys-color-on-primary-fixed-variant: light-dark(#733049, #733049);
--md-sys-color-on-secondary: light-dark(#ffffff, #0f3726);
--md-sys-color-on-secondary-container: light-dark(#284e3c, #c2ecd4);
--md-sys-color-on-secondary-fixed: light-dark(#002114, #002114);
--md-sys-color-on-secondary-fixed-variant: light-dark(#284e3c, #284e3c);
--md-sys-color-on-surface: light-dark(#191d14, #e0e4d6);
--md-sys-color-on-surface-variant: light-dark(#414939, #c1cab4);
--md-sys-color-on-tertiary: light-dark(#ffffff, #19370f);
--md-sys-color-on-tertiary-container: light-dark(#2f4e23, #c7eeb3);
--md-sys-color-on-tertiary-fixed: light-dark(#042100, #042100);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#2f4e23, #2f4e23);
--md-sys-color-outline: light-dark(#727a67, #8b9480);
--md-sys-color-outline-variant: light-dark(#c1cab4, #414939);
--md-sys-color-primary: light-dark(#904760, #ffb1c8);
--md-sys-color-primary-container: light-dark(#ffd9e2, #733049);
--md-sys-color-primary-dim: light-dark(#823b54, #fca1bd);
--md-sys-color-primary-fixed: light-dark(#ffd9e2, #ffd9e2);
--md-sys-color-primary-fixed-dim: light-dark(#ffb1c8, #ffb1c8);
--md-sys-color-primary-palette-key-color: light-dark(#ad5f79, #ad5f79);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#406653, #a6d0b8);
--md-sys-color-secondary-container: light-dark(#c2ecd4, #284e3c);
--md-sys-color-secondary-dim: light-dark(#345a47, #c2ecd4);
--md-sys-color-secondary-fixed: light-dark(#c2ecd4, #c2ecd4);
--md-sys-color-secondary-fixed-dim: light-dark(#a6d0b8, #a6d0b8);
--md-sys-color-secondary-palette-key-color: light-dark(#587f6a, #587f6a);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f7fbec, #10150c);
--md-sys-color-surface-bright: light-dark(#f7fbec, #363b31);
--md-sys-color-surface-container: light-dark(#ecf0e1, #1d2118);
--md-sys-color-surface-container-high: light-dark(#e6eadb, #272b22);
--md-sys-color-surface-container-highest: light-dark(#e0e4d6, #32362c);
--md-sys-color-surface-container-low: light-dark(#f1f5e7, #191d14);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0b0f08);
--md-sys-color-surface-dim: light-dark(#d8dccd, #10150c);
--md-sys-color-surface-tint: light-dark(#904760, #ffb1c8);
--md-sys-color-surface-variant: light-dark(#dde6d0, #414939);
--md-sys-color-tertiary: light-dark(#466739, #acd199);
--md-sys-color-tertiary-container: light-dark(#c7eeb3, #2f4e23);
--md-sys-color-tertiary-dim: light-dark(#3b5a2e, #d5fcc1);
--md-sys-color-tertiary-fixed: light-dark(#c7eeb3, #c7eeb3);
--md-sys-color-tertiary-fixed-dim: light-dark(#acd199, #acd199);
--md-sys-color-tertiary-palette-key-color: light-dark(#5e804f, #5e804f);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#f7fbec, #10150c);
--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(#959a8d, #61665b);
--md-sys-color-inverse-primary: light-dark(#b0617c, #b86882);
--md-sys-color-inverse-surface: light-dark(#2d3228, #e0e4d6);
--md-sys-color-neutral-palette-key-color: light-dark(#74796d, #74796d);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#727a68, #727a68);
--md-sys-color-on-background: light-dark(#8d9285, #5f6458);
--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, #4f122b);
--md-sys-color-on-primary-container: light-dark(#b1617c, #bc6b86);
--md-sys-color-on-primary-fixed: light-dark(#7a354e, #ffadc5);
--md-sys-color-on-primary-fixed-variant: light-dark(#9a4f68, #dd87a2);
--md-sys-color-on-secondary: light-dark(#f5fff7, #073020);
--md-sys-color-on-secondary-container: light-dark(#5b826e, #658d77);
--md-sys-color-on-secondary-fixed: light-dark(#2e5441, #a4cdb6);
--md-sys-color-on-secondary-fixed-variant: light-dark(#486e5b, #81a993);
--md-sys-color-on-surface: light-dark(#5c6155, #a0a597);
--md-sys-color-on-surface-variant: light-dark(#757e6b, #7e8673);
--md-sys-color-on-tertiary: light-dark(#f8ffee, #123008);
--md-sys-color-on-tertiary-container: light-dark(#618352, #6b8d5c);
--md-sys-color-on-tertiary-fixed: light-dark(#345428, #a9cf97);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#4e6f40, #86aa75);
--md-sys-color-outline: light-dark(#acb5a0, #4f5746);
--md-sys-color-outline-variant: light-dark(#d4dcc6, #353d2d);
--md-sys-color-primary: light-dark(#aa5c76, #cb7893);
--md-sys-color-primary-container: light-dark(#ffcbd9, #64233c);
--md-sys-color-primary-dim: light-dark(#9b506a, #cb7893);
--md-sys-color-primary-fixed: light-dark(#ffcbd9, #803a53);
--md-sys-color-primary-fixed-dim: light-dark(#fea3bf, #64233c);
--md-sys-color-primary-palette-key-color: light-dark(#ad5f79, #ad5f79);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#567d68, #719984);
--md-sys-color-secondary-container: light-dark(#b8e3ca, #1b4130);
--md-sys-color-secondary-dim: light-dark(#49705c, #729a84);
--md-sys-color-secondary-fixed: light-dark(#b8e3ca, #325946);
--md-sys-color-secondary-fixed-dim: light-dark(#9dc6af, #1b4130);
--md-sys-color-secondary-palette-key-color: light-dark(#587f6a, #587f6a);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f7fbec, #10150c);
--md-sys-color-surface-bright: light-dark(#f7fbec, #363b31);
--md-sys-color-surface-container: light-dark(#ecf0e1, #1d2118);
--md-sys-color-surface-container-high: light-dark(#e6eadb, #272b22);
--md-sys-color-surface-container-highest: light-dark(#e0e4d6, #32362c);
--md-sys-color-surface-container-low: light-dark(#f1f5e7, #191d14);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0b0f08);
--md-sys-color-surface-dim: light-dark(#d8dccd, #10150c);
--md-sys-color-surface-tint: light-dark(#904760, #ffb1c8);
--md-sys-color-surface-variant: light-dark(#dde6d0, #414939);
--md-sys-color-tertiary: light-dark(#5c7d4d, #779a67);
--md-sys-color-tertiary-container: light-dark(#bee4aa, #234118);
--md-sys-color-tertiary-dim: light-dark(#4f7142, #789b68);
--md-sys-color-tertiary-fixed: light-dark(#bee4aa, #39592d);
--md-sys-color-tertiary-fixed-dim: light-dark(#a3c890, #234118);
--md-sys-color-tertiary-palette-key-color: light-dark(#5e804f, #5e804f);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#f7fbec, #10150c);
--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(#ffb1c8, #75314a);
--md-sys-color-inverse-surface: light-dark(#2d3228, #e0e4d6);
--md-sys-color-neutral-palette-key-color: light-dark(#74796d, #74796d);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#727a68, #727a68);
--md-sys-color-on-background: light-dark(#191d14, #e0e4d6);
--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, #20000c);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #2b0012);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #000e07);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #00150b);
--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, #010f00);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #021500);
--md-sys-color-outline: light-dark(#272e20, #ebf3dd);
--md-sys-color-outline-variant: light-dark(#444c3b, #bdc6b1);
--md-sys-color-primary: light-dark(#52152e, #ffebef);
--md-sys-color-primary-container: light-dark(#76324b, #ffabc4);
--md-sys-color-primary-dim: light-dark(#410721, #ffecf0);
--md-sys-color-primary-fixed: light-dark(#76324b, #ffd9e2);
--md-sys-color-primary-fixed-dim: light-dark(#5a1c34, #ffb1c8);
--md-sys-color-primary-palette-key-color: light-dark(#ad5f79, #ad5f79);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#0a3322, #cffae1);
--md-sys-color-secondary-container: light-dark(#2a513e, #a2ccb4);
--md-sys-color-secondary-dim: light-dark(#002517, #d0fbe2);
--md-sys-color-secondary-fixed: light-dark(#2a513e, #c2ecd4);
--md-sys-color-secondary-fixed-dim: light-dark(#123929, #a6d0b8);
--md-sys-color-secondary-palette-key-color: light-dark(#587f6a, #587f6a);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f7fbec, #10150c);
--md-sys-color-surface-bright: light-dark(#f7fbec, #4d5247);
--md-sys-color-surface-container: light-dark(#e0e4d6, #2d3228);
--md-sys-color-surface-container-high: light-dark(#d2d6c8, #383d33);
--md-sys-color-surface-container-highest: light-dark(#c4c8ba, #44483e);
--md-sys-color-surface-container-low: light-dark(#eff2e4, #1d2118);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#b6baad, #10150c);
--md-sys-color-surface-tint: light-dark(#904760, #ffb1c8);
--md-sys-color-surface-variant: light-dark(#dde6d0, #414939);
--md-sys-color-tertiary: light-dark(#15330b, #d4fbc0);
--md-sys-color-tertiary-container: light-dark(#315126, #a8cd96);
--md-sys-color-tertiary-dim: light-dark(#072501, #d5fcc1);
--md-sys-color-tertiary-fixed: light-dark(#315126, #c7eeb3);
--md-sys-color-tertiary-fixed-dim: light-dark(#1b3a11, #acd199);
--md-sys-color-tertiary-palette-key-color: light-dark(#5e804f, #5e804f);
}