@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(#fff8f7, #1c1011);
--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(#ffedec, #3b2d2d);
--md-sys-color-inverse-primary: light-dark(#8bcefd, #0d648e);
--md-sys-color-inverse-surface: light-dark(#3b2d2d, #f4dddd);
--md-sys-color-neutral-palette-key-color: light-dark(#857373, #857373);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#8b7171, #8b7171);
--md-sys-color-on-background: light-dark(#241819, #f4dddd);
--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, #00344d);
--md-sys-color-on-primary-container: light-dark(#004c6e, #c8e6ff);
--md-sys-color-on-primary-fixed: light-dark(#001e2f, #001e2f);
--md-sys-color-on-primary-fixed-variant: light-dark(#004c6e, #004c6e);
--md-sys-color-on-secondary: light-dark(#ffffff, #4b2714);
--md-sys-color-on-secondary-container: light-dark(#653d28, #ffdbcb);
--md-sys-color-on-secondary-fixed: light-dark(#311303, #311303);
--md-sys-color-on-secondary-fixed-variant: light-dark(#653d28, #653d28);
--md-sys-color-on-surface: light-dark(#241819, #f4dddd);
--md-sys-color-on-surface-variant: light-dark(#584142, #dfbfbf);
--md-sys-color-on-tertiary: light-dark(#ffffff, #2c3400);
--md-sys-color-on-tertiary-container: light-dark(#424b13, #dde9a0);
--md-sys-color-on-tertiary-fixed: light-dark(#181e00, #181e00);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#424b13, #424b13);
--md-sys-color-outline: light-dark(#8b7171, #a68a8a);
--md-sys-color-outline-variant: light-dark(#dfbfbf, #584142);
--md-sys-color-primary: light-dark(#0d648e, #8bcefd);
--md-sys-color-primary-container: light-dark(#c8e6ff, #004c6e);
--md-sys-color-primary-dim: light-dark(#00587f, #80c3f2);
--md-sys-color-primary-fixed: light-dark(#c8e6ff, #c8e6ff);
--md-sys-color-primary-fixed-dim: light-dark(#8bcefd, #8bcefd);
--md-sys-color-primary-palette-key-color: light-dark(#357ea9, #357ea9);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#80543d, #f4ba9e);
--md-sys-color-secondary-container: light-dark(#ffdbcb, #653d28);
--md-sys-color-secondary-dim: light-dark(#724833, #fabfa3);
--md-sys-color-secondary-fixed: light-dark(#ffdbcb, #ffdbcb);
--md-sys-color-secondary-fixed-dim: light-dark(#f4ba9e, #f4ba9e);
--md-sys-color-secondary-palette-key-color: light-dark(#9c6c54, #9c6c54);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f7, #1c1011);
--md-sys-color-surface-bright: light-dark(#fff8f7, #443636);
--md-sys-color-surface-container: light-dark(#ffe9e9, #291c1d);
--md-sys-color-surface-container-high: light-dark(#fae3e3, #342727);
--md-sys-color-surface-container-highest: light-dark(#f4dddd, #3f3132);
--md-sys-color-surface-container-low: light-dark(#fff0f0, #241819);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #160b0c);
--md-sys-color-surface-dim: light-dark(#ebd5d5, #1c1011);
--md-sys-color-surface-tint: light-dark(#0d648e, #8bcefd);
--md-sys-color-surface-variant: light-dark(#fcdbdb, #584142);
--md-sys-color-tertiary: light-dark(#596329, #c1cd87);
--md-sys-color-tertiary-container: light-dark(#dde9a0, #424b13);
--md-sys-color-tertiary-dim: light-dark(#4d571e, #ebf8ad);
--md-sys-color-tertiary-fixed: light-dark(#dde9a0, #dde9a0);
--md-sys-color-tertiary-fixed-dim: light-dark(#c1cd87, #c1cd87);
--md-sys-color-tertiary-palette-key-color: light-dark(#717c3f, #717c3f);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fff8f7, #1c1011);
--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(#a79494, #716061);
--md-sys-color-inverse-primary: light-dark(#3880ac, #4087b3);
--md-sys-color-inverse-surface: light-dark(#3b2d2d, #f4dddd);
--md-sys-color-neutral-palette-key-color: light-dark(#857373, #857373);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#8b7171, #8b7171);
--md-sys-color-on-background: light-dark(#9f8c8c, #6f5e5e);
--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(#fcfcff, #002d43);
--md-sys-color-on-primary-container: light-dark(#3880ac, #458bb7);
--md-sys-color-on-primary-fixed: light-dark(#005176, #88cbfb);
--md-sys-color-on-primary-fixed-variant: light-dark(#1d6d97, #63a7d5);
--md-sys-color-on-secondary: light-dark(#fffbff, #43210e);
--md-sys-color-on-secondary-container: light-dark(#9f6f57, #ab7960);
--md-sys-color-on-secondary-fixed: light-dark(#6b422d, #f1b79c);
--md-sys-color-on-secondary-fixed-variant: light-dark(#895c45, #ca947a);
--md-sys-color-on-surface: light-dark(#6c5b5b, #b29e9e);
--md-sys-color-on-surface-variant: light-dark(#8f7475, #987d7d);
--md-sys-color-on-tertiary: light-dark(#fcffe0, #252d00);
--md-sys-color-on-tertiary-container: light-dark(#747f41, #7f8a4b);
--md-sys-color-on-tertiary-fixed: light-dark(#475118, #beca84);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#616b30, #9ba664);
--md-sys-color-outline: light-dark(#c9abab, #664e4f);
--md-sys-color-outline-variant: light-dark(#f2d1d2, #4a3535);
--md-sys-color-primary: light-dark(#327ba6, #5398c4);
--md-sys-color-primary-container: light-dark(#b4deff, #003e5b);
--md-sys-color-primary-dim: light-dark(#206e99, #5398c5);
--md-sys-color-primary-fixed: light-dark(#b4deff, #00567d);
--md-sys-color-primary-fixed-dim: light-dark(#81c4f3, #003e5b);
--md-sys-color-primary-palette-key-color: light-dark(#357ea9, #357ea9);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#996952, #b9856c);
--md-sys-color-secondary-container: light-dark(#ffcfb8, #56301d);
--md-sys-color-secondary-dim: light-dark(#8b5d46, #b9856c);
--md-sys-color-secondary-fixed: light-dark(#ffcfb8, #714731);
--md-sys-color-secondary-fixed-dim: light-dark(#eab195, #56301d);
--md-sys-color-secondary-palette-key-color: light-dark(#9c6c54, #9c6c54);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f7, #1c1011);
--md-sys-color-surface-bright: light-dark(#fff8f7, #443636);
--md-sys-color-surface-container: light-dark(#ffe9e9, #291c1d);
--md-sys-color-surface-container-high: light-dark(#fae3e3, #342727);
--md-sys-color-surface-container-highest: light-dark(#f4dddd, #3f3132);
--md-sys-color-surface-container-low: light-dark(#fff0f0, #241819);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #160b0c);
--md-sys-color-surface-dim: light-dark(#ebd5d5, #1c1011);
--md-sys-color-surface-tint: light-dark(#0d648e, #8bcefd);
--md-sys-color-surface-variant: light-dark(#fcdbdb, #584142);
--md-sys-color-tertiary: light-dark(#6f7a3d, #8b9656);
--md-sys-color-tertiary-container: light-dark(#d3e097, #353e06);
--md-sys-color-tertiary-dim: light-dark(#626d31, #8c9756);
--md-sys-color-tertiary-fixed: light-dark(#d3e097, #4c561c);
--md-sys-color-tertiary-fixed-dim: light-dark(#b8c37e, #353e06);
--md-sys-color-tertiary-palette-key-color: light-dark(#717c3f, #717c3f);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fff8f7, #1c1011);
--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(#8bcefd, #004d6f);
--md-sys-color-inverse-surface: light-dark(#3b2d2d, #f4dddd);
--md-sys-color-neutral-palette-key-color: light-dark(#857373, #857373);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#8b7171, #8b7171);
--md-sys-color-on-background: light-dark(#241819, #f4dddd);
--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, #000d17);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #00131f);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #1a0500);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #240900);
--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, #090d00);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #0f1300);
--md-sys-color-outline: light-dark(#3b2728, #ffeceb);
--md-sys-color-outline-variant: light-dark(#5a4344, #dabbbc);
--md-sys-color-primary: light-dark(#002f47, #e4f2ff);
--md-sys-color-primary-container: light-dark(#004e71, #87caf9);
--md-sys-color-primary-dim: light-dark(#002234, #e5f2ff);
--md-sys-color-primary-fixed: light-dark(#004e71, #c8e6ff);
--md-sys-color-primary-fixed-dim: light-dark(#003650, #8bcefd);
--md-sys-color-primary-palette-key-color: light-dark(#357ea9, #357ea9);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#462310, #ffece5);
--md-sys-color-secondary-container: light-dark(#683f2a, #f0b69a);
--md-sys-color-secondary-dim: light-dark(#361705, #ffede6);
--md-sys-color-secondary-fixed: light-dark(#683f2a, #ffdbcb);
--md-sys-color-secondary-fixed-dim: light-dark(#4d2916, #f4ba9e);
--md-sys-color-secondary-palette-key-color: light-dark(#9c6c54, #9c6c54);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f7, #1c1011);
--md-sys-color-surface-bright: light-dark(#fff8f7, #5c4c4d);
--md-sys-color-surface-container: light-dark(#f4dddd, #3b2d2d);
--md-sys-color-surface-container-high: light-dark(#e5cfcf, #463838);
--md-sys-color-surface-container-highest: light-dark(#d7c1c1, #524343);
--md-sys-color-surface-container-low: light-dark(#ffedec, #291c1d);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#c9b4b4, #1c1011);
--md-sys-color-surface-tint: light-dark(#0d648e, #8bcefd);
--md-sys-color-surface-variant: light-dark(#fcdbdb, #584142);
--md-sys-color-tertiary: light-dark(#283000, #eaf7ac);
--md-sys-color-tertiary-container: light-dark(#444e15, #bdc983);
--md-sys-color-tertiary-dim: light-dark(#1c2200, #ebf8ad);
--md-sys-color-tertiary-fixed: light-dark(#444e15, #dde9a0);
--md-sys-color-tertiary-fixed-dim: light-dark(#2e3600, #c1cd87);
--md-sys-color-tertiary-palette-key-color: light-dark(#717c3f, #717c3f);
}