@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(#f8fafa, #111414);
--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(#eff1f1, #2e3131);
--md-sys-color-inverse-primary: light-dark(#93d1db, #256770);
--md-sys-color-inverse-surface: light-dark(#2e3131, #e1e3e3);
--md-sys-color-neutral-palette-key-color: light-dark(#747778, #747778);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#70797b, #70797b);
--md-sys-color-on-background: light-dark(#191c1d, #e1e3e3);
--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, #00363c);
--md-sys-color-on-primary-container: light-dark(#155b64, #155b64);
--md-sys-color-on-primary-fixed: light-dark(#001f24, #001f24);
--md-sys-color-on-primary-fixed-variant: light-dark(#004f57, #004f57);
--md-sys-color-on-secondary: light-dark(#ffffff, #1e3437);
--md-sys-color-on-secondary-container: light-dark(#50666a, #a2b9bd);
--md-sys-color-on-secondary-fixed: light-dark(#071f22, #071f22);
--md-sys-color-on-secondary-fixed-variant: light-dark(#344a4e, #344a4e);
--md-sys-color-on-surface: light-dark(#191c1d, #e1e3e3);
--md-sys-color-on-surface-variant: light-dark(#3f484a, #bfc8ca);
--md-sys-color-on-tertiary: light-dark(#ffffff, #4f2508);
--md-sys-color-on-tertiary-container: light-dark(#784727, #784727);
--md-sys-color-on-tertiary-fixed: light-dark(#321200, #321200);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#6a3b1c, #6a3b1c);
--md-sys-color-outline: light-dark(#70797a, #899294);
--md-sys-color-outline-variant: light-dark(#bfc8ca, #3f484a);
--md-sys-color-primary: light-dark(#256770, #afedf8);
--md-sys-color-primary-container: light-dark(#93d1db, #93d1db);
--md-sys-color-primary-dim: light-dark(#145b64, #b4f3fd);
--md-sys-color-primary-fixed: light-dark(#aeedf7, #aeedf7);
--md-sys-color-primary-fixed-dim: light-dark(#93d1db, #93d1db);
--md-sys-color-primary-palette-key-color: light-dark(#428089, #428089);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#4c6266, #b3cbcf);
--md-sys-color-secondary-container: light-dark(#cce4e8, #344a4e);
--md-sys-color-secondary-dim: light-dark(#40565a, #cfe7eb);
--md-sys-color-secondary-fixed: light-dark(#cfe7eb, #cfe7eb);
--md-sys-color-secondary-fixed-dim: light-dark(#b3cbcf, #b3cbcf);
--md-sys-color-secondary-palette-key-color: light-dark(#647b7f, #647b7f);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f8fafa, #111414);
--md-sys-color-surface-bright: light-dark(#f8fafa, #373a3a);
--md-sys-color-surface-container: light-dark(#eceeee, #1d2021);
--md-sys-color-surface-container-high: light-dark(#e7e8e9, #272a2b);
--md-sys-color-surface-container-highest: light-dark(#e1e3e3, #323536);
--md-sys-color-surface-container-low: light-dark(#f2f4f4, #191c1d);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0c0f0f);
--md-sys-color-surface-dim: light-dark(#d8dadb, #111414);
--md-sys-color-surface-tint: light-dark(#256770, #93d1db);
--md-sys-color-surface-variant: light-dark(#dbe4e6, #3f484a);
--md-sys-color-tertiary: light-dark(#865231, #ffdcca);
--md-sys-color-tertiary-container: light-dark(#fdb890, #fdb890);
--md-sys-color-tertiary-dim: light-dark(#784627, #fcb78f);
--md-sys-color-tertiary-fixed: light-dark(#ffdbc9, #ffdbc9);
--md-sys-color-tertiary-fixed-dim: light-dark(#fcb78f, #fcb78f);
--md-sys-color-tertiary-palette-key-color: light-dark(#fdb890, #fdb890);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#f8fafa, #111414);
--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(#969999, #626565);
--md-sys-color-inverse-primary: light-dark(#45838c, #4c8a93);
--md-sys-color-inverse-surface: light-dark(#2e3131, #e1e3e3);
--md-sys-color-neutral-palette-key-color: light-dark(#747778, #747778);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#70797b, #70797b);
--md-sys-color-on-background: light-dark(#8e9091, #606363);
--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(#f7feff, #002f34);
--md-sys-color-on-primary-container: light-dark(#45838c, #508d97);
--md-sys-color-on-primary-fixed: light-dark(#07545d, #90ced8);
--md-sys-color-on-primary-fixed-variant: light-dark(#2f6f78, #6caab3);
--md-sys-color-on-secondary: light-dark(#f7feff, #172d30);
--md-sys-color-on-secondary-container: light-dark(#677e82, #71888c);
--md-sys-color-on-secondary-fixed: light-dark(#3a5053, #b0c8cc);
--md-sys-color-on-secondary-fixed-variant: light-dark(#546a6e, #8da4a8);
--md-sys-color-on-surface: light-dark(#5d5f60, #a1a3a4);
--md-sys-color-on-surface-variant: light-dark(#737c7e, #7c8586);
--md-sys-color-on-tertiary: light-dark(#fffbff, #461f03);
--md-sys-color-on-tertiary-container: light-dark(#a66c4a, #b17653);
--md-sys-color-on-tertiary-fixed: light-dark(#704021, #f9b58d);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#8f5938, #d1926c);
--md-sys-color-outline: light-dark(#aab4b5, #4d5657);
--md-sys-color-outline-variant: light-dark(#d1dbdc, #333c3d);
--md-sys-color-primary: light-dark(#3f7e87, #5d9aa4);
--md-sys-color-primary-container: light-dark(#a5e3ed, #004148);
--md-sys-color-primary-dim: light-dark(#31717a, #5d9ba4);
--md-sys-color-primary-fixed: light-dark(#a5e3ed, #125962);
--md-sys-color-primary-fixed-dim: light-dark(#89c7d1, #004148);
--md-sys-color-primary-palette-key-color: light-dark(#428089, #428089);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#62787c, #7e9599);
--md-sys-color-secondary-container: light-dark(#c5dde1, #283e41);
--md-sys-color-secondary-dim: light-dark(#556c6f, #7e9599);
--md-sys-color-secondary-fixed: light-dark(#c5dde1, #3f5558);
--md-sys-color-secondary-fixed-dim: light-dark(#aac1c5, #283e41);
--md-sys-color-secondary-palette-key-color: light-dark(#647b7f, #647b7f);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f8fafa, #111414);
--md-sys-color-surface-bright: light-dark(#f8fafa, #373a3a);
--md-sys-color-surface-container: light-dark(#eceeee, #1d2021);
--md-sys-color-surface-container-high: light-dark(#e7e8e9, #272a2b);
--md-sys-color-surface-container-highest: light-dark(#e1e3e3, #323536);
--md-sys-color-surface-container-low: light-dark(#f2f4f4, #191c1d);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0c0f0f);
--md-sys-color-surface-dim: light-dark(#d8dadb, #111414);
--md-sys-color-surface-tint: light-dark(#256770, #93d1db);
--md-sys-color-surface-variant: light-dark(#dbe4e6, #3f484a);
--md-sys-color-tertiary: light-dark(#a06745, #c0835e);
--md-sys-color-tertiary-container: light-dark(#ffcfb5, #5a2e11);
--md-sys-color-tertiary-dim: light-dark(#915b3a, #c0835f);
--md-sys-color-tertiary-fixed: light-dark(#ffcfb5, #764525);
--md-sys-color-tertiary-fixed-dim: light-dark(#f2ae87, #5a2e11);
--md-sys-color-tertiary-palette-key-color: light-dark(#fdb890, #fdb890);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#f8fafa, #111414);
--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(#93d1db, #005059);
--md-sys-color-inverse-surface: light-dark(#2e3131, #e1e3e3);
--md-sys-color-neutral-palette-key-color: light-dark(#747778, #747778);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#70797b, #70797b);
--md-sys-color-on-background: light-dark(#191c1d, #e1e3e3);
--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, #001518);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #001417);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #000e10);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #001417);
--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, #240b00);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #220a00);
--md-sys-color-outline: light-dark(#252e2f, #e8f2f3);
--md-sys-color-outline-variant: light-dark(#424b4c, #bbc4c6);
--md-sys-color-primary: light-dark(#003237, #ccf8ff);
--md-sys-color-primary-container: light-dark(#01515a, #93d1db);
--md-sys-color-primary-dim: light-dark(#002428, #cff8ff);
--md-sys-color-primary-fixed: light-dark(#01515a, #aeedf7);
--md-sys-color-primary-fixed-dim: light-dark(#00393f, #93d1db);
--md-sys-color-primary-palette-key-color: light-dark(#428089, #428089);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#192f33, #dcf4f9);
--md-sys-color-secondary-container: light-dark(#374d50, #afc7cb);
--md-sys-color-secondary-dim: light-dark(#0c2326, #ddf5f9);
--md-sys-color-secondary-fixed: light-dark(#374d50, #cfe7eb);
--md-sys-color-secondary-fixed-dim: light-dark(#20363a, #b3cbcf);
--md-sys-color-secondary-palette-key-color: light-dark(#647b7f, #647b7f);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f8fafa, #111414);
--md-sys-color-surface-bright: light-dark(#f8fafa, #4e5151);
--md-sys-color-surface-container: light-dark(#e1e3e3, #2e3131);
--md-sys-color-surface-container-high: light-dark(#d3d5d5, #393c3c);
--md-sys-color-surface-container-highest: light-dark(#c5c7c7, #444748);
--md-sys-color-surface-container-low: light-dark(#eff1f1, #1d2021);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#b7b9b9, #111414);
--md-sys-color-surface-tint: light-dark(#256770, #93d1db);
--md-sys-color-surface-variant: light-dark(#dbe4e6, #3f484a);
--md-sys-color-tertiary: light-dark(#492105, #ffece3);
--md-sys-color-tertiary-container: light-dark(#6d3d1e, #fdb890);
--md-sys-color-tertiary-dim: light-dark(#381500, #ffede5);
--md-sys-color-tertiary-fixed: light-dark(#6d3d1e, #ffdbc9);
--md-sys-color-tertiary-fixed-dim: light-dark(#51270a, #fcb78f);
--md-sys-color-tertiary-palette-key-color: light-dark(#fdb890, #fdb890);
}