@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, #442449);
--md-sys-color-on-tertiary-container: light-dark(#68466d, #68466d);
--md-sys-color-on-tertiary-fixed: light-dark(#2d0f33, #2d0f33);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#5c3b61, #5c3b61);
--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(#75527a, #fdd5ff);
--md-sys-color-tertiary-container: light-dark(#e3b8e6, #e3b8e6);
--md-sys-color-tertiary-dim: light-dark(#68466d, #f5c9f8);
--md-sys-color-tertiary-fixed: light-dark(#fed6ff, #fed6ff);
--md-sys-color-tertiary-fixed-dim: light-dark(#e4b9e7, #e4b9e7);
--md-sys-color-tertiary-palette-key-color: light-dark(#e3b8e6, #e3b8e6);
}
: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(#fffbff, #3c1e42);
--md-sys-color-on-tertiary-container: light-dark(#936d97, #9e77a2);
--md-sys-color-on-tertiary-fixed: light-dark(#624067, #e1b6e4);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#7e5a82, #bb93bf);
--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(#8d6891, #ab84af);
--md-sys-color-tertiary-container: light-dark(#f7cbfa, #4e2e54);
--md-sys-color-tertiary-dim: light-dark(#7f5b84, #ab84af);
--md-sys-color-tertiary-fixed: light-dark(#f7cbfa, #67456c);
--md-sys-color-tertiary-fixed-dim: light-dark(#daafdd, #4e2e54);
--md-sys-color-tertiary-palette-key-color: light-dark(#e3b8e6, #e3b8e6);
}
: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, #200427);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #210428);
--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(#3f2045, #ffeafd);
--md-sys-color-tertiary-container: light-dark(#5e3d64, #e3b8e6);
--md-sys-color-tertiary-dim: light-dark(#311337, #ffebfd);
--md-sys-color-tertiary-fixed: light-dark(#5e3d64, #fed6ff);
--md-sys-color-tertiary-fixed-dim: light-dark(#46274c, #e4b9e7);
--md-sys-color-tertiary-palette-key-color: light-dark(#e3b8e6, #e3b8e6);
}