@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(#fff8f1, #16130c);
--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(#f8f0e3, #343028);
--md-sys-color-inverse-primary: light-dark(#e9c255, #755b00);
--md-sys-color-inverse-surface: light-dark(#343028, #eae1d5);
--md-sys-color-neutral-palette-key-color: light-dark(#7c766c, #7c766c);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7f7664, #7f7664);
--md-sys-color-on-background: light-dark(#1f1b14, #eae1d5);
--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, #3d2e00);
--md-sys-color-on-primary-container: light-dark(#fffbff, #090500);
--md-sys-color-on-primary-fixed: light-dark(#241a00, #241a00);
--md-sys-color-on-primary-fixed-variant: light-dark(#584400, #584400);
--md-sys-color-on-secondary: light-dark(#ffffff, #3c2f09);
--md-sys-color-on-secondary-container: light-dark(#716136, #c8b381);
--md-sys-color-on-secondary-fixed: light-dark(#241a00, #241a00);
--md-sys-color-on-secondary-fixed-variant: light-dark(#54451d, #54451d);
--md-sys-color-on-surface: light-dark(#1f1b14, #eae1d5);
--md-sys-color-on-surface-variant: light-dark(#4d4636, #d0c5b0);
--md-sys-color-on-tertiary: light-dark(#ffffff, #253600);
--md-sys-color-on-tertiary-container: light-dark(#030600, #030600);
--md-sys-color-on-tertiary-fixed: light-dark(#141f00, #141f00);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#374e00, #374e00);
--md-sys-color-outline: light-dark(#7f7664, #99907d);
--md-sys-color-outline-variant: light-dark(#d0c5b0, #4d4636);
--md-sys-color-primary: light-dark(#725900, #e9c255);
--md-sys-color-primary-container: light-dark(#907000, #af8c22);
--md-sys-color-primary-dim: light-dark(#664f00, #fbd363);
--md-sys-color-primary-fixed: light-dark(#ffdf90, #ffdf90);
--md-sys-color-primary-fixed-dim: light-dark(#e9c255, #e9c255);
--md-sys-color-primary-palette-key-color: light-dark(#937300, #937300);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#6d5d32, #dac591);
--md-sys-color-secondary-container: light-dark(#f4dea8, #54451d);
--md-sys-color-secondary-dim: light-dark(#605128, #f7e0ab);
--md-sys-color-secondary-fixed: light-dark(#f7e0ab, #f7e0ab);
--md-sys-color-secondary-fixed-dim: light-dark(#dac591, #dac591);
--md-sys-color-secondary-palette-key-color: light-dark(#877549, #877549);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f1, #16130c);
--md-sys-color-surface-bright: light-dark(#fff8f1, #3d3930);
--md-sys-color-surface-container: light-dark(#f5ede0, #231f18);
--md-sys-color-surface-container-high: light-dark(#efe7db, #2d2a22);
--md-sys-color-surface-container-highest: light-dark(#eae1d5, #38342c);
--md-sys-color-surface-container-low: light-dark(#fbf2e6, #1f1b14);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #110e07);
--md-sys-color-surface-dim: light-dark(#e1d9cd, #16130c);
--md-sys-color-surface-tint: light-dark(#755b00, #e9c255);
--md-sys-color-surface-variant: light-dark(#ede1cb, #4d4636);
--md-sys-color-tertiary: light-dark(#4d6615, #b3d274);
--md-sys-color-tertiary-container: light-dark(#65802d, #65802d);
--md-sys-color-tertiary-dim: light-dark(#425a07, #dcfd9a);
--md-sys-color-tertiary-fixed: light-dark(#ceee8d, #ceee8d);
--md-sys-color-tertiary-fixed-dim: light-dark(#b3d274, #b3d274);
--md-sys-color-tertiary-palette-key-color: light-dark(#65802d, #65802d);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fff8f1, #16130c);
--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(#9e978c, #69645a);
--md-sys-color-inverse-primary: light-dark(#967604, #9d7c0f);
--md-sys-color-inverse-surface: light-dark(#343028, #eae1d5);
--md-sys-color-neutral-palette-key-color: light-dark(#7c766c, #7c766c);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7f7664, #7f7664);
--md-sys-color-on-background: light-dark(#968f84, #676258);
--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, #352800);
--md-sys-color-on-primary-container: light-dark(#967604, #a18014);
--md-sys-color-on-primary-fixed: light-dark(#5f4900, #e7c052);
--md-sys-color-on-primary-fixed-variant: light-dark(#7f6300, #c09c32);
--md-sys-color-on-secondary: light-dark(#fffbff, #342803);
--md-sys-color-on-secondary-container: light-dark(#8a784b, #958254);
--md-sys-color-on-secondary-fixed: light-dark(#594b22, #d7c28f);
--md-sys-color-on-secondary-fixed-variant: light-dark(#75653a, #b29e6e);
--md-sys-color-on-surface: light-dark(#645e55, #a9a297);
--md-sys-color-on-surface-variant: light-dark(#837a67, #8b826f);
--md-sys-color-on-tertiary: light-dark(#faffe7, #1f2e00);
--md-sys-color-on-tertiary-container: light-dark(#688330, #728e39);
--md-sys-color-on-tertiary-fixed: light-dark(#3c5400, #b0cf72);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#556f1d, #8daa52);
--md-sys-color-outline: light-dark(#bbb19c, #5b5343);
--md-sys-color-outline-variant: light-dark(#e3d8c2, #40392a);
--md-sys-color-primary: light-dark(#907000, #af8c22);
--md-sys-color-primary-container: light-dark(#fdd465, #493800);
--md-sys-color-primary-dim: light-dark(#806400, #af8d23);
--md-sys-color-primary-fixed: light-dark(#fdd465, #654e00);
--md-sys-color-primary-fixed-dim: light-dark(#dfb94c, #493800);
--md-sys-color-primary-palette-key-color: light-dark(#937300, #937300);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#847346, #a28f60);
--md-sys-color-secondary-container: light-dark(#edd7a2, #463812);
--md-sys-color-secondary-dim: light-dark(#77663b, #a28f60);
--md-sys-color-secondary-fixed: light-dark(#edd7a2, #5f4f26);
--md-sys-color-secondary-fixed-dim: light-dark(#d0bb89, #463812);
--md-sys-color-secondary-palette-key-color: light-dark(#877549, #877549);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f1, #16130c);
--md-sys-color-surface-bright: light-dark(#fff8f1, #3d3930);
--md-sys-color-surface-container: light-dark(#f5ede0, #231f18);
--md-sys-color-surface-container-high: light-dark(#efe7db, #2d2a22);
--md-sys-color-surface-container-highest: light-dark(#eae1d5, #38342c);
--md-sys-color-surface-container-low: light-dark(#fbf2e6, #1f1b14);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #110e07);
--md-sys-color-surface-dim: light-dark(#e1d9cd, #16130c);
--md-sys-color-surface-tint: light-dark(#755b00, #e9c255);
--md-sys-color-surface-variant: light-dark(#ede1cb, #4d4636);
--md-sys-color-tertiary: light-dark(#637d2b, #7e9a44);
--md-sys-color-tertiary-container: light-dark(#c5e485, #2d4000);
--md-sys-color-tertiary-dim: light-dark(#56701f, #7e9b45);
--md-sys-color-tertiary-fixed: light-dark(#c5e485, #405905);
--md-sys-color-tertiary-fixed-dim: light-dark(#aac86c, #2d4000);
--md-sys-color-tertiary-palette-key-color: light-dark(#65802d, #65802d);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fff8f1, #16130c);
--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(#e9c255, #5a4500);
--md-sys-color-inverse-surface: light-dark(#343028, #eae1d5);
--md-sys-color-neutral-palette-key-color: light-dark(#7c766c, #7c766c);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7f7664, #7f7664);
--md-sys-color-on-background: light-dark(#1f1b14, #eae1d5);
--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, #090500);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #181000);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #100a00);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #181000);
--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, #030600);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #0b1400);
--md-sys-color-outline: light-dark(#322c1d, #fbefd8);
--md-sys-color-outline-variant: light-dark(#504838, #ccc1ad);
--md-sys-color-primary: light-dark(#382a00, #ffeecc);
--md-sys-color-primary-container: light-dark(#5b4600, #e5be51);
--md-sys-color-primary-dim: light-dark(#291e00, #ffefcf);
--md-sys-color-primary-fixed: light-dark(#5b4600, #ffdf90);
--md-sys-color-primary-fixed-dim: light-dark(#403100, #e9c255);
--md-sys-color-primary-palette-key-color: light-dark(#937300, #937300);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#372b05, #ffeecc);
--md-sys-color-secondary-container: light-dark(#56481f, #d6c18e);
--md-sys-color-secondary-dim: light-dark(#291e00, #ffefcf);
--md-sys-color-secondary-fixed: light-dark(#56481f, #f7e0ab);
--md-sys-color-secondary-fixed-dim: light-dark(#3e310b, #dac591);
--md-sys-color-secondary-palette-key-color: light-dark(#877549, #877549);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f1, #16130c);
--md-sys-color-surface-bright: light-dark(#fff8f1, #544f46);
--md-sys-color-surface-container: light-dark(#eae1d5, #343028);
--md-sys-color-surface-container-high: light-dark(#dbd3c7, #3f3b32);
--md-sys-color-surface-container-highest: light-dark(#cdc5ba, #4b463d);
--md-sys-color-surface-container-low: light-dark(#f8f0e3, #231f18);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#bfb8ac, #16130c);
--md-sys-color-surface-tint: light-dark(#755b00, #e9c255);
--md-sys-color-surface-variant: light-dark(#ede1cb, #4d4636);
--md-sys-color-tertiary: light-dark(#213100, #dcfc99);
--md-sys-color-tertiary-container: light-dark(#395000, #afce71);
--md-sys-color-tertiary-dim: light-dark(#172300, #dcfd9a);
--md-sys-color-tertiary-fixed: light-dark(#395000, #ceee8d);
--md-sys-color-tertiary-fixed-dim: light-dark(#273800, #b3d274);
--md-sys-color-tertiary-palette-key-color: light-dark(#65802d, #65802d);
}