@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(#fff9e7, #151409);
--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(#f6f1de, #323124);
--md-sys-color-inverse-primary: light-dark(#f2b1ef, #804b81);
--md-sys-color-inverse-surface: light-dark(#323124, #e8e2d0);
--md-sys-color-neutral-palette-key-color: light-dark(#7a7768, #7a7768);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7c7860, #7c7860);
--md-sys-color-on-background: light-dark(#1d1c11, #e8e2d0);
--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, #4d1c50);
--md-sys-color-on-primary-container: light-dark(#663368, #ffd6fa);
--md-sys-color-on-primary-fixed: light-dark(#340439, #340439);
--md-sys-color-on-primary-fixed-variant: light-dark(#663368, #663368);
--md-sys-color-on-secondary: light-dark(#ffffff, #243516);
--md-sys-color-on-secondary-container: light-dark(#3a4c2a, #d3eabc);
--md-sys-color-on-secondary-fixed: light-dark(#0f2004, #0f2004);
--md-sys-color-on-secondary-fixed-variant: light-dark(#3a4c2a, #3a4c2a);
--md-sys-color-on-surface: light-dark(#1d1c11, #e8e2d0);
--md-sys-color-on-surface-variant: light-dark(#4a4733, #ccc7ac);
--md-sys-color-on-tertiary: light-dark(#ffffff, #333200);
--md-sys-color-on-tertiary-container: light-dark(#4a490b, #e8e699);
--md-sys-color-on-tertiary-fixed: light-dark(#1d1d00, #1d1d00);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#4a490b, #4a490b);
--md-sys-color-outline: light-dark(#7b7860, #959179);
--md-sys-color-outline-variant: light-dark(#ccc7ac, #4a4733);
--md-sys-color-primary: light-dark(#804b81, #f2b1ef);
--md-sys-color-primary-container: light-dark(#ffd6fa, #663368);
--md-sys-color-primary-dim: light-dark(#733f74, #febcfb);
--md-sys-color-primary-fixed: light-dark(#ffd6fa, #ffd6fa);
--md-sys-color-primary-fixed-dim: light-dark(#f2b1ef, #f2b1ef);
--md-sys-color-primary-palette-key-color: light-dark(#9b639b, #9b639b);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#516440, #b7cea2);
--md-sys-color-secondary-container: light-dark(#d3eabc, #3a4c2a);
--md-sys-color-secondary-dim: light-dark(#455835, #d3eabc);
--md-sys-color-secondary-fixed: light-dark(#d3eabc, #d3eabc);
--md-sys-color-secondary-fixed-dim: light-dark(#b7cea2, #b7cea2);
--md-sys-color-secondary-palette-key-color: light-dark(#697d57, #697d57);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff9e7, #151409);
--md-sys-color-surface-bright: light-dark(#fff9e7, #3b392d);
--md-sys-color-surface-container: light-dark(#f3eedb, #212015);
--md-sys-color-surface-container-high: light-dark(#ede8d6, #2c2a1e);
--md-sys-color-surface-container-highest: light-dark(#e8e2d0, #373529);
--md-sys-color-surface-container-low: light-dark(#f9f4e1, #1d1c11);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #100e05);
--md-sys-color-surface-dim: light-dark(#dfdac8, #151409);
--md-sys-color-surface-tint: light-dark(#804b81, #f2b1ef);
--md-sys-color-surface-variant: light-dark(#e9e3c7, #4a4733);
--md-sys-color-tertiary: light-dark(#626122, #ccca7f);
--md-sys-color-tertiary-container: light-dark(#e8e699, #4a490b);
--md-sys-color-tertiary-dim: light-dark(#565517, #f7f5a6);
--md-sys-color-tertiary-fixed: light-dark(#e8e699, #e8e699);
--md-sys-color-tertiary-fixed-dim: light-dark(#ccca7f, #ccca7f);
--md-sys-color-tertiary-palette-key-color: light-dark(#7b7a38, #7b7a38);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fff9e7, #151409);
--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(#9c9888, #676556);
--md-sys-color-inverse-primary: light-dark(#9f669e, #a66da5);
--md-sys-color-inverse-surface: light-dark(#323124, #e8e2d0);
--md-sys-color-neutral-palette-key-color: light-dark(#7a7768, #7a7768);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7c7860, #7c7860);
--md-sys-color-on-background: light-dark(#949080, #656254);
--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, #451548);
--md-sys-color-on-primary-container: light-dark(#9f669e, #aa70a9);
--md-sys-color-on-primary-fixed: light-dark(#6c396e, #efafec);
--md-sys-color-on-primary-fixed-variant: light-dark(#89538a, #c88cc7);
--md-sys-color-on-secondary: light-dark(#f9ffec, #1d2e10);
--md-sys-color-on-secondary-container: light-dark(#6c805a, #768b63);
--md-sys-color-on-secondary-fixed: light-dark(#3f522f, #b5cb9f);
--md-sys-color-on-secondary-fixed-variant: light-dark(#596c48, #91a77d);
--md-sys-color-on-surface: light-dark(#625f51, #a7a392);
--md-sys-color-on-surface-variant: light-dark(#7f7b64, #88846c);
--md-sys-color-on-tertiary: light-dark(#fffbff, #2c2b00);
--md-sys-color-on-tertiary-container: light-dark(#7e7d3b, #888744);
--md-sys-color-on-tertiary-fixed: light-dark(#4f4f10, #c9c87d);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#6a6929, #a5a35d);
--md-sys-color-outline: light-dark(#b7b298, #58553f);
--md-sys-color-outline-variant: light-dark(#dfd9be, #3d3b27);
--md-sys-color-primary: light-dark(#996199, #b87db6);
--md-sys-color-primary-container: light-dark(#ffc7fb, #58275a);
--md-sys-color-primary-dim: light-dark(#8b548b, #b87db7);
--md-sys-color-primary-fixed: light-dark(#ffc7fb, #723e73);
--md-sys-color-primary-fixed-dim: light-dark(#e8a8e5, #58275a);
--md-sys-color-primary-palette-key-color: light-dark(#9b639b, #9b639b);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#667b55, #82976f);
--md-sys-color-secondary-container: light-dark(#cae0b3, #2d3f1f);
--md-sys-color-secondary-dim: light-dark(#5a6e49, #83986f);
--md-sys-color-secondary-fixed: light-dark(#cae0b3, #445734);
--md-sys-color-secondary-fixed-dim: light-dark(#aec499, #2d3f1f);
--md-sys-color-secondary-palette-key-color: light-dark(#697d57, #697d57);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff9e7, #151409);
--md-sys-color-surface-bright: light-dark(#fff9e7, #3b392d);
--md-sys-color-surface-container: light-dark(#f3eedb, #212015);
--md-sys-color-surface-container-high: light-dark(#ede8d6, #2c2a1e);
--md-sys-color-surface-container-highest: light-dark(#e8e2d0, #373529);
--md-sys-color-surface-container-low: light-dark(#f9f4e1, #1d1c11);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #100e05);
--md-sys-color-surface-dim: light-dark(#dfdac8, #151409);
--md-sys-color-surface-tint: light-dark(#804b81, #f2b1ef);
--md-sys-color-surface-variant: light-dark(#e9e3c7, #4a4733);
--md-sys-color-tertiary: light-dark(#787736, #95944f);
--md-sys-color-tertiary-container: light-dark(#dfdd90, #3d3c00);
--md-sys-color-tertiary-dim: light-dark(#6b6b2b, #96944f);
--md-sys-color-tertiary-fixed: light-dark(#dfdd90, #545315);
--md-sys-color-tertiary-fixed-dim: light-dark(#c2c177, #3d3c00);
--md-sys-color-tertiary-palette-key-color: light-dark(#7b7a38, #7b7a38);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fff9e7, #151409);
--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(#f2b1ef, #673569);
--md-sys-color-inverse-surface: light-dark(#323124, #e8e2d0);
--md-sys-color-neutral-palette-key-color: light-dark(#7a7768, #7a7768);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7c7860, #7c7860);
--md-sys-color-on-background: light-dark(#1d1c11, #e8e2d0);
--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, #1c001f);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #25002a);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #030e00);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #061500);
--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, #0c0c00);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #121200);
--md-sys-color-outline: light-dark(#2f2d1a, #f6f0d4);
--md-sys-color-outline-variant: light-dark(#4c4a35, #c8c3a8);
--md-sys-color-primary: light-dark(#48184b, #ffeafa);
--md-sys-color-primary-container: light-dark(#69366a, #eeaeeb);
--md-sys-color-primary-dim: light-dark(#39093d, #ffebfa);
--md-sys-color-primary-fixed: light-dark(#69366a, #ffd6fa);
--md-sys-color-primary-fixed-dim: light-dark(#4f1f52, #f2b1ef);
--md-sys-color-primary-palette-key-color: light-dark(#9b639b, #9b639b);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#203112, #e1f8c9);
--md-sys-color-secondary-container: light-dark(#3c4f2d, #b4ca9e);
--md-sys-color-secondary-dim: light-dark(#132407, #e1f8ca);
--md-sys-color-secondary-fixed: light-dark(#3c4f2d, #d3eabc);
--md-sys-color-secondary-fixed-dim: light-dark(#263818, #b7cea2);
--md-sys-color-secondary-palette-key-color: light-dark(#697d57, #697d57);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff9e7, #151409);
--md-sys-color-surface-bright: light-dark(#fff9e7, #535043);
--md-sys-color-surface-container: light-dark(#e8e2d0, #323124);
--md-sys-color-surface-container-high: light-dark(#d9d4c3, #3e3c2f);
--md-sys-color-surface-container-highest: light-dark(#cbc7b5, #49473a);
--md-sys-color-surface-container-low: light-dark(#f6f1de, #212015);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#bdb9a8, #151409);
--md-sys-color-surface-tint: light-dark(#804b81, #f2b1ef);
--md-sys-color-surface-variant: light-dark(#e9e3c7, #4a4733);
--md-sys-color-tertiary: light-dark(#2e2e00, #f6f4a5);
--md-sys-color-tertiary-container: light-dark(#4c4b0d, #c8c67c);
--md-sys-color-tertiary-dim: light-dark(#212100, #f7f5a6);
--md-sys-color-tertiary-fixed: light-dark(#4c4b0d, #e8e699);
--md-sys-color-tertiary-fixed-dim: light-dark(#353400, #ccca7f);
--md-sys-color-tertiary-palette-key-color: light-dark(#7b7a38, #7b7a38);
}