@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, #161215);
--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(#f7eef2, #332f32);
--md-sys-color-inverse-primary: light-dark(#e7b8e3, #785177);
--md-sys-color-inverse-surface: light-dark(#332f32, #e9e0e4);
--md-sys-color-neutral-palette-key-color: light-dark(#7b7578, #7b7578);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7f747c, #7f747c);
--md-sys-color-on-background: light-dark(#1e1a1d, #e9e0e4);
--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, #462447);
--md-sys-color-on-primary-container: light-dark(#b68ab4, #b68ab4);
--md-sys-color-on-primary-fixed: light-dark(#2e0e30, #2e0e30);
--md-sys-color-on-primary-fixed-variant: light-dark(#5e3a5e, #5e3a5e);
--md-sys-color-on-secondary: light-dark(#ffffff, #3b2b3a);
--md-sys-color-on-secondary-container: light-dark(#705d6e, #c5aec1);
--md-sys-color-on-secondary-fixed: light-dark(#251725, #251725);
--md-sys-color-on-secondary-fixed-variant: light-dark(#534151, #534151);
--md-sys-color-on-surface: light-dark(#1e1a1d, #e9e0e4);
--md-sys-color-on-surface-variant: light-dark(#4d444b, #d0c3cc);
--md-sys-color-on-tertiary: light-dark(#ffffff, #522127);
--md-sys-color-on-tertiary-container: light-dark(#cb868b, #cb868b);
--md-sys-color-on-tertiary-fixed: light-dark(#370c13, #370c13);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#6d363c, #6d363c);
--md-sys-color-outline: light-dark(#7f747c, #998d96);
--md-sys-color-outline-variant: light-dark(#d0c3cc, #4d444b);
--md-sys-color-primary: light-dark(#2f0f31, #e7b8e3);
--md-sys-color-primary-container: light-dark(#462447, #462447);
--md-sys-color-primary-dim: light-dark(#6b456b, #fccbf8);
--md-sys-color-primary-fixed: light-dark(#ffd6fa, #ffd6fa);
--md-sys-color-primary-fixed-dim: light-dark(#e7b8e3, #e7b8e3);
--md-sys-color-primary-palette-key-color: light-dark(#936a92, #936a92);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#6b5969, #d7bfd3);
--md-sys-color-secondary-container: light-dark(#f1d8ec, #534151);
--md-sys-color-secondary-dim: light-dark(#5f4d5d, #ecd3e7);
--md-sys-color-secondary-fixed: light-dark(#f4dbef, #f4dbef);
--md-sys-color-secondary-fixed-dim: light-dark(#d7bfd3, #d7bfd3);
--md-sys-color-secondary-palette-key-color: light-dark(#857182, #857182);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff7fa, #161215);
--md-sys-color-surface-bright: light-dark(#fff7fa, #3c383b);
--md-sys-color-surface-container: light-dark(#f4ecef, #221e21);
--md-sys-color-surface-container-high: light-dark(#eee6ea, #2d292c);
--md-sys-color-surface-container-highest: light-dark(#e9e0e4, #383336);
--md-sys-color-surface-container-low: light-dark(#faf1f5, #1e1a1d);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #100d10);
--md-sys-color-surface-dim: light-dark(#e0d8db, #161215);
--md-sys-color-surface-tint: light-dark(#785177, #e7b8e3);
--md-sys-color-surface-variant: light-dark(#eddfe8, #4d444b);
--md-sys-color-tertiary: light-dark(#380c13, #ffb2b8);
--md-sys-color-tertiary-container: light-dark(#522127, #522127);
--md-sys-color-tertiary-dim: light-dark(#7b4247, #ffb2b8);
--md-sys-color-tertiary-fixed: light-dark(#ffdadb, #ffdadb);
--md-sys-color-tertiary-fixed-dim: light-dark(#ffb2b8, #ffb2b8);
--md-sys-color-tertiary-palette-key-color: light-dark(#522127, #522127);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fff7fa, #161215);
--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(#9d969a, #686366);
--md-sys-color-inverse-primary: light-dark(#956c94, #9d739b);
--md-sys-color-inverse-surface: light-dark(#332f32, #e9e0e4);
--md-sys-color-neutral-palette-key-color: light-dark(#7b7578, #7b7578);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7f747c, #7f747c);
--md-sys-color-on-background: light-dark(#958e92, #666164);
--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, #3e1d40);
--md-sys-color-on-primary-container: light-dark(#966c94, #a1769f);
--md-sys-color-on-primary-fixed: light-dark(#643f64, #e4b5e1);
--md-sys-color-on-primary-fixed-variant: light-dark(#815980, #be92bc);
--md-sys-color-on-secondary: light-dark(#fffbff, #342533);
--md-sys-color-on-secondary-container: light-dark(#887485, #937e90);
--md-sys-color-on-secondary-fixed: light-dark(#584757, #d5bdd0);
--md-sys-color-on-secondary-fixed-variant: light-dark(#746071, #b09aac);
--md-sys-color-on-surface: light-dark(#635d61, #a8a1a4);
--md-sys-color-on-surface-variant: light-dark(#827880, #8b8088);
--md-sys-color-on-tertiary: light-dark(#fffbff, #491a20);
--md-sys-color-on-tertiary-container: light-dark(#a8686e, #b47277);
--md-sys-color-on-tertiary-fixed: light-dark(#733c41, #fcb0b6);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#92555b, #d48d93);
--md-sys-color-outline: light-dark(#bbaeb7, #5b5159);
--md-sys-color-outline-variant: light-dark(#e3d5de, #40373f);
--md-sys-color-primary: light-dark(#90678e, #ae83ac);
--md-sys-color-primary-container: light-dark(#fbcaf6, #502d51);
--md-sys-color-primary-dim: light-dark(#825b81, #ae83ac);
--md-sys-color-primary-fixed: light-dark(#fbcaf6, #6a4469);
--md-sys-color-primary-fixed-dim: light-dark(#ddaeda, #502d51);
--md-sys-color-primary-palette-key-color: light-dark(#936a92, #936a92);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#826e80, #a08a9c);
--md-sys-color-secondary-container: light-dark(#ead2e6, #453544);
--md-sys-color-secondary-dim: light-dark(#756273, #a08b9d);
--md-sys-color-secondary-fixed: light-dark(#ead2e6, #5d4b5c);
--md-sys-color-secondary-fixed-dim: light-dark(#ceb6ca, #453544);
--md-sys-color-secondary-palette-key-color: light-dark(#857182, #857182);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff7fa, #161215);
--md-sys-color-surface-bright: light-dark(#fff7fa, #3c383b);
--md-sys-color-surface-container: light-dark(#f4ecef, #221e21);
--md-sys-color-surface-container-high: light-dark(#eee6ea, #2d292c);
--md-sys-color-surface-container-highest: light-dark(#e9e0e4, #383336);
--md-sys-color-surface-container-low: light-dark(#faf1f5, #1e1a1d);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #100d10);
--md-sys-color-surface-dim: light-dark(#e0d8db, #161215);
--md-sys-color-surface-tint: light-dark(#785177, #e7b8e3);
--md-sys-color-surface-variant: light-dark(#eddfe8, #4d444b);
--md-sys-color-tertiary: light-dark(#a26368, #c27e84);
--md-sys-color-tertiary-container: light-dark(#ffcccf, #5d2a30);
--md-sys-color-tertiary-dim: light-dark(#94565c, #c37f84);
--md-sys-color-tertiary-fixed: light-dark(#ffcccf, #794046);
--md-sys-color-tertiary-fixed-dim: light-dark(#f4a9af, #5d2a30);
--md-sys-color-tertiary-palette-key-color: light-dark(#522127, #522127);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fff7fa, #161215);
--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(#e7b8e3, #603b60);
--md-sys-color-inverse-surface: light-dark(#332f32, #e9e0e4);
--md-sys-color-neutral-palette-key-color: light-dark(#7b7578, #7b7578);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#7f747c, #7f747c);
--md-sys-color-on-background: light-dark(#1e1a1d, #e9e0e4);
--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(#ffe5fa, #1b001f);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #220425);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #130714);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #1a0c1a);
--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(#ffe7e8, #210005);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #290309);
--md-sys-color-outline: light-dark(#322a30, #faecf5);
--md-sys-color-outline-variant: light-dark(#50464e, #ccbfc8);
--md-sys-color-primary: light-dark(#2f0f31, #ffeafa);
--md-sys-color-primary-container: light-dark(#462447, #e3b4df);
--md-sys-color-primary-dim: light-dark(#331235, #ffebfa);
--md-sys-color-primary-fixed: light-dark(#613c61, #ffd6fa);
--md-sys-color-primary-fixed-dim: light-dark(#482649, #e7b8e3);
--md-sys-color-primary-palette-key-color: light-dark(#936a92, #936a92);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#372736, #ffeafa);
--md-sys-color-secondary-container: light-dark(#554454, #d3bccf);
--md-sys-color-secondary-dim: light-dark(#291b29, #ffebfa);
--md-sys-color-secondary-fixed: light-dark(#554454, #f4dbef);
--md-sys-color-secondary-fixed-dim: light-dark(#3e2d3d, #d7bfd3);
--md-sys-color-secondary-palette-key-color: light-dark(#857182, #857182);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff7fa, #161215);
--md-sys-color-surface-bright: light-dark(#fff7fa, #544f52);
--md-sys-color-surface-container: light-dark(#e9e0e4, #332f32);
--md-sys-color-surface-container-high: light-dark(#dad2d6, #3f3a3d);
--md-sys-color-surface-container-highest: light-dark(#ccc4c8, #4a4548);
--md-sys-color-surface-container-low: light-dark(#f7eef2, #221e21);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#beb7ba, #161215);
--md-sys-color-surface-tint: light-dark(#785177, #e7b8e3);
--md-sys-color-surface-variant: light-dark(#eddfe8, #4d444b);
--md-sys-color-tertiary: light-dark(#380c13, #ffebec);
--md-sys-color-tertiary-container: light-dark(#522127, #faafb4);
--md-sys-color-tertiary-dim: light-dark(#3c1017, #ffeced);
--md-sys-color-tertiary-fixed: light-dark(#70393e, #ffdadb);
--md-sys-color-tertiary-fixed-dim: light-dark(#542329, #ffb2b8);
--md-sys-color-tertiary-palette-key-color: light-dark(#522127, #522127);
}