@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(#fff8f1, #181306);
--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(#fcefd8, #363020);
--md-sys-color-inverse-primary: light-dark(#f3c000, #755b00);
--md-sys-color-inverse-surface: light-dark(#363020, #ede1ca);
--md-sys-color-neutral-palette-key-color: light-dark(#7f7663, #7f7663);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#80765f, #80765f);
--md-sys-color-on-background: light-dark(#211b0d, #ede1ca);
--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, #3d2e00);
--md-sys-color-on-primary-container: light-dark(#584400, #ffdf90);
--md-sys-color-on-primary-fixed: light-dark(#241a00, #241a00);
--md-sys-color-on-primary-fixed-variant: light-dark(#584400, #584400);
--md-sys-color-on-secondary: light-dark(#ffffff, #383006);
--md-sys-color-on-secondary-container: light-dark(#4f471b, #f0e3a8);
--md-sys-color-on-secondary-fixed: light-dark(#211b00, #211b00);
--md-sys-color-on-secondary-fixed-variant: light-dark(#4f471b, #4f471b);
--md-sys-color-on-surface: light-dark(#211b0d, #ede1ca);
--md-sys-color-on-surface-variant: light-dark(#4f4631, #d2c5aa);
--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(#80765f, #9b9077);
--md-sys-color-outline-variant: light-dark(#d2c5aa, #4f4631);
--md-sys-color-primary: light-dark(#755b00, #f3c000);
--md-sys-color-primary-container: light-dark(#ffdf90, #584400);
--md-sys-color-primary-dim: light-dark(#664f00, #fdc800);
--md-sys-color-primary-fixed: light-dark(#ffdf90, #ffdf90);
--md-sys-color-primary-fixed-dim: light-dark(#f3c000, #f3c000);
--md-sys-color-primary-palette-key-color: light-dark(#fdc800, #fdc800);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#685f30, #d4c78e);
--md-sys-color-secondary-container: light-dark(#f0e3a8, #4f471b);
--md-sys-color-secondary-dim: light-dark(#5b5325, #f0e3a8);
--md-sys-color-secondary-fixed: light-dark(#f0e3a8, #f0e3a8);
--md-sys-color-secondary-fixed-dim: light-dark(#d4c78e, #d4c78e);
--md-sys-color-secondary-palette-key-color: light-dark(#817746, #817746);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f1, #181306);
--md-sys-color-surface-bright: light-dark(#fff8f1, #3f3828);
--md-sys-color-surface-container: light-dark(#f9edd5, #251f11);
--md-sys-color-surface-container-high: light-dark(#f3e7d0, #30291a);
--md-sys-color-surface-container-highest: light-dark(#ede1ca, #3b3424);
--md-sys-color-surface-container-low: light-dark(#fff2db, #211b0d);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #120e03);
--md-sys-color-surface-dim: light-dark(#e5d9c2, #181306);
--md-sys-color-surface-tint: light-dark(#755b00, #f3c000);
--md-sys-color-surface-variant: light-dark(#efe1c5, #4f4631);
--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(#fff8f1, #181306);
--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(#a19783, #6c6451);
--md-sys-color-inverse-primary: light-dark(#967500, #9e7c00);
--md-sys-color-inverse-surface: light-dark(#363020, #ede1ca);
--md-sys-color-neutral-palette-key-color: light-dark(#7f7663, #7f7663);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#80765f, #80765f);
--md-sys-color-on-background: light-dark(#998f7b, #6a614f);
--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, #352800);
--md-sys-color-on-primary-container: light-dark(#967600, #a38000);
--md-sys-color-on-primary-fixed: light-dark(#5f4900, #f0bd00);
--md-sys-color-on-primary-fixed-variant: light-dark(#7f6300, #c59b00);
--md-sys-color-on-secondary: light-dark(#fffbff, #312a01);
--md-sys-color-on-secondary-container: light-dark(#847a49, #8f8452);
--md-sys-color-on-secondary-fixed: light-dark(#554c1f, #d1c48c);
--md-sys-color-on-secondary-fixed-variant: light-dark(#706737, #aca06b);
--md-sys-color-on-surface: light-dark(#665e4c, #aca28d);
--md-sys-color-on-surface-variant: light-dark(#847a62, #8d826a);
--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(#bdb197, #5c533e);
--md-sys-color-outline-variant: light-dark(#e5d8bc, #413926);
--md-sys-color-primary: light-dark(#907000, #b28c00);
--md-sys-color-primary-container: light-dark(#ffd45d, #493800);
--md-sys-color-primary-dim: light-dark(#806400, #b28c00);
--md-sys-color-primary-fixed: light-dark(#ffd45d, #654e00);
--md-sys-color-primary-fixed-dim: light-dark(#e8b700, #493800);
--md-sys-color-primary-palette-key-color: light-dark(#fdc800, #fdc800);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#7f7544, #9c915d);
--md-sys-color-secondary-container: light-dark(#e6d99f, #423a0f);
--md-sys-color-secondary-dim: light-dark(#726838, #9c915e);
--md-sys-color-secondary-fixed: light-dark(#e6d99f, #5a5124);
--md-sys-color-secondary-fixed-dim: light-dark(#cabe86, #423a0f);
--md-sys-color-secondary-palette-key-color: light-dark(#817746, #817746);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f1, #181306);
--md-sys-color-surface-bright: light-dark(#fff8f1, #3f3828);
--md-sys-color-surface-container: light-dark(#f9edd5, #251f11);
--md-sys-color-surface-container-high: light-dark(#f3e7d0, #30291a);
--md-sys-color-surface-container-highest: light-dark(#ede1ca, #3b3424);
--md-sys-color-surface-container-low: light-dark(#fff2db, #211b0d);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #120e03);
--md-sys-color-surface-dim: light-dark(#e5d9c2, #181306);
--md-sys-color-surface-tint: light-dark(#755b00, #f3c000);
--md-sys-color-surface-variant: light-dark(#efe1c5, #4f4631);
--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(#fff8f1, #181306);
--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(#f3c000, #5a4500);
--md-sys-color-inverse-surface: light-dark(#363020, #ede1ca);
--md-sys-color-neutral-palette-key-color: light-dark(#7f7663, #7f7663);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#80765f, #80765f);
--md-sys-color-on-background: light-dark(#211b0d, #ede1ca);
--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, #100a00);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #181000);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #0e0b00);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #151100);
--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(#332b19, #fdefd2);
--md-sys-color-outline-variant: light-dark(#514834, #cec1a7);
--md-sys-color-primary: light-dark(#382a00, #ffeecc);
--md-sys-color-primary-container: light-dark(#5b4600, #eebc00);
--md-sys-color-primary-dim: light-dark(#291e00, #ffefcf);
--md-sys-color-primary-fixed: light-dark(#5b4600, #ffdf90);
--md-sys-color-primary-fixed-dim: light-dark(#403100, #f3c000);
--md-sys-color-primary-palette-key-color: light-dark(#fdc800, #fdc800);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#332c03, #fef0b5);
--md-sys-color-secondary-container: light-dark(#52491d, #cfc38b);
--md-sys-color-secondary-dim: light-dark(#251f00, #fff1b5);
--md-sys-color-secondary-fixed: light-dark(#52491d, #f0e3a8);
--md-sys-color-secondary-fixed-dim: light-dark(#3a3308, #d4c78e);
--md-sys-color-secondary-palette-key-color: light-dark(#817746, #817746);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f1, #181306);
--md-sys-color-surface-bright: light-dark(#fff8f1, #574f3e);
--md-sys-color-surface-container: light-dark(#ede1ca, #363020);
--md-sys-color-surface-container-high: light-dark(#dfd3bd, #423b2a);
--md-sys-color-surface-container-highest: light-dark(#d1c5af, #4d4635);
--md-sys-color-surface-container-low: light-dark(#fcefd8, #251f11);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#c3b8a2, #181306);
--md-sys-color-surface-tint: light-dark(#755b00, #f3c000);
--md-sys-color-surface-variant: light-dark(#efe1c5, #4f4631);
--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);
}