@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(#fff7fa, #171216);
--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(#f9eef4, #352e34);
--md-sys-color-inverse-primary: light-dark(#edb4eb, #7d4e7d);
--md-sys-color-inverse-surface: light-dark(#352e34, #ebdfe6);
--md-sys-color-neutral-palette-key-color: light-dark(#7d757b, #7d757b);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7f747c, #7f747c);
--md-sys-color-on-background: light-dark(#1f1a1f, #ebdfe6);
--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, #4a204c);
--md-sys-color-on-primary-container: light-dark(#633664, #ffd6fb);
--md-sys-color-on-primary-fixed: light-dark(#320936, #320936);
--md-sys-color-on-primary-fixed-variant: light-dark(#633664, #633664);
--md-sys-color-on-secondary: light-dark(#ffffff, #3c2b3b);
--md-sys-color-on-secondary-container: light-dark(#534152, #f5dbf0);
--md-sys-color-on-secondary-fixed: light-dark(#261625, #261625);
--md-sys-color-on-secondary-fixed-variant: light-dark(#534152, #534152);
--md-sys-color-on-surface: light-dark(#1f1a1f, #ebdfe6);
--md-sys-color-on-surface-variant: light-dark(#4d444c, #d0c3cc);
--md-sys-color-on-tertiary: light-dark(#ffffff, #4c261e);
--md-sys-color-on-tertiary-container: light-dark(#673b32, #ffdad3);
--md-sys-color-on-tertiary-fixed: light-dark(#33110b, #33110b);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#673b32, #673b32);
--md-sys-color-outline: light-dark(#7f747c, #998d96);
--md-sys-color-outline-variant: light-dark(#d0c3cc, #4d444c);
--md-sys-color-primary: light-dark(#7d4e7d, #edb4eb);
--md-sys-color-primary-container: light-dark(#ffd6fb, #633664);
--md-sys-color-primary-dim: light-dark(#704271, #f6bcf3);
--md-sys-color-primary-fixed: light-dark(#ffd6fb, #ffd6fb);
--md-sys-color-primary-fixed-dim: light-dark(#edb4eb, #edb4eb);
--md-sys-color-primary-palette-key-color: light-dark(#986698, #986698);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#6c586a, #d8bfd4);
--md-sys-color-secondary-container: light-dark(#f5dbf0, #534152);
--md-sys-color-secondary-dim: light-dark(#604c5e, #f5dbf0);
--md-sys-color-secondary-fixed: light-dark(#f5dbf0, #f5dbf0);
--md-sys-color-secondary-fixed-dim: light-dark(#d8bfd4, #d8bfd4);
--md-sys-color-secondary-palette-key-color: light-dark(#867184, #867184);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff7fa, #171216);
--md-sys-color-surface-bright: light-dark(#fff7fa, #3e373c);
--md-sys-color-surface-container: light-dark(#f6ebf1, #241e23);
--md-sys-color-surface-container-high: light-dark(#f1e5ec, #2e282d);
--md-sys-color-surface-container-highest: light-dark(#ebdfe6, #393338);
--md-sys-color-surface-container-low: light-dark(#fcf0f7, #1f1a1f);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #120d11);
--md-sys-color-surface-dim: light-dark(#e2d7de, #171216);
--md-sys-color-surface-tint: light-dark(#7d4e7d, #edb4eb);
--md-sys-color-surface-variant: light-dark(#eddee8, #4d444c);
--md-sys-color-tertiary: light-dark(#825249, #f6b8ab);
--md-sys-color-tertiary-container: light-dark(#ffdad3, #673b32);
--md-sys-color-tertiary-dim: light-dark(#74473d, #ffc0b3);
--md-sys-color-tertiary-fixed: light-dark(#ffdad3, #ffdad3);
--md-sys-color-tertiary-fixed-dim: light-dark(#f6b8ab, #f6b8ab);
--md-sys-color-tertiary-palette-key-color: light-dark(#9e6a60, #9e6a60);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fff7fa, #171216);
--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(#9f969c, #6a6268);
--md-sys-color-inverse-primary: light-dark(#9a699a, #a26fa2);
--md-sys-color-inverse-surface: light-dark(#352e34, #ebdfe6);
--md-sys-color-neutral-palette-key-color: light-dark(#7d757b, #7d757b);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7f747c, #7f747c);
--md-sys-color-on-background: light-dark(#978d94, #686066);
--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, #421945);
--md-sys-color-on-primary-container: light-dark(#9b699b, #a673a5);
--md-sys-color-on-primary-fixed: light-dark(#693c6a, #eab2e8);
--md-sys-color-on-primary-fixed-variant: light-dark(#855686, #c48ec3);
--md-sys-color-on-secondary: light-dark(#fffbff, #352434);
--md-sys-color-on-secondary-container: light-dark(#897386, #937d91);
--md-sys-color-on-secondary-fixed: light-dark(#594658, #d6bdd2);
--md-sys-color-on-secondary-fixed-variant: light-dark(#746072, #b099ad);
--md-sys-color-on-surface: light-dark(#655d62, #aaa0a6);
--md-sys-color-on-surface-variant: light-dark(#837780, #8b8088);
--md-sys-color-on-tertiary: light-dark(#fffbff, #441f18);
--md-sys-color-on-tertiary-container: light-dark(#a16d63, #ac776c);
--md-sys-color-on-tertiary-fixed: light-dark(#6d4037, #f3b5a9);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#8b5a50, #cb9287);
--md-sys-color-outline: light-dark(#bbaeb7, #5b5159);
--md-sys-color-outline-variant: light-dark(#e3d5de, #40373f);
--md-sys-color-primary: light-dark(#956495, #b37fb3);
--md-sys-color-primary-container: light-dark(#ffc7fc, #552a57);
--md-sys-color-primary-dim: light-dark(#875788, #b480b3);
--md-sys-color-primary-fixed: light-dark(#ffc7fc, #6e416f);
--md-sys-color-primary-fixed-dim: light-dark(#e3abe1, #552a57);
--md-sys-color-primary-palette-key-color: light-dark(#986698, #986698);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#836e81, #a08a9e);
--md-sys-color-secondary-container: light-dark(#ebd1e7, #463445);
--md-sys-color-secondary-dim: light-dark(#766274, #a18a9e);
--md-sys-color-secondary-fixed: light-dark(#ebd1e7, #5e4b5d);
--md-sys-color-secondary-fixed-dim: light-dark(#cfb6cb, #463445);
--md-sys-color-secondary-palette-key-color: light-dark(#867184, #867184);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff7fa, #171216);
--md-sys-color-surface-bright: light-dark(#fff7fa, #3e373c);
--md-sys-color-surface-container: light-dark(#f6ebf1, #241e23);
--md-sys-color-surface-container-high: light-dark(#f1e5ec, #2e282d);
--md-sys-color-surface-container-highest: light-dark(#ebdfe6, #393338);
--md-sys-color-surface-container-low: light-dark(#fcf0f7, #1f1a1f);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #120d11);
--md-sys-color-surface-dim: light-dark(#e2d7de, #171216);
--md-sys-color-surface-tint: light-dark(#7d4e7d, #edb4eb);
--md-sys-color-surface-variant: light-dark(#eddee8, #4d444c);
--md-sys-color-tertiary: light-dark(#9b685d, #ba8378);
--md-sys-color-tertiary-container: light-dark(#ffcec4, #582f27);
--md-sys-color-tertiary-dim: light-dark(#8d5b51, #bb8479);
--md-sys-color-tertiary-fixed: light-dark(#ffcec4, #72453c);
--md-sys-color-tertiary-fixed-dim: light-dark(#ebafa2, #582f27);
--md-sys-color-tertiary-palette-key-color: light-dark(#9e6a60, #9e6a60);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fff7fa, #171216);
--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(#edb4eb, #643866);
--md-sys-color-inverse-surface: light-dark(#352e34, #ebdfe6);
--md-sys-color-neutral-palette-key-color: light-dark(#7d757b, #7d757b);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7f747c, #7f747c);
--md-sys-color-on-background: light-dark(#1f1a1f, #ebdfe6);
--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, #1b001f);
--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, #140614);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #1a0c1b);
--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, #1d0301);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #250703);
--md-sys-color-outline: light-dark(#322a31, #fbecf6);
--md-sys-color-outline-variant: light-dark(#50464e, #ccbfc8);
--md-sys-color-primary: light-dark(#451b48, #ffeafa);
--md-sys-color-primary-container: light-dark(#653967, #e9b0e7);
--md-sys-color-primary-dim: light-dark(#360d3a, #ffebfa);
--md-sys-color-primary-fixed: light-dark(#653967, #ffd6fb);
--md-sys-color-primary-fixed-dim: light-dark(#4c224f, #edb4eb);
--md-sys-color-primary-palette-key-color: light-dark(#986698, #986698);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#372737, #ffeafa);
--md-sys-color-secondary-container: light-dark(#564355, #d4bbd0);
--md-sys-color-secondary-dim: light-dark(#2a1a2a, #ffebfa);
--md-sys-color-secondary-fixed: light-dark(#564355, #f5dbf0);
--md-sys-color-secondary-fixed-dim: light-dark(#3e2d3d, #d8bfd4);
--md-sys-color-secondary-palette-key-color: light-dark(#867184, #867184);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff7fa, #171216);
--md-sys-color-surface-bright: light-dark(#fff7fa, #554e53);
--md-sys-color-surface-container: light-dark(#ebdfe6, #352e34);
--md-sys-color-surface-container-high: light-dark(#dcd1d8, #40393f);
--md-sys-color-surface-container-highest: light-dark(#cec4ca, #4c454a);
--md-sys-color-surface-container-low: light-dark(#f9eef4, #241e23);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#c0b6bc, #171216);
--md-sys-color-surface-tint: light-dark(#7d4e7d, #edb4eb);
--md-sys-color-surface-variant: light-dark(#eddee8, #4d444c);
--md-sys-color-tertiary: light-dark(#47211a, #ffece8);
--md-sys-color-tertiary-container: light-dark(#693e35, #f1b4a8);
--md-sys-color-tertiary-dim: light-dark(#37150e, #ffede9);
--md-sys-color-tertiary-fixed: light-dark(#693e35, #ffdad3);
--md-sys-color-tertiary-fixed-dim: light-dark(#4f2820, #f6b8ab);
--md-sys-color-tertiary-palette-key-color: light-dark(#9e6a60, #9e6a60);
}