@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(#fff8f6, #1b110f);
--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(#ffede9, #3a2d2b);
--md-sys-color-inverse-primary: light-dark(#ffb4a5, #a53b26);
--md-sys-color-inverse-surface: light-dark(#3a2d2b, #f3deda);
--md-sys-color-neutral-palette-key-color: light-dark(#847370, #847370);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#8b716c, #8b716c);
--md-sys-color-on-background: light-dark(#241917, #f3deda);
--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, #650b00);
--md-sys-color-on-primary-container: light-dark(#f17259, #f17259);
--md-sys-color-on-primary-fixed: light-dark(#3e0400, #3e0400);
--md-sys-color-on-primary-fixed-variant: light-dark(#852311, #852311);
--md-sys-color-on-secondary: light-dark(#ffffff, #512319);
--md-sys-color-on-secondary-container: light-dark(#7a4438, #eba395);
--md-sys-color-on-secondary-fixed: light-dark(#360e07, #360e07);
--md-sys-color-on-secondary-fixed-variant: light-dark(#6c382e, #6c382e);
--md-sys-color-on-surface: light-dark(#241917, #f3deda);
--md-sys-color-on-surface-variant: light-dark(#57423d, #dec0ba);
--md-sys-color-on-tertiary: light-dark(#ffffff, #402d00);
--md-sys-color-on-tertiary-container: light-dark(#b1945c, #b1945c);
--md-sys-color-on-tertiary-fixed: light-dark(#261900, #261900);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#594314, #594314);
--md-sys-color-outline: light-dark(#8b716c, #a68b85);
--md-sys-color-outline-variant: light-dark(#dec0ba, #57423d);
--md-sys-color-primary: light-dark(#3f0400, #ffb4a5);
--md-sys-color-primary-container: light-dark(#650b00, #650b00);
--md-sys-color-primary-dim: light-dark(#952f1c, #f8775e);
--md-sys-color-primary-fixed: light-dark(#ffdad3, #ffdad3);
--md-sys-color-primary-fixed-dim: light-dark(#ffb4a5, #ffb4a5);
--md-sys-color-primary-palette-key-color: light-dark(#c6523c, #c6523c);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#884f43, #ffb4a5);
--md-sys-color-secondary-container: light-dark(#ffb4a5, #6c382e);
--md-sys-color-secondary-dim: light-dark(#7a4338, #ffb4a5);
--md-sys-color-secondary-fixed: light-dark(#ffdad3, #ffdad3);
--md-sys-color-secondary-fixed-dim: light-dark(#ffb4a5, #ffb4a5);
--md-sys-color-secondary-palette-key-color: light-dark(#a5675a, #a5675a);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f6, #1b110f);
--md-sys-color-surface-bright: light-dark(#fff8f6, #443633);
--md-sys-color-surface-container: light-dark(#ffe9e5, #281d1b);
--md-sys-color-surface-container-high: light-dark(#f9e3df, #332725);
--md-sys-color-surface-container-highest: light-dark(#f3deda, #3f322f);
--md-sys-color-surface-container-low: light-dark(#fff0ee, #241917);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #160c0a);
--md-sys-color-surface-dim: light-dark(#ebd5d1, #1b110f);
--md-sys-color-surface-tint: light-dark(#a53b26, #ffb4a5);
--md-sys-color-surface-variant: light-dark(#fcdbd5, #57423d);
--md-sys-color-tertiary: light-dark(#261900, #e2c286);
--md-sys-color-tertiary-container: light-dark(#402d00, #402d00);
--md-sys-color-tertiary-dim: light-dark(#664f1e, #fddb9d);
--md-sys-color-tertiary-fixed: light-dark(#ffdea2, #ffdea2);
--md-sys-color-tertiary-fixed-dim: light-dark(#e2c286, #e2c286);
--md-sys-color-tertiary-palette-key-color: light-dark(#402d00, #402d00);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fff8f6, #1b110f);
--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(#a79490, #71615e);
--md-sys-color-inverse-primary: light-dark(#ca553e, #d25b44);
--md-sys-color-inverse-surface: light-dark(#3a2d2b, #f3deda);
--md-sys-color-neutral-palette-key-color: light-dark(#847370, #847370);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#8b716c, #8b716c);
--md-sys-color-on-background: light-dark(#9e8c88, #6f5f5c);
--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, #580800);
--md-sys-color-on-primary-container: light-dark(#ca553e, #d75f47);
--md-sys-color-on-primary-fixed: light-dark(#8c2916, #ffb1a1);
--md-sys-color-on-primary-fixed-variant: light-dark(#b0422d, #fb7a60);
--md-sys-color-on-secondary: light-dark(#fffbff, #481c13);
--md-sys-color-on-secondary-container: light-dark(#a86a5d, #b47467);
--md-sys-color-on-secondary-fixed: light-dark(#733d33, #fcb2a3);
--md-sys-color-on-secondary-fixed-variant: light-dark(#91574b, #d48f81);
--md-sys-color-on-surface: light-dark(#6b5c58, #b29f9b);
--md-sys-color-on-surface-variant: light-dark(#8f7570, #977d78);
--md-sys-color-on-tertiary: light-dark(#fffbff, #382700);
--md-sys-color-on-tertiary-container: light-dark(#917642, #9b804b);
--md-sys-color-on-tertiary-fixed: light-dark(#5f4919, #e0c084);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#7b6330, #b99c64);
--md-sys-color-outline: light-dark(#c9aba6, #664f4a);
--md-sys-color-outline-variant: light-dark(#f1d2cc, #4a3531);
--md-sys-color-primary: light-dark(#c3503a, #e76b52);
--md-sys-color-primary-container: light-dark(#ffcec4, #731606);
--md-sys-color-primary-dim: light-dark(#b2442f, #e86b53);
--md-sys-color-primary-fixed: light-dark(#ffcec4, #932d1b);
--md-sys-color-primary-fixed-dim: light-dark(#ffa794, #731606);
--md-sys-color-primary-palette-key-color: light-dark(#c6523c, #c6523c);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#a26558, #c28072);
--md-sys-color-secondary-container: light-dark(#ffcec4, #5d2c22);
--md-sys-color-secondary-dim: light-dark(#93584c, #c38073);
--md-sys-color-secondary-fixed: light-dark(#ffcec4, #784237);
--md-sys-color-secondary-fixed-dim: light-dark(#f4ab9c, #5d2c22);
--md-sys-color-secondary-palette-key-color: light-dark(#a5675a, #a5675a);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f6, #1b110f);
--md-sys-color-surface-bright: light-dark(#fff8f6, #443633);
--md-sys-color-surface-container: light-dark(#ffe9e5, #281d1b);
--md-sys-color-surface-container-high: light-dark(#f9e3df, #332725);
--md-sys-color-surface-container-highest: light-dark(#f3deda, #3f322f);
--md-sys-color-surface-container-low: light-dark(#fff0ee, #241917);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #160c0a);
--md-sys-color-surface-dim: light-dark(#ebd5d1, #1b110f);
--md-sys-color-surface-tint: light-dark(#a53b26, #ffb4a5);
--md-sys-color-surface-variant: light-dark(#fcdbd5, #57423d);
--md-sys-color-tertiary: light-dark(#8b713d, #a98d56);
--md-sys-color-tertiary-container: light-dark(#f6d597, #4b3707);
--md-sys-color-tertiary-dim: light-dark(#7d6432, #a98d56);
--md-sys-color-tertiary-fixed: light-dark(#f6d597, #644e1d);
--md-sys-color-tertiary-fixed-dim: light-dark(#d8b97e, #4b3707);
--md-sys-color-tertiary-palette-key-color: light-dark(#402d00, #402d00);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fff8f6, #1b110f);
--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(#ffb4a5, #872412);
--md-sys-color-inverse-surface: light-dark(#3a2d2b, #f3deda);
--md-sys-color-neutral-palette-key-color: light-dark(#847370, #847370);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#8b716c, #8b716c);
--md-sys-color-on-background: light-dark(#241917, #f3deda);
--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(#ffe7e2, #200100);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #2b0200);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #200200);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #280502);
--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(#ffe9c4, #120a00);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #191000);
--md-sys-color-outline: light-dark(#3a2824, #ffece8);
--md-sys-color-outline-variant: light-dark(#5a4440, #dabcb6);
--md-sys-color-primary: light-dark(#3f0400, #ffece8);
--md-sys-color-primary-container: light-dark(#650b00, #ffaf9e);
--md-sys-color-primary-dim: light-dark(#450500, #ffede9);
--md-sys-color-primary-fixed: light-dark(#882614, #ffdad3);
--md-sys-color-primary-fixed-dim: light-dark(#680e01, #ffb4a5);
--md-sys-color-primary-palette-key-color: light-dark(#c6523c, #c6523c);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#4b1e15, #ffece8);
--md-sys-color-secondary-container: light-dark(#6f3b30, #fab0a1);
--md-sys-color-secondary-dim: light-dark(#3b120a, #ffede9);
--md-sys-color-secondary-fixed: light-dark(#6f3b30, #ffdad3);
--md-sys-color-secondary-fixed-dim: light-dark(#54251b, #ffb4a5);
--md-sys-color-secondary-palette-key-color: light-dark(#a5675a, #a5675a);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f6, #1b110f);
--md-sys-color-surface-bright: light-dark(#fff8f6, #5c4d4a);
--md-sys-color-surface-container: light-dark(#f3deda, #3a2d2b);
--md-sys-color-surface-container-high: light-dark(#e5d0cc, #463836);
--md-sys-color-surface-container-highest: light-dark(#d7c2be, #524341);
--md-sys-color-surface-container-low: light-dark(#ffede9, #281d1b);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#c8b4b0, #1b110f);
--md-sys-color-surface-tint: light-dark(#a53b26, #ffb4a5);
--md-sys-color-surface-variant: light-dark(#fcdbd5, #57423d);
--md-sys-color-tertiary: light-dark(#261900, #ffeed3);
--md-sys-color-tertiary-container: light-dark(#402d00, #debf83);
--md-sys-color-tertiary-dim: light-dark(#2b1d00, #ffefd6);
--md-sys-color-tertiary-fixed: light-dark(#5c4616, #ffdea2);
--md-sys-color-tertiary-fixed-dim: light-dark(#432f01, #e2c286);
--md-sys-color-tertiary-palette-key-color: light-dark(#402d00, #402d00);
}