@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, #171217);
--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(#faedf5, #352e34);
--md-sys-color-inverse-primary: light-dark(#ffa9ff, #8b418f);
--md-sys-color-inverse-surface: light-dark(#352e34, #ebdfe7);
--md-sys-color-neutral-palette-key-color: light-dark(#7e747b, #7e747b);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#81737e, #81737e);
--md-sys-color-on-background: light-dark(#201a1f, #ebdfe7);
--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, #550c5d);
--md-sys-color-on-primary-container: light-dark(#7d3582, #7d3582);
--md-sys-color-on-primary-fixed: light-dark(#36003d, #36003d);
--md-sys-color-on-primary-fixed-variant: light-dark(#6f2875, #6f2875);
--md-sys-color-on-secondary: light-dark(#ffffff, #432643);
--md-sys-color-on-secondary-container: light-dark(#795778, #d1a9cd);
--md-sys-color-on-secondary-fixed: light-dark(#2c112d, #2c112d);
--md-sys-color-on-secondary-fixed-variant: light-dark(#5b3c5b, #5b3c5b);
--md-sys-color-on-surface: light-dark(#201a1f, #ebdfe7);
--md-sys-color-on-surface-variant: light-dark(#4f434e, #d3c2ce);
--md-sys-color-on-tertiary: light-dark(#ffffff, #4f2500);
--md-sys-color-on-tertiary-container: light-dark(#79461c, #79461c);
--md-sys-color-on-tertiary-fixed: light-dark(#301400, #301400);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#6b3a11, #6b3a11);
--md-sys-color-outline: light-dark(#81737e, #9c8c98);
--md-sys-color-outline-variant: light-dark(#d3c2ce, #4f434e);
--md-sys-color-primary: light-dark(#8b418f, #ffd6fa);
--md-sys-color-primary-container: light-dark(#ffa9ff, #ffa9ff);
--md-sys-color-primary-dim: light-dark(#7d3582, #ffa9ff);
--md-sys-color-primary-fixed: light-dark(#ffd6fa, #ffd6fa);
--md-sys-color-primary-fixed-dim: light-dark(#ffa9ff, #ffa9ff);
--md-sys-color-primary-palette-key-color: light-dark(#a75aaa, #a75aaa);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#755374, #e3badf);
--md-sys-color-secondary-container: light-dark(#fdd3f9, #5b3c5b);
--md-sys-color-secondary-dim: light-dark(#684867, #f5caf0);
--md-sys-color-secondary-fixed: light-dark(#ffd6fa, #ffd6fa);
--md-sys-color-secondary-fixed-dim: light-dark(#e3badf, #e3badf);
--md-sys-color-secondary-palette-key-color: light-dark(#8f6c8d, #8f6c8d);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff7fa, #171217);
--md-sys-color-surface-bright: light-dark(#fff7fa, #3e373d);
--md-sys-color-surface-container: light-dark(#f7eaf2, #241e23);
--md-sys-color-surface-container-high: light-dark(#f1e5ec, #2f282d);
--md-sys-color-surface-container-highest: light-dark(#ebdfe7, #3a3338);
--md-sys-color-surface-container-low: light-dark(#fdf0f8, #201a1f);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #120c11);
--md-sys-color-surface-dim: light-dark(#e3d7de, #171217);
--md-sys-color-surface-tint: light-dark(#8b418f, #ffa9ff);
--md-sys-color-surface-variant: light-dark(#f0ddeb, #4f434e);
--md-sys-color-tertiary: light-dark(#875126, #ffdcc5);
--md-sys-color-tertiary-container: light-dark(#ffb783, #ffb783);
--md-sys-color-tertiary-dim: light-dark(#79461c, #ffb783);
--md-sys-color-tertiary-fixed: light-dark(#ffdcc5, #ffdcc5);
--md-sys-color-tertiary-fixed-dim: light-dark(#ffb783, #ffb783);
--md-sys-color-tertiary-palette-key-color: light-dark(#ffb783, #ffb783);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fff7fa, #171217);
--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(#a0959c, #6b6268);
--md-sys-color-inverse-primary: light-dark(#aa5dac, #b164b4);
--md-sys-color-inverse-surface: light-dark(#352e34, #ebdfe7);
--md-sys-color-neutral-palette-key-color: light-dark(#7e747b, #7e747b);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#81737e, #81737e);
--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, #4d0255);
--md-sys-color-on-primary-container: light-dark(#aa5dad, #b567b8);
--md-sys-color-on-primary-fixed: light-dark(#762e7b, #fca6fc);
--md-sys-color-on-primary-fixed-variant: light-dark(#944998, #d483d6);
--md-sys-color-on-secondary: light-dark(#fffbff, #3c1f3c);
--md-sys-color-on-secondary-container: light-dark(#926e90, #9d789b);
--md-sys-color-on-secondary-fixed: light-dark(#614161, #e0b7dd);
--md-sys-color-on-secondary-fixed-variant: light-dark(#7d5b7c, #bb94b8);
--md-sys-color-on-surface: light-dark(#655d63, #aaa0a7);
--md-sys-color-on-surface-variant: light-dark(#857682, #8e7f8b);
--md-sys-color-on-tertiary: light-dark(#fffbff, #452000);
--md-sys-color-on-tertiary-container: light-dark(#a86c3f, #b37648);
--md-sys-color-on-tertiary-fixed: light-dark(#724016, #fcb481);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#91592d, #d39160);
--md-sys-color-outline: light-dark(#beadba, #5d505b);
--md-sys-color-outline-variant: light-dark(#e6d4e1, #423741);
--md-sys-color-primary: light-dark(#a458a7, #c374c5);
--md-sys-color-primary-container: light-dark(#ffc7fb, #611a67);
--md-sys-color-primary-dim: light-dark(#954b99, #c474c6);
--md-sys-color-primary-fixed: light-dark(#ffc7fb, #7b3380);
--md-sys-color-primary-fixed-dim: light-dark(#f4a0f5, #611a67);
--md-sys-color-primary-palette-key-color: light-dark(#a75aaa, #a75aaa);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#8c698b, #aa85a8);
--md-sys-color-secondary-container: light-dark(#f6ccf2, #4e304e);
--md-sys-color-secondary-dim: light-dark(#7f5d7d, #ab85a8);
--md-sys-color-secondary-fixed: light-dark(#f6ccf2, #664666);
--md-sys-color-secondary-fixed-dim: light-dark(#d9b1d6, #4e304e);
--md-sys-color-secondary-palette-key-color: light-dark(#8f6c8d, #8f6c8d);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff7fa, #171217);
--md-sys-color-surface-bright: light-dark(#fff7fa, #3e373d);
--md-sys-color-surface-container: light-dark(#f7eaf2, #241e23);
--md-sys-color-surface-container-high: light-dark(#f1e5ec, #2f282d);
--md-sys-color-surface-container-highest: light-dark(#ebdfe7, #3a3338);
--md-sys-color-surface-container-low: light-dark(#fdf0f8, #201a1f);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #120c11);
--md-sys-color-surface-dim: light-dark(#e3d7de, #171217);
--md-sys-color-surface-tint: light-dark(#8b418f, #ffa9ff);
--md-sys-color-surface-variant: light-dark(#f0ddeb, #4f434e);
--md-sys-color-tertiary: light-dark(#a1673a, #c28253);
--md-sys-color-tertiary-container: light-dark(#ffcfaf, #5c2e05);
--md-sys-color-tertiary-dim: light-dark(#935b2f, #c28353);
--md-sys-color-tertiary-fixed: light-dark(#ffcfaf, #77441a);
--md-sys-color-tertiary-fixed-dim: light-dark(#f4ae7a, #5c2e05);
--md-sys-color-tertiary-palette-key-color: light-dark(#ffb783, #ffb783);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fff7fa, #171217);
--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(#ffa9ff, #712a76);
--md-sys-color-inverse-surface: light-dark(#352e34, #ebdfe7);
--md-sys-color-neutral-palette-key-color: light-dark(#7e747b, #7e747b);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#81737e, #81737e);
--md-sys-color-on-background: light-dark(#201a1f, #ebdfe7);
--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, #26002a);
--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, #19021c);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #200622);
--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, #210c00);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #200c00);
--md-sys-color-outline: light-dark(#342932, #fdebf8);
--md-sys-color-outline-variant: light-dark(#524550, #cfbecb);
--md-sys-color-primary: light-dark(#500558, #ffeafa);
--md-sys-color-primary-container: light-dark(#722b78, #ffa9ff);
--md-sys-color-primary-dim: light-dark(#3d0043, #ffebfa);
--md-sys-color-primary-fixed: light-dark(#722b78, #ffd6fa);
--md-sys-color-primary-fixed-dim: light-dark(#58105f, #ffa9ff);
--md-sys-color-primary-palette-key-color: light-dark(#a75aaa, #a75aaa);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#3e223f, #ffeafa);
--md-sys-color-secondary-container: light-dark(#5e3e5d, #dfb6db);
--md-sys-color-secondary-dim: light-dark(#301531, #ffebfa);
--md-sys-color-secondary-fixed: light-dark(#5e3e5d, #ffd6fa);
--md-sys-color-secondary-fixed-dim: light-dark(#452846, #e3badf);
--md-sys-color-secondary-palette-key-color: light-dark(#8f6c8d, #8f6c8d);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff7fa, #171217);
--md-sys-color-surface-bright: light-dark(#fff7fa, #564e54);
--md-sys-color-surface-container: light-dark(#ebdfe7, #352e34);
--md-sys-color-surface-container-high: light-dark(#ddd1d8, #41393f);
--md-sys-color-surface-container-highest: light-dark(#cfc3cb, #4c444a);
--md-sys-color-surface-container-low: light-dark(#faedf5, #241e23);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#c1b6bd, #171217);
--md-sys-color-surface-tint: light-dark(#8b418f, #ffa9ff);
--md-sys-color-surface-variant: light-dark(#f0ddeb, #4f434e);
--md-sys-color-tertiary: light-dark(#492200, #ffece2);
--md-sys-color-tertiary-container: light-dark(#6e3d13, #ffb783);
--md-sys-color-tertiary-dim: light-dark(#361700, #ffede3);
--md-sys-color-tertiary-fixed: light-dark(#6e3d13, #ffdcc5);
--md-sys-color-tertiary-fixed-dim: light-dark(#522700, #ffb783);
--md-sys-color-tertiary-palette-key-color: light-dark(#ffb783, #ffb783);
}