@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, #233600);
--md-sys-color-on-tertiary-container: light-dark(#3d5b00, #3d5b00);
--md-sys-color-on-tertiary-fixed: light-dark(#131f00, #131f00);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#344e00, #344e00);
--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(#476800, #c6f17f);
--md-sys-color-tertiary-container: light-dark(#abd466, #abd466);
--md-sys-color-tertiary-dim: light-dark(#3d5b00, #ccf784);
--md-sys-color-tertiary-fixed: light-dark(#c6f17f, #c6f17f);
--md-sys-color-tertiary-fixed-dim: light-dark(#abd466, #abd466);
--md-sys-color-tertiary-palette-key-color: light-dark(#abd466, #abd466);
}
: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(#faffe8, #1e2f00);
--md-sys-color-on-tertiary-container: light-dark(#618520, #6b8f2a);
--md-sys-color-on-tertiary-fixed: light-dark(#395400, #a9d164);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#4e7108, #86ac44);
--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(#5c7f1a, #779d36);
--md-sys-color-tertiary-container: light-dark(#bde776, #2a4100);
--md-sys-color-tertiary-dim: light-dark(#50720a, #779d36);
--md-sys-color-tertiary-fixed: light-dark(#bde776, #3c5a00);
--md-sys-color-tertiary-fixed-dim: light-dark(#a2ca5e, #2a4100);
--md-sys-color-tertiary-palette-key-color: light-dark(#abd466, #abd466);
}
: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, #0a1400);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #0a1400);
--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(#1f3100, #d3ff8b);
--md-sys-color-tertiary-container: light-dark(#365100, #abd466);
--md-sys-color-tertiary-dim: light-dark(#162300, #d5ff8e);
--md-sys-color-tertiary-fixed: light-dark(#365100, #c6f17f);
--md-sys-color-tertiary-fixed-dim: light-dark(#253800, #abd466);
--md-sys-color-tertiary-palette-key-color: light-dark(#abd466, #abd466);
}