@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(#fcf9f1, #13140f);
--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(#f3f1e9, #31312c);
--md-sys-color-inverse-primary: light-dark(#c2cc8a, #5a632c);
--md-sys-color-inverse-surface: light-dark(#31312c, #e5e2db);
--md-sys-color-neutral-palette-key-color: light-dark(#787771, #787771);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#77786a, #77786a);
--md-sys-color-on-background: light-dark(#1c1c17, #e5e2db);
--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, #2c3402);
--md-sys-color-on-primary-container: light-dark(#939e60, #939e60);
--md-sys-color-on-primary-fixed: light-dark(#181e00, #181e00);
--md-sys-color-on-primary-fixed-variant: light-dark(#424b17, #424b17);
--md-sys-color-on-secondary: light-dark(#ffffff, #2f321c);
--md-sys-color-on-secondary-container: light-dark(#61654b, #b7bb9c);
--md-sys-color-on-secondary-fixed: light-dark(#1a1d09, #1a1d09);
--md-sys-color-on-secondary-fixed-variant: light-dark(#454931, #454931);
--md-sys-color-on-surface: light-dark(#1c1c17, #e5e2db);
--md-sys-color-on-surface-variant: light-dark(#46483c, #c7c7b8);
--md-sys-color-on-tertiary: light-dark(#ffffff, #0c381b);
--md-sys-color-on-tertiary-container: light-dark(#76a37d, #76a37d);
--md-sys-color-on-tertiary-fixed: light-dark(#00210b, #00210b);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#254f30, #254f30);
--md-sys-color-outline: light-dark(#77786a, #919283);
--md-sys-color-outline-variant: light-dark(#c7c7b8, #46483c);
--md-sys-color-primary: light-dark(#181e00, #c2cc8a);
--md-sys-color-primary-container: light-dark(#2c3402, #2c3402);
--md-sys-color-primary-dim: light-dark(#4e5721, #ecf7b1);
--md-sys-color-primary-fixed: light-dark(#dee9a4, #dee9a4);
--md-sys-color-primary-fixed-dim: light-dark(#c2cc8a, #c2cc8a);
--md-sys-color-primary-palette-key-color: light-dark(#727c42, #727c42);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#5d6147, #c6c9a9);
--md-sys-color-secondary-container: light-dark(#dfe2c2, #474b33);
--md-sys-color-secondary-dim: light-dark(#51553c, #e2e5c4);
--md-sys-color-secondary-fixed: light-dark(#e2e5c4, #e2e5c4);
--md-sys-color-secondary-fixed-dim: light-dark(#c6c9a9, #c6c9a9);
--md-sys-color-secondary-palette-key-color: light-dark(#75795e, #75795e);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fcf9f1, #13140f);
--md-sys-color-surface-bright: light-dark(#fcf9f1, #393934);
--md-sys-color-surface-container: light-dark(#f0eee6, #20201b);
--md-sys-color-surface-container-high: light-dark(#eae8e0, #2a2a25);
--md-sys-color-surface-container-highest: light-dark(#e5e2db, #353530);
--md-sys-color-surface-container-low: light-dark(#f6f3ec, #1c1c17);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0e0e0a);
--md-sys-color-surface-dim: light-dark(#dcdad2, #13140f);
--md-sys-color-surface-tint: light-dark(#5a632c, #c2cc8a);
--md-sys-color-surface-variant: light-dark(#e4e3d3, #46483c);
--md-sys-color-tertiary: light-dark(#00210b, #a3d2a9);
--md-sys-color-tertiary-container: light-dark(#0c381b, #0c381b);
--md-sys-color-tertiary-dim: light-dark(#315b3b, #ccfdd1);
--md-sys-color-tertiary-fixed: light-dark(#beeec3, #beeec3);
--md-sys-color-tertiary-fixed-dim: light-dark(#a3d2a9, #a3d2a9);
--md-sys-color-tertiary-palette-key-color: light-dark(#0c381b, #0c381b);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fcf9f1, #13140f);
--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(#9a9891, #65655e);
--md-sys-color-inverse-primary: light-dark(#757f45, #7c864b);
--md-sys-color-inverse-surface: light-dark(#31312c, #e5e2db);
--md-sys-color-neutral-palette-key-color: light-dark(#787771, #787771);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#77786a, #77786a);
--md-sys-color-on-background: light-dark(#919089, #63625c);
--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(#fcffe0, #262d00);
--md-sys-color-on-primary-container: light-dark(#757f45, #7f894e);
--md-sys-color-on-primary-fixed: light-dark(#47501c, #bfca88);
--md-sys-color-on-primary-fixed-variant: light-dark(#626b33, #9ba667);
--md-sys-color-on-secondary: light-dark(#fcffe0, #282c16);
--md-sys-color-on-secondary-container: light-dark(#787c61, #83876a);
--md-sys-color-on-secondary-fixed: light-dark(#4a4e36, #c3c7a7);
--md-sys-color-on-secondary-fixed-variant: light-dark(#65694e, #9fa385);
--md-sys-color-on-surface: light-dark(#605f59, #a4a39c);
--md-sys-color-on-surface-variant: light-dark(#7b7c6e, #838476);
--md-sys-color-on-tertiary: light-dark(#f7fff3, #043115);
--md-sys-color-on-tertiary-container: light-dark(#588460, #628e69);
--md-sys-color-on-tertiary-fixed: light-dark(#2b5535, #a1cfa6);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#45704d, #7eab84);
--md-sys-color-outline: light-dark(#b3b3a4, #545549);
--md-sys-color-outline-variant: light-dark(#dadaca, #3a3b30);
--md-sys-color-primary: light-dark(#707a40, #8c9659);
--md-sys-color-primary-container: light-dark(#d4df9b, #363e0a);
--md-sys-color-primary-dim: light-dark(#636d35, #8c965a);
--md-sys-color-primary-fixed: light-dark(#d4df9b, #4c5520);
--md-sys-color-primary-fixed-dim: light-dark(#b8c382, #363e0a);
--md-sys-color-primary-palette-key-color: light-dark(#727c42, #727c42);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#73775c, #8f9376);
--md-sys-color-secondary-container: light-dark(#d8dcbb, #383c25);
--md-sys-color-secondary-dim: light-dark(#666a50, #909477);
--md-sys-color-secondary-fixed: light-dark(#d8dcbb, #4f533a);
--md-sys-color-secondary-fixed-dim: light-dark(#bcc0a1, #383c25);
--md-sys-color-secondary-palette-key-color: light-dark(#75795e, #75795e);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fcf9f1, #13140f);
--md-sys-color-surface-bright: light-dark(#fcf9f1, #393934);
--md-sys-color-surface-container: light-dark(#f0eee6, #20201b);
--md-sys-color-surface-container-high: light-dark(#eae8e0, #2a2a25);
--md-sys-color-surface-container-highest: light-dark(#e5e2db, #353530);
--md-sys-color-surface-container-low: light-dark(#f6f3ec, #1c1c17);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0e0e0a);
--md-sys-color-surface-dim: light-dark(#dcdad2, #13140f);
--md-sys-color-surface-tint: light-dark(#5a632c, #c2cc8a);
--md-sys-color-surface-variant: light-dark(#e4e3d3, #46483c);
--md-sys-color-tertiary: light-dark(#537e5b, #6f9b75);
--md-sys-color-tertiary-container: light-dark(#b5e5ba, #184224);
--md-sys-color-tertiary-dim: light-dark(#47714f, #6f9c76);
--md-sys-color-tertiary-fixed: light-dark(#b5e5ba, #305a39);
--md-sys-color-tertiary-fixed-dim: light-dark(#9ac8a0, #184224);
--md-sys-color-tertiary-palette-key-color: light-dark(#0c381b, #0c381b);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fcf9f1, #13140f);
--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(#c2cc8a, #434c18);
--md-sys-color-inverse-surface: light-dark(#31312c, #e5e2db);
--md-sys-color-neutral-palette-key-color: light-dark(#787771, #787771);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#77786a, #77786a);
--md-sys-color-on-background: light-dark(#1c1c17, #e5e2db);
--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(#e7f2ad, #090d00);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #0f1300);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #090d00);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #0f1302);
--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(#c8f8cd, #000f03);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #001506);
--md-sys-color-outline: light-dark(#2c2d22, #f1f1e0);
--md-sys-color-outline-variant: light-dark(#494a3e, #c3c4b4);
--md-sys-color-primary: light-dark(#181e00, #ebf6b0);
--md-sys-color-primary-container: light-dark(#2c3402, #bec987);
--md-sys-color-primary-dim: light-dark(#1c2200, #ecf7b1);
--md-sys-color-primary-fixed: light-dark(#444d19, #dee9a4);
--md-sys-color-primary-fixed-dim: light-dark(#2e3604, #c2cc8a);
--md-sys-color-primary-palette-key-color: light-dark(#727c42, #727c42);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#2a2e18, #eff3d1);
--md-sys-color-secondary-container: light-dark(#474b33, #c2c5a6);
--md-sys-color-secondary-dim: light-dark(#1e210c, #f0f4d2);
--md-sys-color-secondary-fixed: light-dark(#474b33, #e2e5c4);
--md-sys-color-secondary-fixed-dim: light-dark(#31351e, #c6c9a9);
--md-sys-color-secondary-palette-key-color: light-dark(#75795e, #75795e);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fcf9f1, #13140f);
--md-sys-color-surface-bright: light-dark(#fcf9f1, #51504b);
--md-sys-color-surface-container: light-dark(#e5e2db, #31312c);
--md-sys-color-surface-container-high: light-dark(#d6d4cd, #3c3c36);
--md-sys-color-surface-container-highest: light-dark(#c8c6bf, #474741);
--md-sys-color-surface-container-low: light-dark(#f3f1e9, #20201b);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#bab9b1, #13140f);
--md-sys-color-surface-tint: light-dark(#5a632c, #c2cc8a);
--md-sys-color-surface-variant: light-dark(#e4e3d3, #46483c);
--md-sys-color-tertiary: light-dark(#00210b, #ccfcd0);
--md-sys-color-tertiary-container: light-dark(#0c381b, #9fcea5);
--md-sys-color-tertiary-dim: light-dark(#00260d, #ccfdd1);
--md-sys-color-tertiary-fixed: light-dark(#285232, #beeec3);
--md-sys-color-tertiary-fixed-dim: light-dark(#0f3a1d, #a3d2a9);
--md-sys-color-tertiary-palette-key-color: light-dark(#0c381b, #0c381b);
}