@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, #181117);
--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(#fbedf5, #362e34);
--md-sys-color-inverse-primary: light-dark(#ffa9ff, #8f3c94);
--md-sys-color-inverse-surface: light-dark(#362e34, #ecdfe7);
--md-sys-color-neutral-palette-key-color: light-dark(#7e747b, #7e747b);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#82737f, #82737f);
--md-sys-color-on-background: light-dark(#20191f, #ecdfe7);
--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(#d177d3, #d177d3);
--md-sys-color-on-primary-fixed: light-dark(#36003c, #36003c);
--md-sys-color-on-primary-fixed-variant: light-dark(#74227b, #74227b);
--md-sys-color-on-secondary: light-dark(#ffffff, #452546);
--md-sys-color-on-secondary-container: light-dark(#7a5479, #d7aad3);
--md-sys-color-on-secondary-fixed: light-dark(#2e0f2f, #2e0f2f);
--md-sys-color-on-secondary-fixed-variant: light-dark(#5d3b5d, #5d3b5d);
--md-sys-color-on-surface: light-dark(#20191f, #ecdfe7);
--md-sys-color-on-surface-variant: light-dark(#50434e, #d3c1cf);
--md-sys-color-on-tertiary: light-dark(#ffffff, #353100);
--md-sys-color-on-tertiary-container: light-dark(#44410c, #44410c);
--md-sys-color-on-tertiary-fixed: light-dark(#1f1c00, #1f1c00);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#4c4814, #4c4814);
--md-sys-color-outline: light-dark(#82737f, #9c8c99);
--md-sys-color-outline-variant: light-dark(#d3c1cf, #50434e);
--md-sys-color-primary: light-dark(#37003d, #ffa9ff);
--md-sys-color-primary-container: light-dark(#590062, #590062);
--md-sys-color-primary-dim: light-dark(#812f87, #fe9fff);
--md-sys-color-primary-fixed: light-dark(#ffd6fa, #ffd6fa);
--md-sys-color-primary-fixed-dim: light-dark(#ffa9ff, #ffa9ff);
--md-sys-color-primary-palette-key-color: light-dark(#ab56af, #ab56af);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#775276, #e6b8e2);
--md-sys-color-secondary-container: light-dark(#fdcef9, #603d60);
--md-sys-color-secondary-dim: light-dark(#6a4669, #fdcef9);
--md-sys-color-secondary-fixed: light-dark(#ffd6fa, #ffd6fa);
--md-sys-color-secondary-fixed-dim: light-dark(#e6b8e2, #e6b8e2);
--md-sys-color-secondary-palette-key-color: light-dark(#916a90, #916a90);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff7fa, #181117);
--md-sys-color-surface-bright: light-dark(#fff7fa, #3f373d);
--md-sys-color-surface-container: light-dark(#f8eaf3, #241d23);
--md-sys-color-surface-container-high: light-dark(#f2e4ed, #2f282e);
--md-sys-color-surface-container-highest: light-dark(#ecdfe7, #3a3239);
--md-sys-color-surface-container-low: light-dark(#fef0f8, #20191f);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #120c12);
--md-sys-color-surface-dim: light-dark(#e3d6df, #181117);
--md-sys-color-surface-tint: light-dark(#8f3c94, #ffa9ff);
--md-sys-color-surface-variant: light-dark(#f0ddeb, #50434e);
--md-sys-color-tertiary: light-dark(#646029, #cfc987);
--md-sys-color-tertiary-container: light-dark(#b3ad6e, #b3ad6e);
--md-sys-color-tertiary-dim: light-dark(#58541e, #faf3ae);
--md-sys-color-tertiary-fixed: light-dark(#ece5a1, #ece5a1);
--md-sys-color-tertiary-fixed-dim: light-dark(#cfc987, #cfc987);
--md-sys-color-tertiary-palette-key-color: light-dark(#b3ad6e, #b3ad6e);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fff7fa, #181117);
--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(#a0959d, #6b6269);
--md-sys-color-inverse-primary: light-dark(#ae58b2, #b65fba);
--md-sys-color-inverse-surface: light-dark(#362e34, #ecdfe7);
--md-sys-color-neutral-palette-key-color: light-dark(#7e747b, #7e747b);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#82737f, #82737f);
--md-sys-color-on-background: light-dark(#988d95, #696067);
--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(#af59b2, #ba63be);
--md-sys-color-on-primary-fixed: light-dark(#7a2880, #ffa4ff);
--md-sys-color-on-primary-fixed-variant: light-dark(#98459d, #da7fdc);
--md-sys-color-on-secondary: light-dark(#fffbff, #3d1e3e);
--md-sys-color-on-secondary-container: light-dark(#956d93, #9f779d);
--md-sys-color-on-secondary-fixed: light-dark(#634063, #e3b6df);
--md-sys-color-on-secondary-fixed-variant: light-dark(#805a7e, #bd93ba);
--md-sys-color-on-surface: light-dark(#665c63, #aba0a7);
--md-sys-color-on-surface-variant: light-dark(#857683, #8e7f8b);
--md-sys-color-on-tertiary: light-dark(#fffbff, #2e2b00);
--md-sys-color-on-tertiary-container: light-dark(#817c42, #8b864b);
--md-sys-color-on-tertiary-fixed: light-dark(#524e19, #cdc685);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#6d6830, #a8a264);
--md-sys-color-outline: light-dark(#beadba, #5e505c);
--md-sys-color-outline-variant: light-dark(#e6d4e2, #433641);
--md-sys-color-primary: light-dark(#a853ad, #c86fcb);
--md-sys-color-primary-container: light-dark(#ffc7fb, #64116d);
--md-sys-color-primary-dim: light-dark(#9a469f, #c970cc);
--md-sys-color-primary-fixed: light-dark(#ffc7fb, #802e86);
--md-sys-color-primary-fixed-dim: light-dark(#fa9bfb, #64116d);
--md-sys-color-primary-palette-key-color: light-dark(#ab56af, #ab56af);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#8f688d, #ad83aa);
--md-sys-color-secondary-container: light-dark(#f9caf5, #502e50);
--md-sys-color-secondary-dim: light-dark(#815b80, #ad84ab);
--md-sys-color-secondary-fixed: light-dark(#f9caf5, #694568);
--md-sys-color-secondary-fixed-dim: light-dark(#dcafd8, #502e50);
--md-sys-color-secondary-palette-key-color: light-dark(#916a90, #916a90);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff7fa, #181117);
--md-sys-color-surface-bright: light-dark(#fff7fa, #3f373d);
--md-sys-color-surface-container: light-dark(#f8eaf3, #241d23);
--md-sys-color-surface-container-high: light-dark(#f2e4ed, #2f282e);
--md-sys-color-surface-container-highest: light-dark(#ecdfe7, #3a3239);
--md-sys-color-surface-container-low: light-dark(#fef0f8, #20191f);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #120c12);
--md-sys-color-surface-dim: light-dark(#e3d6df, #181117);
--md-sys-color-surface-tint: light-dark(#8f3c94, #ffa9ff);
--md-sys-color-surface-variant: light-dark(#f0ddeb, #50434e);
--md-sys-color-tertiary: light-dark(#7b763d, #989356);
--md-sys-color-tertiary-container: light-dark(#e2db98, #3f3b07);
--md-sys-color-tertiary-dim: light-dark(#6e6a32, #999357);
--md-sys-color-tertiary-fixed: light-dark(#e2db98, #57521d);
--md-sys-color-tertiary-fixed-dim: light-dark(#c6bf7e, #3f3b07);
--md-sys-color-tertiary-palette-key-color: light-dark(#b3ad6e, #b3ad6e);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fff7fa, #181117);
--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, #75237c);
--md-sys-color-inverse-surface: light-dark(#362e34, #ecdfe7);
--md-sys-color-neutral-palette-key-color: light-dark(#7e747b, #7e747b);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#82737f, #82737f);
--md-sys-color-on-background: light-dark(#20191f, #ecdfe7);
--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, #1c001f);
--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, #1b011e);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #220524);
--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, #0d0c00);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #131200);
--md-sys-color-outline: light-dark(#342933, #feeaf9);
--md-sys-color-outline-variant: light-dark(#524550, #cfbdcb);
--md-sys-color-primary: light-dark(#37003d, #ffeafa);
--md-sys-color-primary-container: light-dark(#590062, #ffa2ff);
--md-sys-color-primary-dim: light-dark(#3d0043, #ffebfa);
--md-sys-color-primary-fixed: light-dark(#76257d, #ffd6fa);
--md-sys-color-primary-fixed-dim: light-dark(#5c0464, #ffa9ff);
--md-sys-color-primary-palette-key-color: light-dark(#ab56af, #ab56af);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#402041, #ffeafa);
--md-sys-color-secondary-container: light-dark(#603d60, #e2b4de);
--md-sys-color-secondary-dim: light-dark(#321333, #ffebfa);
--md-sys-color-secondary-fixed: light-dark(#603d60, #ffd6fa);
--md-sys-color-secondary-fixed-dim: light-dark(#472748, #e6b8e2);
--md-sys-color-secondary-palette-key-color: light-dark(#916a90, #916a90);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff7fa, #181117);
--md-sys-color-surface-bright: light-dark(#fff7fa, #564d54);
--md-sys-color-surface-container: light-dark(#ecdfe7, #362e34);
--md-sys-color-surface-container-high: light-dark(#ded1d9, #41393f);
--md-sys-color-surface-container-highest: light-dark(#d0c3cb, #4d444b);
--md-sys-color-surface-container-low: light-dark(#fbedf5, #241d23);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#c1b5bd, #181117);
--md-sys-color-surface-tint: light-dark(#8f3c94, #ffa9ff);
--md-sys-color-surface-variant: light-dark(#f0ddeb, #50434e);
--md-sys-color-tertiary: light-dark(#302d00, #faf2ad);
--md-sys-color-tertiary-container: light-dark(#4f4b16, #cbc583);
--md-sys-color-tertiary-dim: light-dark(#232000, #faf3ae);
--md-sys-color-tertiary-fixed: light-dark(#4f4b16, #ece5a1);
--md-sys-color-tertiary-fixed-dim: light-dark(#373401, #cfc987);
--md-sys-color-tertiary-palette-key-color: light-dark(#b3ad6e, #b3ad6e);
}