@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(#fff7fa, #1a101a);
--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(#ffebfa, #382d37);
--md-sys-color-inverse-primary: light-dark(#ffa9ff, #a400b5);
--md-sys-color-inverse-surface: light-dark(#382d37, #f0ddeb);
--md-sys-color-neutral-palette-key-color: light-dark(#82737f, #82737f);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#857183, #857183);
--md-sys-color-on-background: light-dark(#231822, #f0ddeb);
--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, #590062);
--md-sys-color-on-primary-container: light-dark(#fffbff, #110014);
--md-sys-color-on-primary-fixed: light-dark(#36003d, #36003d);
--md-sys-color-on-primary-fixed-variant: light-dark(#7d008b, #7d008b);
--md-sys-color-on-secondary: light-dark(#ffffff, #590062);
--md-sys-color-on-secondary-container: light-dark(#7b2982, #f193f4);
--md-sys-color-on-secondary-fixed: light-dark(#36003d, #36003d);
--md-sys-color-on-secondary-fixed-variant: light-dark(#74217c, #74217c);
--md-sys-color-on-surface: light-dark(#231822, #f0ddeb);
--md-sys-color-on-surface-variant: light-dark(#534151, #d8bfd3);
--md-sys-color-on-tertiary: light-dark(#ffffff, #66002d);
--md-sys-color-on-tertiary-container: light-dark(#fffbff, #160005);
--md-sys-color-on-tertiary-fixed: light-dark(#3f0019, #3f0019);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#8f0042, #8f0042);
--md-sys-color-outline: light-dark(#857183, #a08a9d);
--md-sys-color-outline-variant: light-dark(#d8bfd3, #534151);
--md-sys-color-primary: light-dark(#a000b1, #ffa9ff);
--md-sys-color-primary-container: light-dark(#c51dd7, #e747f7);
--md-sys-color-primary-dim: light-dark(#9100a0, #ed4dfc);
--md-sys-color-primary-fixed: light-dark(#ffd6fb, #ffd6fb);
--md-sys-color-primary-fixed-dim: light-dark(#ffa9ff, #ffa9ff);
--md-sys-color-primary-palette-key-color: light-dark(#c822da, #c822da);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#8f3c96, #ffa9ff);
--md-sys-color-secondary-container: light-dark(#fb9cfd, #74217c);
--md-sys-color-secondary-dim: light-dark(#812f88, #f294f5);
--md-sys-color-secondary-fixed: light-dark(#ffd6fb, #ffd6fb);
--md-sys-color-secondary-fixed-dim: light-dark(#ffa9ff, #ffa9ff);
--md-sys-color-secondary-palette-key-color: light-dark(#ab55b0, #ab55b0);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff7fa, #1a101a);
--md-sys-color-surface-bright: light-dark(#fff7fa, #423540);
--md-sys-color-surface-container: light-dark(#fce8f7, #271c26);
--md-sys-color-surface-container-high: light-dark(#f6e3f1, #322631);
--md-sys-color-surface-container-highest: light-dark(#f0ddeb, #3d313c);
--md-sys-color-surface-container-low: light-dark(#ffeffa, #231822);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #150b14);
--md-sys-color-surface-dim: light-dark(#e8d5e3, #1a101a);
--md-sys-color-surface-tint: light-dark(#a400b5, #ffa9ff);
--md-sys-color-surface-variant: light-dark(#f4dbf0, #534151);
--md-sys-color-tertiary: light-dark(#b60056, #ffb1c3);
--md-sys-color-tertiary-container: light-dark(#df1b6d, #ff4b8a);
--md-sys-color-tertiary-dim: light-dark(#a5004d, #ff4c8a);
--md-sys-color-tertiary-fixed: light-dark(#ffd9e0, #ffd9e0);
--md-sys-color-tertiary-fixed-dim: light-dark(#ffb1c3, #ffb1c3);
--md-sys-color-tertiary-palette-key-color: light-dark(#e32070, #e32070);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fff7fa, #1a101a);
--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(#a493a1, #6e606c);
--md-sys-color-inverse-primary: light-dark(#cb26dd, #d331e4);
--md-sys-color-inverse-surface: light-dark(#382d37, #f0ddeb);
--md-sys-color-neutral-palette-key-color: light-dark(#82737f, #82737f);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#857183, #857183);
--md-sys-color-on-background: light-dark(#9c8b98, #6c5e6a);
--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, #4e0056);
--md-sys-color-on-primary-container: light-dark(#cb27dd, #d837e8);
--md-sys-color-on-primary-fixed: light-dark(#860094, #fea5ff);
--md-sys-color-on-primary-fixed-variant: light-dark(#b100c4, #f363ff);
--md-sys-color-on-secondary: light-dark(#fffbff, #4e0056);
--md-sys-color-on-secondary-container: light-dark(#af58b4, #ba63bf);
--md-sys-color-on-secondary-fixed: light-dark(#7a2882, #fea5ff);
--md-sys-color-on-secondary-fixed-variant: light-dark(#98449e, #da7edd);
--md-sys-color-on-surface: light-dark(#695b67, #af9eab);
--md-sys-color-on-surface-variant: light-dark(#897486, #927d8f);
--md-sys-color-on-tertiary: light-dark(#fffbff, #590026);
--md-sys-color-on-tertiary-container: light-dark(#e72472, #f5317d);
--md-sys-color-on-tertiary-fixed: light-dark(#990047, #ffadc0);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ca005f, #ff709a);
--md-sys-color-outline: light-dark(#c2abbe, #614e5f);
--md-sys-color-outline-variant: light-dark(#ebd2e6, #453544);
--md-sys-color-primary: light-dark(#c51dd7, #e747f7);
--md-sys-color-primary-container: light-dark(#ffc7fc, #680074);
--md-sys-color-primary-dim: light-dark(#b400c6, #e748f7);
--md-sys-color-primary-fixed: light-dark(#ffc7fc, #8e009d);
--md-sys-color-primary-fixed-dim: light-dark(#fc99ff, #680074);
--md-sys-color-primary-palette-key-color: light-dark(#c822da, #c822da);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#a953ae, #c86fcc);
--md-sys-color-secondary-container: light-dark(#ffc7fc, #65106e);
--md-sys-color-secondary-dim: light-dark(#9a46a0, #c970cd);
--md-sys-color-secondary-fixed: light-dark(#ffc7fc, #802d87);
--md-sys-color-secondary-fixed-dim: light-dark(#fa9bfc, #65106e);
--md-sys-color-secondary-palette-key-color: light-dark(#ab55b0, #ab55b0);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff7fa, #1a101a);
--md-sys-color-surface-bright: light-dark(#fff7fa, #423540);
--md-sys-color-surface-container: light-dark(#fce8f7, #271c26);
--md-sys-color-surface-container-high: light-dark(#f6e3f1, #322631);
--md-sys-color-surface-container-highest: light-dark(#f0ddeb, #3d313c);
--md-sys-color-surface-container-low: light-dark(#ffeffa, #231822);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #150b14);
--md-sys-color-surface-dim: light-dark(#e8d5e3, #1a101a);
--md-sys-color-surface-tint: light-dark(#a400b5, #ffa9ff);
--md-sys-color-surface-variant: light-dark(#f4dbf0, #534151);
--md-sys-color-tertiary: light-dark(#df1b6d, #ff4b8a);
--md-sys-color-tertiary-container: light-dark(#ffccd6, #780036);
--md-sys-color-tertiary-dim: light-dark(#cd0061, #ff4c8a);
--md-sys-color-tertiary-fixed: light-dark(#ffccd6, #a2004b);
--md-sys-color-tertiary-fixed-dim: light-dark(#ffa3b9, #780036);
--md-sys-color-tertiary-palette-key-color: light-dark(#e32070, #e32070);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fff7fa, #1a101a);
--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(#ffa9ff, #7f008d);
--md-sys-color-inverse-surface: light-dark(#382d37, #f0ddeb);
--md-sys-color-neutral-palette-key-color: light-dark(#82737f, #82737f);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#857183, #857183);
--md-sys-color-on-background: light-dark(#231822, #f0ddeb);
--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, #110014);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #25002a);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #1b001f);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #25002a);
--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, #160005);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #2c000f);
--md-sys-color-outline: light-dark(#372736, #ffeafa);
--md-sys-color-outline-variant: light-dark(#554454, #d3bccf);
--md-sys-color-primary: light-dark(#52005b, #ffeafa);
--md-sys-color-primary-container: light-dark(#81008f, #fea2ff);
--md-sys-color-primary-dim: light-dark(#3d0044, #ffebfa);
--md-sys-color-primary-fixed: light-dark(#81008f, #ffd6fb);
--md-sys-color-primary-fixed-dim: light-dark(#5c0066, #ffa9ff);
--md-sys-color-primary-palette-key-color: light-dark(#c822da, #c822da);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#52005b, #ffeafa);
--md-sys-color-secondary-container: light-dark(#76247e, #fea2ff);
--md-sys-color-secondary-dim: light-dark(#3d0044, #ffebfa);
--md-sys-color-secondary-fixed: light-dark(#76247e, #ffd6fb);
--md-sys-color-secondary-fixed-dim: light-dark(#5c0265, #ffa9ff);
--md-sys-color-secondary-palette-key-color: light-dark(#ab55b0, #ab55b0);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff7fa, #1a101a);
--md-sys-color-surface-bright: light-dark(#fff7fa, #594c58);
--md-sys-color-surface-container: light-dark(#f0ddeb, #382d37);
--md-sys-color-surface-container-high: light-dark(#e2cfdd, #443843);
--md-sys-color-surface-container-highest: light-dark(#d3c1cf, #50434e);
--md-sys-color-surface-container-low: light-dark(#ffebfa, #271c26);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#c5b4c1, #1a101a);
--md-sys-color-surface-tint: light-dark(#a400b5, #ffa9ff);
--md-sys-color-surface-variant: light-dark(#f4dbf0, #534151);
--md-sys-color-tertiary: light-dark(#5e0029, #ffebee);
--md-sys-color-tertiary-container: light-dark(#940044, #ffabbf);
--md-sys-color-tertiary-dim: light-dark(#46001d, #ffecef);
--md-sys-color-tertiary-fixed: light-dark(#940044, #ffd9e0);
--md-sys-color-tertiary-fixed-dim: light-dark(#6a002f, #ffb1c3);
--md-sys-color-tertiary-palette-key-color: light-dark(#e32070, #e32070);
}