@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, #59632d);
--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(#77786b, #77786b);
--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(#040600, #040600);
--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, #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(#46483c, #c7c7b8);
--md-sys-color-on-tertiary: light-dark(#ffffff, #432549);
--md-sys-color-on-tertiary-container: light-dark(#fffbff, #110017);
--md-sys-color-on-tertiary-fixed: light-dark(#2c0f33, #2c0f33);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#5b3b61, #5b3b61);
--md-sys-color-outline: light-dark(#77786b, #919283);
--md-sys-color-outline-variant: light-dark(#c7c7b8, #46483c);
--md-sys-color-primary: light-dark(#59632d, #c2cc8b);
--md-sys-color-primary-container: light-dark(#727c43, #727c43);
--md-sys-color-primary-dim: light-dark(#4e5722, #ecf7b2);
--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(#727c43, #727c43);
--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(#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(#59632d, #c2cc8b);
--md-sys-color-surface-variant: light-dark(#e4e3d3, #46483c);
--md-sys-color-tertiary: light-dark(#725077, #e3b9e6);
--md-sys-color-tertiary-container: light-dark(#8c6891, #aa84af);
--md-sys-color-tertiary-dim: light-dark(#68476d, #facffe);
--md-sys-color-tertiary-fixed: light-dark(#fdd6ff, #fdd6ff);
--md-sys-color-tertiary-fixed-dim: light-dark(#e3b9e6, #e3b9e6);
--md-sys-color-tertiary-palette-key-color: light-dark(#8f6b94, #8f6b94);
}
: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(#757f45, #7c864c);
--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(#77786b, #77786b);
--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(#fcffe0, #252d00);
--md-sys-color-on-primary-container: light-dark(#757f46, #7f894f);
--md-sys-color-on-primary-fixed: light-dark(#47501c, #bfca89);
--md-sys-color-on-primary-fixed-variant: light-dark(#616b34, #9ba668);
--md-sys-color-on-secondary: light-dark(#fcffe0, #282c16);
--md-sys-color-on-secondary-container: light-dark(#787c61, #83876b);
--md-sys-color-on-secondary-fixed: light-dark(#4a4e36, #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(#fffbff, #3c1e42);
--md-sys-color-on-tertiary-container: light-dark(#926e97, #9d78a1);
--md-sys-color-on-tertiary-fixed: light-dark(#614067, #e0b7e4);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#7d5a82, #ba93bf);
--md-sys-color-outline: light-dark(#b3b3a4, #545549);
--md-sys-color-outline-variant: light-dark(#dadaca, #3a3b30);
--md-sys-color-primary: light-dark(#707a41, #8c965a);
--md-sys-color-primary-container: light-dark(#d4df9c, #353e0b);
--md-sys-color-primary-dim: light-dark(#636d35, #8c975b);
--md-sys-color-primary-fixed: light-dark(#d4df9c, #4c5521);
--md-sys-color-primary-fixed-dim: light-dark(#b8c383, #353e0b);
--md-sys-color-primary-palette-key-color: light-dark(#727c43, #727c43);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#73775c, #8f9377);
--md-sys-color-secondary-container: light-dark(#d8dcbc, #383c25);
--md-sys-color-secondary-dim: light-dark(#666a50, #909477);
--md-sys-color-secondary-fixed: light-dark(#d8dcbc, #4f533b);
--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(#59632d, #c2cc8b);
--md-sys-color-surface-variant: light-dark(#e4e3d3, #46483c);
--md-sys-color-tertiary: light-dark(#8c6891, #aa84af);
--md-sys-color-tertiary-container: light-dark(#f6cbf9, #4d2f53);
--md-sys-color-tertiary-dim: light-dark(#7f5c84, #aa84af);
--md-sys-color-tertiary-fixed: light-dark(#f6cbf9, #66456c);
--md-sys-color-tertiary-fixed-dim: light-dark(#d9b0dd, #4d2f53);
--md-sys-color-tertiary-palette-key-color: light-dark(#8f6b94, #8f6b94);
}
: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, #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(#77786b, #77786b);
--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, #040600);
--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(#ffffff, #110017);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #200528);
--md-sys-color-outline: light-dark(#2c2d22, #f1f1e0);
--md-sys-color-outline-variant: light-dark(#494a3e, #c3c4b4);
--md-sys-color-primary: light-dark(#283000, #ebf6b1);
--md-sys-color-primary-container: light-dark(#444d1a, #bec988);
--md-sys-color-primary-dim: light-dark(#1c2200, #ecf7b2);
--md-sys-color-primary-fixed: light-dark(#444d1a, #dee9a5);
--md-sys-color-primary-fixed-dim: light-dark(#2e3604, #c2cc8b);
--md-sys-color-primary-palette-key-color: light-dark(#727c43, #727c43);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#2a2e18, #eff3d2);
--md-sys-color-secondary-container: light-dark(#474b33, #c2c5a6);
--md-sys-color-secondary-dim: light-dark(#1e210d, #f0f3d2);
--md-sys-color-secondary-fixed: light-dark(#474b33, #e2e5c5);
--md-sys-color-secondary-fixed-dim: light-dark(#31351e, #c6c9aa);
--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(#bab9b2, #13140f);
--md-sys-color-surface-tint: light-dark(#59632d, #c2cc8b);
--md-sys-color-surface-variant: light-dark(#e4e3d3, #46483c);
--md-sys-color-tertiary: light-dark(#3e2145, #ffeafd);
--md-sys-color-tertiary-container: light-dark(#5e3e63, #deb5e2);
--md-sys-color-tertiary-dim: light-dark(#301437, #ffebfd);
--md-sys-color-tertiary-fixed: light-dark(#5e3e63, #fdd6ff);
--md-sys-color-tertiary-fixed-dim: light-dark(#45274c, #e3b9e6);
--md-sys-color-tertiary-palette-key-color: light-dark(#8f6b94, #8f6b94);
}