@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(#c2cc8b, #5a632d);
--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, #2c3403);
--md-sys-color-on-primary-container: light-dark(#4e5622, #4e5622);
--md-sys-color-on-primary-fixed: light-dark(#191e00, #191e00);
--md-sys-color-on-primary-fixed-variant: light-dark(#434b17, #434b17);
--md-sys-color-on-secondary: light-dark(#ffffff, #2f321c);
--md-sys-color-on-secondary-container: light-dark(#61654b, #b4b899);
--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(#47483c, #c8c7b8);
--md-sys-color-on-tertiary: light-dark(#ffffff, #05381f);
--md-sys-color-on-tertiary-container: light-dark(#2d5b3f, #2d5b3f);
--md-sys-color-on-tertiary-fixed: light-dark(#00210f, #00210f);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#214f34, #214f34);
--md-sys-color-outline: light-dark(#77786a, #919283);
--md-sys-color-outline-variant: light-dark(#c8c7b8, #47483c);
--md-sys-color-primary: light-dark(#5a632d, #dee8a5);
--md-sys-color-primary-container: light-dark(#c2cc8b, #c2cc8b);
--md-sys-color-primary-dim: light-dark(#4e5722, #edf7b2);
--md-sys-color-primary-fixed: light-dark(#dee9a5, #dee9a5);
--md-sys-color-primary-fixed-dim: light-dark(#c2cc8b, #c2cc8b);
--md-sys-color-primary-palette-key-color: light-dark(#737c43, #737c43);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#5d6147, #c6c9aa);
--md-sys-color-secondary-container: light-dark(#dfe2c2, #454931);
--md-sys-color-secondary-dim: light-dark(#51553c, #e2e5c5);
--md-sys-color-secondary-fixed: light-dark(#e2e5c5, #e2e5c5);
--md-sys-color-secondary-fixed-dim: light-dark(#c6c9aa, #c6c9aa);
--md-sys-color-secondary-palette-key-color: light-dark(#76795e, #76795e);
--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(#5a632d, #c2cc8b);
--md-sys-color-surface-variant: light-dark(#e4e3d3, #47483c);
--md-sys-color-tertiary: light-dark(#3a684a, #bbeec9);
--md-sys-color-tertiary-container: light-dark(#a0d2ae, #a0d2ae);
--md-sys-color-tertiary-dim: light-dark(#2e5c3f, #c9fdd7);
--md-sys-color-tertiary-fixed: light-dark(#bbefc9, #bbefc9);
--md-sys-color-tertiary-fixed-dim: light-dark(#a0d2ae, #a0d2ae);
--md-sys-color-tertiary-palette-key-color: light-dark(#a0d2ae, #a0d2ae);
}
: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(#9a9892, #65655f);
--md-sys-color-inverse-primary: light-dark(#757f46, #7c854c);
--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(#91908a, #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(#fdffe0, #262d00);
--md-sys-color-on-primary-container: light-dark(#767f46, #80894f);
--md-sys-color-on-primary-fixed: light-dark(#48501c, #c0ca89);
--md-sys-color-on-primary-fixed-variant: light-dark(#626b34, #9ca568);
--md-sys-color-on-secondary: light-dark(#fdffe0, #282c16);
--md-sys-color-on-secondary-container: light-dark(#797c61, #83866b);
--md-sys-color-on-secondary-fixed: light-dark(#4b4e36, #c3c7a8);
--md-sys-color-on-secondary-fixed-variant: light-dark(#65694f, #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(#f6fff5, #003119);
--md-sys-color-on-tertiary-container: light-dark(#558465, #5f8e6e);
--md-sys-color-on-tertiary-fixed: light-dark(#275539, #9ed0ac);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#427052, #7bab89);
--md-sys-color-outline: light-dark(#b3b3a4, #545549);
--md-sys-color-outline-variant: light-dark(#dadaca, #3a3b30);
--md-sys-color-primary: light-dark(#707941, #8c965a);
--md-sys-color-primary-container: light-dark(#d5df9c, #363e0b);
--md-sys-color-primary-dim: light-dark(#646c35, #8d965b);
--md-sys-color-primary-fixed: light-dark(#d5df9c, #4d5521);
--md-sys-color-primary-fixed-dim: light-dark(#b9c383, #363e0b);
--md-sys-color-primary-palette-key-color: light-dark(#737c43, #737c43);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#73775c, #909377);
--md-sys-color-secondary-container: light-dark(#d8dbbc, #393c25);
--md-sys-color-secondary-dim: light-dark(#676a50, #909477);
--md-sys-color-secondary-fixed: light-dark(#d8dbbc, #50533b);
--md-sys-color-secondary-fixed-dim: light-dark(#bcc0a1, #393c25);
--md-sys-color-secondary-palette-key-color: light-dark(#76795e, #76795e);
--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(#5a632d, #c2cc8b);
--md-sys-color-surface-variant: light-dark(#e4e3d3, #47483c);
--md-sys-color-tertiary: light-dark(#507f60, #6c9b7a);
--md-sys-color-tertiary-container: light-dark(#b2e5c0, #134228);
--md-sys-color-tertiary-dim: light-dark(#437253, #6c9c7b);
--md-sys-color-tertiary-fixed: light-dark(#b2e5c0, #2c5a3e);
--md-sys-color-tertiary-fixed-dim: light-dark(#97c9a5, #134228);
--md-sys-color-tertiary-palette-key-color: light-dark(#a0d2ae, #a0d2ae);
}
: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(#c2cc8b, #444c19);
--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(#ffffff, #0f1300);
--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, #0a0d00);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #101302);
--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, #001508);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #001508);
--md-sys-color-outline: light-dark(#2c2d22, #f1f1e0);
--md-sys-color-outline-variant: light-dark(#494a3e, #c4c3b4);
--md-sys-color-primary: light-dark(#282f00, #ecf6b1);
--md-sys-color-primary-container: light-dark(#454d1a, #c2cc8b);
--md-sys-color-primary-dim: light-dark(#1c2200, #edf7b2);
--md-sys-color-primary-fixed: light-dark(#454d1a, #dee9a5);
--md-sys-color-primary-fixed-dim: light-dark(#2f3604, #c2cc8b);
--md-sys-color-primary-palette-key-color: light-dark(#737c43, #737c43);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#2b2e18, #f0f3d2);
--md-sys-color-secondary-container: light-dark(#484b33, #c2c5a6);
--md-sys-color-secondary-dim: light-dark(#1e210d, #f0f3d2);
--md-sys-color-secondary-fixed: light-dark(#484b33, #e2e5c5);
--md-sys-color-secondary-fixed-dim: light-dark(#31351e, #c6c9aa);
--md-sys-color-secondary-palette-key-color: light-dark(#76795e, #76795e);
--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, #474742);
--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(#bab9b2, #13140f);
--md-sys-color-surface-tint: light-dark(#5a632d, #c2cc8b);
--md-sys-color-surface-variant: light-dark(#e4e3d3, #47483c);
--md-sys-color-tertiary: light-dark(#00341b, #c9fcd6);
--md-sys-color-tertiary-container: light-dark(#245236, #a0d2ae);
--md-sys-color-tertiary-dim: light-dark(#002512, #c9fdd7);
--md-sys-color-tertiary-fixed: light-dark(#245236, #bbefc9);
--md-sys-color-tertiary-fixed-dim: light-dark(#083b21, #a0d2ae);
--md-sys-color-tertiary-palette-key-color: light-dark(#a0d2ae, #a0d2ae);
}