@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, #1f0f0c);
--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, #3f2c28);
--md-sys-color-inverse-primary: light-dark(#ffb4a5, #ba1d00);
--md-sys-color-inverse-surface: light-dark(#3f2c28, #fbdbd5);
--md-sys-color-neutral-palette-key-color: light-dark(#8a716c, #8a716c);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#916f68, #916f68);
--md-sys-color-on-background: light-dark(#281714, #fbdbd5);
--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(#fffbff, #140100);
--md-sys-color-on-primary-fixed: light-dark(#3e0400, #3e0400);
--md-sys-color-on-primary-fixed-variant: light-dark(#8e1300, #8e1300);
--md-sys-color-on-secondary: light-dark(#ffffff, #640c00);
--md-sys-color-on-secondary-container: light-dark(#721606, #ff9f8c);
--md-sys-color-on-secondary-fixed: light-dark(#3e0400, #3e0400);
--md-sys-color-on-secondary-fixed-variant: light-dark(#842412, #842412);
--md-sys-color-on-surface: light-dark(#281714, #fbdbd5);
--md-sys-color-on-surface-variant: light-dark(#5c403a, #e6bdb5);
--md-sys-color-on-tertiary: light-dark(#ffffff, #003062);
--md-sys-color-on-tertiary-container: light-dark(#fefcff, #000514);
--md-sys-color-on-tertiary-fixed: light-dark(#001b3d, #001b3d);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#00468b, #00468b);
--md-sys-color-outline: light-dark(#916f68, #ac8881);
--md-sys-color-outline-variant: light-dark(#e6bdb5, #5c403a);
--md-sys-color-primary: light-dark(#b51c00, #ffb4a5);
--md-sys-color-primary-container: light-dark(#dd3011, #ff5637);
--md-sys-color-primary-dim: light-dark(#a41800, #ff5738);
--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(#e13314, #e13314);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#a53b27, #ffb4a5);
--md-sys-color-secondary-container: light-dark(#fe7d63, #882614);
--md-sys-color-secondary-dim: light-dark(#952f1d, #fe7d63);
--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(#c5533c, #c5533c);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f6, #1f0f0c);
--md-sys-color-surface-bright: light-dark(#fff8f6, #483430);
--md-sys-color-surface-container: light-dark(#ffe9e5, #2d1b18);
--md-sys-color-surface-container-high: light-dark(#ffe2dc, #382522);
--md-sys-color-surface-container-highest: light-dark(#fbdbd5, #44302c);
--md-sys-color-surface-container-low: light-dark(#fff0ee, #281714);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #190a07);
--md-sys-color-surface-dim: light-dark(#f3d3cd, #1f0f0c);
--md-sys-color-surface-tint: light-dark(#ba1d00, #ffb4a5);
--md-sys-color-surface-variant: light-dark(#ffdad3, #5c403a);
--md-sys-color-tertiary: light-dark(#005bb1, #a8c8ff);
--md-sys-color-tertiary-container: light-dark(#0073dd, #3a90fe);
--md-sys-color-tertiary-dim: light-dark(#0052a0, #3a90fe);
--md-sys-color-tertiary-fixed: light-dark(#d6e3ff, #d6e3ff);
--md-sys-color-tertiary-fixed-dim: light-dark(#a8c8ff, #a8c8ff);
--md-sys-color-tertiary-palette-key-color: light-dark(#0076e2, #0076e2);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fff8f6, #1f0f0c);
--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(#ae928d, #775f5a);
--md-sys-color-inverse-primary: light-dark(#e53617, #ef3d1e);
--md-sys-color-inverse-surface: light-dark(#3f2c28, #fbdbd5);
--md-sys-color-neutral-palette-key-color: light-dark(#8a716c, #8a716c);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#916f68, #916f68);
--md-sys-color-on-background: light-dark(#a58a85, #755d58);
--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(#e53617, #f44121);
--md-sys-color-on-primary-fixed: light-dark(#981600, #ffb1a1);
--md-sys-color-on-primary-fixed-variant: light-dark(#c82000, #ff775c);
--md-sys-color-on-secondary: light-dark(#fffbff, #580800);
--md-sys-color-on-secondary-container: light-dark(#c9563f, #d65f48);
--md-sys-color-on-secondary-fixed: light-dark(#8c2917, #ffb1a1);
--md-sys-color-on-secondary-fixed-variant: light-dark(#af432e, #fa7a61);
--md-sys-color-on-surface: light-dark(#715a55, #b99d97);
--md-sys-color-on-surface-variant: light-dark(#95736c, #9e7b74);
--md-sys-color-on-tertiary: light-dark(#fefcff, #002956);
--md-sys-color-on-tertiary-container: light-dark(#0c79e5, #2683f0);
--md-sys-color-on-tertiary-fixed: light-dark(#004b94, #a4c5ff);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#0065c4, #61a1ff);
--md-sys-color-outline: light-dark(#d0a9a1, #6b4d47);
--md-sys-color-outline-variant: light-dark(#f9d0c7, #4e332e);
--md-sys-color-primary: light-dark(#dd3011, #ff5637);
--md-sys-color-primary-container: light-dark(#ffcec4, #770f00);
--md-sys-color-primary-dim: light-dark(#cb2202, #ff5738);
--md-sys-color-primary-fixed: light-dark(#ffcec4, #a11700);
--md-sys-color-primary-fixed-dim: light-dark(#ffa795, #770f00);
--md-sys-color-primary-palette-key-color: light-dark(#e13314, #e13314);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#c2503a, #e76b53);
--md-sys-color-secondary-container: light-dark(#ffcec4, #731707);
--md-sys-color-secondary-dim: light-dark(#b1442f, #e76c53);
--md-sys-color-secondary-fixed: light-dark(#ffcec4, #932e1b);
--md-sys-color-secondary-fixed-dim: light-dark(#ffa795, #731707);
--md-sys-color-secondary-palette-key-color: light-dark(#c5533c, #c5533c);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f6, #1f0f0c);
--md-sys-color-surface-bright: light-dark(#fff8f6, #483430);
--md-sys-color-surface-container: light-dark(#ffe9e5, #2d1b18);
--md-sys-color-surface-container-high: light-dark(#ffe2dc, #382522);
--md-sys-color-surface-container-highest: light-dark(#fbdbd5, #44302c);
--md-sys-color-surface-container-low: light-dark(#fff0ee, #281714);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #190a07);
--md-sys-color-surface-dim: light-dark(#f3d3cd, #1f0f0c);
--md-sys-color-surface-tint: light-dark(#ba1d00, #ffb4a5);
--md-sys-color-surface-variant: light-dark(#ffdad3, #5c403a);
--md-sys-color-tertiary: light-dark(#0073dd, #3a90fe);
--md-sys-color-tertiary-container: light-dark(#c7daff, #003974);
--md-sys-color-tertiary-dim: light-dark(#0067c6, #3b91fe);
--md-sys-color-tertiary-fixed: light-dark(#c7daff, #00509d);
--md-sys-color-tertiary-fixed-dim: light-dark(#98beff, #003974);
--md-sys-color-tertiary-palette-key-color: light-dark(#0076e2, #0076e2);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fff8f6, #1f0f0c);
--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, #901400);
--md-sys-color-inverse-surface: light-dark(#3f2c28, #fbdbd5);
--md-sys-color-neutral-palette-key-color: light-dark(#8a716c, #8a716c);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#916f68, #916f68);
--md-sys-color-on-background: light-dark(#281714, #fbdbd5);
--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, #140100);
--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, #200100);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #2b0200);
--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, #000514);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #00112a);
--md-sys-color-outline: light-dark(#3f2621, #ffece8);
--md-sys-color-outline-variant: light-dark(#5f423c, #e2bab2);
--md-sys-color-primary: light-dark(#5d0900, #ffece8);
--md-sys-color-primary-container: light-dark(#921400, #ffaf9e);
--md-sys-color-primary-dim: light-dark(#460500, #ffede9);
--md-sys-color-primary-fixed: light-dark(#921400, #ffdad3);
--md-sys-color-primary-fixed-dim: light-dark(#690c00, #ffb4a5);
--md-sys-color-primary-palette-key-color: light-dark(#e13314, #e13314);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#5d0900, #ffece8);
--md-sys-color-secondary-container: light-dark(#882614, #ffaf9e);
--md-sys-color-secondary-dim: light-dark(#460500, #ffede9);
--md-sys-color-secondary-fixed: light-dark(#882614, #ffdad3);
--md-sys-color-secondary-fixed-dim: light-dark(#680e02, #ffb4a5);
--md-sys-color-secondary-palette-key-color: light-dark(#c5533c, #c5533c);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f6, #1f0f0c);
--md-sys-color-surface-bright: light-dark(#fff8f6, #614b46);
--md-sys-color-surface-container: light-dark(#fbdbd5, #3f2c28);
--md-sys-color-surface-container-high: light-dark(#edcec7, #4b3732);
--md-sys-color-surface-container-highest: light-dark(#dec0ba, #57423d);
--md-sys-color-surface-container-low: light-dark(#ffede9, #2d1b18);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#d0b2ac, #1f0f0c);
--md-sys-color-surface-tint: light-dark(#ba1d00, #ffb4a5);
--md-sys-color-surface-variant: light-dark(#ffdad3, #5c403a);
--md-sys-color-tertiary: light-dark(#002c5b, #ebf0ff);
--md-sys-color-tertiary-container: light-dark(#00488f, #a2c4ff);
--md-sys-color-tertiary-dim: light-dark(#001f44, #ecf0ff);
--md-sys-color-tertiary-fixed: light-dark(#00488f, #d6e3ff);
--md-sys-color-tertiary-fixed-dim: light-dark(#003266, #a8c8ff);
--md-sys-color-tertiary-palette-key-color: light-dark(#0076e2, #0076e2);
}