@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(#fef8f4, #151311);
--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(#f5f0eb, #32302d);
--md-sys-color-inverse-primary: light-dark(#d2c5aa, #675d47);
--md-sys-color-inverse-surface: light-dark(#32302d, #e7e2dd);
--md-sys-color-neutral-palette-key-color: light-dark(#7a7673, #7a7673);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7a7673, #7a7673);
--md-sys-color-on-background: light-dark(#1d1b19, #e7e2dd);
--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, #37301d);
--md-sys-color-on-primary-container: light-dark(#4f4631, #efe1c5);
--md-sys-color-on-primary-fixed: light-dark(#211b0a, #211b0a);
--md-sys-color-on-primary-fixed-variant: light-dark(#4f4631, #4f4631);
--md-sys-color-on-secondary: light-dark(#ffffff, #353024);
--md-sys-color-on-secondary-container: light-dark(#4c4639, #ece1cf);
--md-sys-color-on-secondary-fixed: light-dark(#201b10, #201b10);
--md-sys-color-on-secondary-fixed-variant: light-dark(#4c4639, #4c4639);
--md-sys-color-on-surface: light-dark(#1d1b19, #e7e2dd);
--md-sys-color-on-surface-variant: light-dark(#494643, #cac6c1);
--md-sys-color-on-tertiary: light-dark(#ffffff, #392f15);
--md-sys-color-on-tertiary-container: light-dark(#51462a, #f2e1bb);
--md-sys-color-on-tertiary-fixed: light-dark(#231b04, #231b04);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#51462a, #51462a);
--md-sys-color-outline: light-dark(#7a7673, #94908c);
--md-sys-color-outline-variant: light-dark(#cac6c1, #494643);
--md-sys-color-primary: light-dark(#675d47, #d2c5aa);
--md-sys-color-primary-container: light-dark(#efe1c5, #4f4631);
--md-sys-color-primary-dim: light-dark(#5b523c, #e1d3b8);
--md-sys-color-primary-fixed: light-dark(#efe1c5, #efe1c5);
--md-sys-color-primary-fixed-dim: light-dark(#d2c5aa, #d2c5aa);
--md-sys-color-primary-palette-key-color: light-dark(#80765f, #80765f);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#645e4f, #cfc5b4);
--md-sys-color-secondary-container: light-dark(#ece1cf, #4c4639);
--md-sys-color-secondary-dim: light-dark(#585244, #ddd3c1);
--md-sys-color-secondary-fixed: light-dark(#ece1cf, #ece1cf);
--md-sys-color-secondary-fixed-dim: light-dark(#cfc5b4, #cfc5b4);
--md-sys-color-secondary-palette-key-color: light-dark(#7e7667, #7e7667);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fef8f4, #151311);
--md-sys-color-surface-bright: light-dark(#fef8f4, #3b3936);
--md-sys-color-surface-container: light-dark(#f2ede8, #211f1d);
--md-sys-color-surface-container-high: light-dark(#ede7e3, #2c2a27);
--md-sys-color-surface-container-highest: light-dark(#e7e2dd, #363431);
--md-sys-color-surface-container-low: light-dark(#f8f3ee, #1d1b19);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0f0e0c);
--md-sys-color-surface-dim: light-dark(#ded9d5, #151311);
--md-sys-color-surface-tint: light-dark(#675d47, #d2c5aa);
--md-sys-color-surface-variant: light-dark(#e7e2dd, #494643);
--md-sys-color-tertiary: light-dark(#695d3f, #d5c5a0);
--md-sys-color-tertiary-container: light-dark(#f2e1bb, #51462a);
--md-sys-color-tertiary-dim: light-dark(#5d5134, #f8e7c0);
--md-sys-color-tertiary-fixed: light-dark(#f2e1bb, #f2e1bb);
--md-sys-color-tertiary-fixed-dim: light-dark(#d5c5a0, #d5c5a0);
--md-sys-color-tertiary-palette-key-color: light-dark(#837656, #837656);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fef8f4, #151311);
--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(#9b9794, #676460);
--md-sys-color-inverse-primary: light-dark(#837961, #8a7f68);
--md-sys-color-inverse-surface: light-dark(#32302d, #e7e2dd);
--md-sys-color-neutral-palette-key-color: light-dark(#7a7673, #7a7673);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7a7673, #7a7673);
--md-sys-color-on-background: light-dark(#938f8c, #65625e);
--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, #302917);
--md-sys-color-on-primary-container: light-dark(#837961, #8e836b);
--md-sys-color-on-primary-fixed: light-dark(#544b36, #d0c3a8);
--md-sys-color-on-primary-fixed-variant: light-dark(#6f654f, #ab9f86);
--md-sys-color-on-secondary: light-dark(#fffbff, #2e291d);
--md-sys-color-on-secondary-container: light-dark(#81796a, #8b8374);
--md-sys-color-on-secondary-fixed: light-dark(#524c3e, #cdc3b1);
--md-sys-color-on-secondary-fixed-variant: light-dark(#6d6657, #a89f8f);
--md-sys-color-on-surface: light-dark(#615f5b, #a6a29e);
--md-sys-color-on-surface-variant: light-dark(#7d7a76, #86827f);
--md-sys-color-on-tertiary: light-dark(#fffbff, #32290f);
--md-sys-color-on-tertiary-container: light-dark(#867959, #918362);
--md-sys-color-on-tertiary-fixed: light-dark(#564b2f, #d3c29e);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#726547, #ae9f7c);
--md-sys-color-outline: light-dark(#b6b1ad, #565450);
--md-sys-color-outline-variant: light-dark(#ddd8d3, #3c3a37);
--md-sys-color-primary: light-dark(#7e745c, #9b9077);
--md-sys-color-primary-container: light-dark(#e5d8bc, #413926);
--md-sys-color-primary-dim: light-dark(#716750, #9b9077);
--md-sys-color-primary-fixed: light-dark(#e5d8bc, #59503b);
--md-sys-color-primary-fixed-dim: light-dark(#c9bca1, #413926);
--md-sys-color-primary-palette-key-color: light-dark(#80765f, #80765f);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#7b7465, #989080);
--md-sys-color-secondary-container: light-dark(#e2d8c6, #3f392d);
--md-sys-color-secondary-dim: light-dark(#6e6758, #999080);
--md-sys-color-secondary-fixed: light-dark(#e2d8c6, #575043);
--md-sys-color-secondary-fixed-dim: light-dark(#c6bcab, #3f392d);
--md-sys-color-secondary-palette-key-color: light-dark(#7e7667, #7e7667);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fef8f4, #151311);
--md-sys-color-surface-bright: light-dark(#fef8f4, #3b3936);
--md-sys-color-surface-container: light-dark(#f2ede8, #211f1d);
--md-sys-color-surface-container-high: light-dark(#ede7e3, #2c2a27);
--md-sys-color-surface-container-highest: light-dark(#e7e2dd, #363431);
--md-sys-color-surface-container-low: light-dark(#f8f3ee, #1d1b19);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0f0e0c);
--md-sys-color-surface-dim: light-dark(#ded9d5, #151311);
--md-sys-color-surface-tint: light-dark(#675d47, #d2c5aa);
--md-sys-color-surface-variant: light-dark(#e7e2dd, #494643);
--md-sys-color-tertiary: light-dark(#807354, #9e8f6e);
--md-sys-color-tertiary-container: light-dark(#e8d7b2, #43391e);
--md-sys-color-tertiary-dim: light-dark(#736748, #9e906e);
--md-sys-color-tertiary-fixed: light-dark(#e8d7b2, #5b5033);
--md-sys-color-tertiary-fixed-dim: light-dark(#ccbc98, #43391e);
--md-sys-color-tertiary-palette-key-color: light-dark(#837656, #837656);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fef8f4, #151311);
--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(#d2c5aa, #504732);
--md-sys-color-inverse-surface: light-dark(#32302d, #e7e2dd);
--md-sys-color-neutral-palette-key-color: light-dark(#7a7673, #7a7673);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7a7673, #7a7673);
--md-sys-color-on-background: light-dark(#1d1b19, #e7e2dd);
--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, #100b01);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #161003);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #0f0b03);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #151107);
--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, #100a00);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #181000);
--md-sys-color-outline: light-dark(#2e2c29, #f5efea);
--md-sys-color-outline-variant: light-dark(#4b4946, #c6c2bd);
--md-sys-color-primary: light-dark(#332b19, #fdefd2);
--md-sys-color-primary-container: light-dark(#514834, #cec1a7);
--md-sys-color-primary-dim: light-dark(#251f0d, #feefd3);
--md-sys-color-primary-fixed: light-dark(#514834, #efe1c5);
--md-sys-color-primary-fixed-dim: light-dark(#3a321f, #d2c5aa);
--md-sys-color-primary-palette-key-color: light-dark(#80765f, #80765f);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#312c20, #f9efdc);
--md-sys-color-secondary-container: light-dark(#4f493b, #cbc2b0);
--md-sys-color-secondary-dim: light-dark(#241f14, #faf0dd);
--md-sys-color-secondary-fixed: light-dark(#4f493b, #ece1cf);
--md-sys-color-secondary-fixed-dim: light-dark(#383226, #cfc5b4);
--md-sys-color-secondary-palette-key-color: light-dark(#7e7667, #7e7667);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fef8f4, #151311);
--md-sys-color-surface-bright: light-dark(#fef8f4, #52504c);
--md-sys-color-surface-container: light-dark(#e7e2dd, #32302d);
--md-sys-color-surface-container-high: light-dark(#d9d3cf, #3d3b38);
--md-sys-color-surface-container-highest: light-dark(#cac6c1, #494643);
--md-sys-color-surface-container-low: light-dark(#f5f0eb, #211f1d);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#bcb8b4, #151311);
--md-sys-color-surface-tint: light-dark(#675d47, #d2c5aa);
--md-sys-color-surface-variant: light-dark(#e7e2dd, #494643);
--md-sys-color-tertiary: light-dark(#352b12, #ffeecc);
--md-sys-color-tertiary-container: light-dark(#53482c, #d1c19d);
--md-sys-color-tertiary-dim: light-dark(#271e06, #ffefcf);
--md-sys-color-tertiary-fixed: light-dark(#53482c, #f2e1bb);
--md-sys-color-tertiary-fixed-dim: light-dark(#3b3217, #d5c5a0);
--md-sys-color-tertiary-palette-key-color: light-dark(#837656, #837656);
}