@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(#fdf8fa, #141314);
--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(#f4eff1, #313031);
--md-sys-color-inverse-primary: light-dark(#cbc3d5, #615c6b);
--md-sys-color-inverse-surface: light-dark(#313031, #e6e1e3);
--md-sys-color-neutral-palette-key-color: light-dark(#797678, #797678);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#797678, #797678);
--md-sys-color-on-background: light-dark(#1c1b1d, #e6e1e3);
--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, #332e3c);
--md-sys-color-on-primary-container: light-dark(#494453, #e8dff2);
--md-sys-color-on-primary-fixed: light-dark(#1d1a26, #1d1a26);
--md-sys-color-on-primary-fixed-variant: light-dark(#494453, #494453);
--md-sys-color-on-secondary: light-dark(#ffffff, #322f37);
--md-sys-color-on-secondary-container: light-dark(#49454e, #e7e0eb);
--md-sys-color-on-secondary-fixed: light-dark(#1d1a22, #1d1a22);
--md-sys-color-on-secondary-fixed-variant: light-dark(#49454e, #49454e);
--md-sys-color-on-surface: light-dark(#1c1b1d, #e6e1e3);
--md-sys-color-on-surface-variant: light-dark(#484648, #c9c5c7);
--md-sys-color-on-tertiary: light-dark(#ffffff, #332d41);
--md-sys-color-on-tertiary-container: light-dark(#4a4458, #e8def8);
--md-sys-color-on-tertiary-fixed: light-dark(#1e192b, #1e192b);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#4a4458, #4a4458);
--md-sys-color-outline: light-dark(#797678, #939092);
--md-sys-color-outline-variant: light-dark(#c9c5c7, #484648);
--md-sys-color-primary: light-dark(#615c6b, #cbc3d5);
--md-sys-color-primary-container: light-dark(#e8dff2, #494453);
--md-sys-color-primary-dim: light-dark(#55505f, #d9d1e3);
--md-sys-color-primary-fixed: light-dark(#e8dff2, #e8dff2);
--md-sys-color-primary-fixed-dim: light-dark(#cbc3d5, #cbc3d5);
--md-sys-color-primary-palette-key-color: light-dark(#7a7484, #7a7484);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#615d66, #cac4cf);
--md-sys-color-secondary-container: light-dark(#e7e0eb, #49454e);
--md-sys-color-secondary-dim: light-dark(#55515a, #d9d2dd);
--md-sys-color-secondary-fixed: light-dark(#e7e0eb, #e7e0eb);
--md-sys-color-secondary-fixed-dim: light-dark(#cac4cf, #cac4cf);
--md-sys-color-secondary-palette-key-color: light-dark(#7a757f, #7a757f);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fdf8fa, #141314);
--md-sys-color-surface-bright: light-dark(#fdf8fa, #3a393a);
--md-sys-color-surface-container: light-dark(#f1edee, #201f21);
--md-sys-color-surface-container-high: light-dark(#ece7e9, #2b292b);
--md-sys-color-surface-container-highest: light-dark(#e6e1e3, #363436);
--md-sys-color-surface-container-low: light-dark(#f7f2f4, #1c1b1d);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0f0e0f);
--md-sys-color-surface-dim: light-dark(#ddd9db, #141314);
--md-sys-color-surface-tint: light-dark(#615c6b, #cbc3d5);
--md-sys-color-surface-variant: light-dark(#e6e1e3, #484648);
--md-sys-color-tertiary: light-dark(#625b70, #ccc2db);
--md-sys-color-tertiary-container: light-dark(#e8def8, #4a4458);
--md-sys-color-tertiary-dim: light-dark(#564f64, #eee4fe);
--md-sys-color-tertiary-fixed: light-dark(#e8def8, #e8def8);
--md-sys-color-tertiary-fixed-dim: light-dark(#ccc2db, #ccc2db);
--md-sys-color-tertiary-palette-key-color: light-dark(#7b738a, #7b738a);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fdf8fa, #141314);
--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(#9a9799, #666465);
--md-sys-color-inverse-primary: light-dark(#7d7787, #847e8e);
--md-sys-color-inverse-surface: light-dark(#313031, #e6e1e3);
--md-sys-color-neutral-palette-key-color: light-dark(#797678, #797678);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#797678, #797678);
--md-sys-color-on-background: light-dark(#928f91, #646163);
--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, #2c2835);
--md-sys-color-on-primary-container: light-dark(#7d7787, #888192);
--md-sys-color-on-primary-fixed: light-dark(#4f4a58, #c9c1d3);
--md-sys-color-on-primary-fixed-variant: light-dark(#6a6473, #a49dae);
--md-sys-color-on-secondary: light-dark(#fffbff, #2b2831);
--md-sys-color-on-secondary-container: light-dark(#7d7882, #87828c);
--md-sys-color-on-secondary-fixed: light-dark(#4e4b54, #c8c2cd);
--md-sys-color-on-secondary-fixed-variant: light-dark(#69656e, #a39ea9);
--md-sys-color-on-surface: light-dark(#615e60, #a5a2a4);
--md-sys-color-on-surface-variant: light-dark(#7d7a7c, #858284);
--md-sys-color-on-tertiary: light-dark(#fffbff, #2c273a);
--md-sys-color-on-tertiary-container: light-dark(#7e768d, #888097);
--md-sys-color-on-tertiary-fixed: light-dark(#50495e, #c9c0d9);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#6a6379, #a59cb4);
--md-sys-color-outline: light-dark(#b5b1b3, #555355);
--md-sys-color-outline-variant: light-dark(#dcd8da, #3b393b);
--md-sys-color-primary: light-dark(#787282, #958e9e);
--md-sys-color-primary-container: light-dark(#ded6e8, #3c3846);
--md-sys-color-primary-dim: light-dark(#6b6575, #958e9f);
--md-sys-color-primary-fixed: light-dark(#ded6e8, #544f5d);
--md-sys-color-primary-fixed-dim: light-dark(#c2bacc, #3c3846);
--md-sys-color-primary-palette-key-color: light-dark(#7a7484, #7a7484);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#77737d, #948f99);
--md-sys-color-secondary-container: light-dark(#ddd6e2, #3c3941);
--md-sys-color-secondary-dim: light-dark(#6a6670, #948f99);
--md-sys-color-secondary-fixed: light-dark(#ddd6e2, #534f59);
--md-sys-color-secondary-fixed-dim: light-dark(#c1bbc6, #3c3941);
--md-sys-color-secondary-palette-key-color: light-dark(#7a757f, #7a757f);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fdf8fa, #141314);
--md-sys-color-surface-bright: light-dark(#fdf8fa, #3a393a);
--md-sys-color-surface-container: light-dark(#f1edee, #201f21);
--md-sys-color-surface-container-high: light-dark(#ece7e9, #2b292b);
--md-sys-color-surface-container-highest: light-dark(#e6e1e3, #363436);
--md-sys-color-surface-container-low: light-dark(#f7f2f4, #1c1b1d);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0f0e0f);
--md-sys-color-surface-dim: light-dark(#ddd9db, #141314);
--md-sys-color-surface-tint: light-dark(#615c6b, #cbc3d5);
--md-sys-color-surface-variant: light-dark(#e6e1e3, #484648);
--md-sys-color-tertiary: light-dark(#797187, #958da4);
--md-sys-color-tertiary-container: light-dark(#dfd5ee, #3d374b);
--md-sys-color-tertiary-dim: light-dark(#6c647a, #968da5);
--md-sys-color-tertiary-fixed: light-dark(#dfd5ee, #544e63);
--md-sys-color-tertiary-fixed-dim: light-dark(#c2b9d2, #3d374b);
--md-sys-color-tertiary-palette-key-color: light-dark(#7b738a, #7b738a);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fdf8fa, #141314);
--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(#cbc3d5, #4b4654);
--md-sys-color-inverse-surface: light-dark(#313031, #e6e1e3);
--md-sys-color-neutral-palette-key-color: light-dark(#797678, #797678);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#797678, #797678);
--md-sys-color-on-background: light-dark(#1c1b1d, #e6e1e3);
--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, #0d0915);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #130f1b);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #0c0a11);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #121017);
--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, #0d081a);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #130e20);
--md-sys-color-outline: light-dark(#2d2c2d, #f3eff1);
--md-sys-color-outline-variant: light-dark(#4a494a, #c5c1c3);
--md-sys-color-primary: light-dark(#2e2a37, #f5edff);
--md-sys-color-primary-container: light-dark(#4c4755, #c7bfd1);
--md-sys-color-primary-dim: light-dark(#211d2a, #f6edff);
--md-sys-color-primary-fixed: light-dark(#4c4755, #e8dff2);
--md-sys-color-primary-fixed-dim: light-dark(#35303e, #cbc3d5);
--md-sys-color-primary-palette-key-color: light-dark(#7a7484, #7a7484);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#2e2b33, #f5edf9);
--md-sys-color-secondary-container: light-dark(#4b4851, #c6c0cb);
--md-sys-color-secondary-dim: light-dark(#211e26, #f5eefa);
--md-sys-color-secondary-fixed: light-dark(#4b4851, #e7e0eb);
--md-sys-color-secondary-fixed-dim: light-dark(#34313a, #cac4cf);
--md-sys-color-secondary-palette-key-color: light-dark(#7a757f, #7a757f);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fdf8fa, #141314);
--md-sys-color-surface-bright: light-dark(#fdf8fa, #514f51);
--md-sys-color-surface-container: light-dark(#e6e1e3, #313031);
--md-sys-color-surface-container-high: light-dark(#d7d3d5, #3c3b3c);
--md-sys-color-surface-container-highest: light-dark(#c9c5c7, #484648);
--md-sys-color-surface-container-low: light-dark(#f4eff1, #201f21);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#bbb8b9, #141314);
--md-sys-color-surface-tint: light-dark(#615c6b, #cbc3d5);
--md-sys-color-surface-variant: light-dark(#e6e1e3, #484648);
--md-sys-color-tertiary: light-dark(#2f293c, #f5edff);
--md-sys-color-tertiary-container: light-dark(#4c465a, #c8bed7);
--md-sys-color-tertiary-dim: light-dark(#221c2f, #f6edff);
--md-sys-color-tertiary-fixed: light-dark(#4c465a, #e8def8);
--md-sys-color-tertiary-fixed-dim: light-dark(#363043, #ccc2db);
--md-sys-color-tertiary-palette-key-color: light-dark(#7b738a, #7b738a);
}