@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(#fff8f5, #1c1107);
--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(#ffeee2, #3c2e22);
--md-sys-color-inverse-primary: light-dark(#ffb779, #8e4e00);
--md-sys-color-inverse-surface: light-dark(#3c2e22, #f6decd);
--md-sys-color-neutral-palette-key-color: light-dark(#867466, #867466);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#897362, #897362);
--md-sys-color-on-background: light-dark(#25190f, #f6decd);
--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, #4c2700);
--md-sys-color-on-primary-container: light-dark(#6c3a00, #ffdcc1);
--md-sys-color-on-primary-fixed: light-dark(#2e1500, #2e1500);
--md-sys-color-on-primary-fixed-variant: light-dark(#6c3a00, #6c3a00);
--md-sys-color-on-secondary: light-dark(#ffffff, #432c06);
--md-sys-color-on-secondary-container: light-dark(#5c421a, #ffddb2);
--md-sys-color-on-secondary-fixed: light-dark(#291800, #291800);
--md-sys-color-on-secondary-fixed-variant: light-dark(#5c421a, #5c421a);
--md-sys-color-on-surface: light-dark(#25190f, #f6decd);
--md-sys-color-on-surface-variant: light-dark(#564334, #dcc2ae);
--md-sys-color-on-tertiary: light-dark(#ffffff, #3d2e00);
--md-sys-color-on-tertiary-container: light-dark(#584401, #ffdf91);
--md-sys-color-on-tertiary-fixed: light-dark(#241a00, #241a00);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#584401, #584401);
--md-sys-color-outline: light-dark(#897362, #a48c7a);
--md-sys-color-outline-variant: light-dark(#dcc2ae, #564334);
--md-sys-color-primary: light-dark(#8e4e00, #ffb779);
--md-sys-color-primary-container: light-dark(#ffdcc1, #6c3a00);
--md-sys-color-primary-dim: light-dark(#7d4400, #fe8f00);
--md-sys-color-primary-fixed: light-dark(#ffdcc1, #ffdcc1);
--md-sys-color-primary-fixed-dim: light-dark(#ffb779, #ffb779);
--md-sys-color-primary-palette-key-color: light-dark(#fe8f00, #fe8f00);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#76592f, #e6c08d);
--md-sys-color-secondary-container: light-dark(#ffddb2, #5c421a);
--md-sys-color-secondary-dim: light-dark(#694d25, #fbd49f);
--md-sys-color-secondary-fixed: light-dark(#ffddb2, #ffddb2);
--md-sys-color-secondary-fixed-dim: light-dark(#e6c08d, #e6c08d);
--md-sys-color-secondary-palette-key-color: light-dark(#917246, #917246);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f5, #1c1107);
--md-sys-color-surface-bright: light-dark(#fff8f5, #45362a);
--md-sys-color-surface-container: light-dark(#ffeadc, #2a1d13);
--md-sys-color-surface-container-high: light-dark(#fce4d3, #35271c);
--md-sys-color-surface-container-highest: light-dark(#f6decd, #403226);
--md-sys-color-surface-container-low: light-dark(#fff1e8, #25190f);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #160c04);
--md-sys-color-surface-dim: light-dark(#edd6c5, #1c1107);
--md-sys-color-surface-tint: light-dark(#8e4e00, #ffb779);
--md-sys-color-surface-variant: light-dark(#f9ddc9, #564334);
--md-sys-color-tertiary: light-dark(#725c1a, #e2c377);
--md-sys-color-tertiary-container: light-dark(#ffdf91, #584401);
--md-sys-color-tertiary-dim: light-dark(#65500e, #fcdd8e);
--md-sys-color-tertiary-fixed: light-dark(#ffdf91, #ffdf91);
--md-sys-color-tertiary-fixed-dim: light-dark(#e2c377, #e2c377);
--md-sys-color-tertiary-palette-key-color: light-dark(#8d7431, #8d7431);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fff8f5, #1c1107);
--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(#a99485, #736153);
--md-sys-color-inverse-primary: light-dark(#b66500, #c06b00);
--md-sys-color-inverse-surface: light-dark(#3c2e22, #f6decd);
--md-sys-color-neutral-palette-key-color: light-dark(#867466, #867466);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#897362, #897362);
--md-sys-color-on-background: light-dark(#a08c7d, #705f51);
--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, #422100);
--md-sys-color-on-primary-container: light-dark(#b66600, #c56e00);
--md-sys-color-on-primary-fixed: light-dark(#743f00, #ffb472);
--md-sys-color-on-primary-fixed-variant: light-dark(#9a5500, #ee8600);
--md-sys-color-on-secondary: light-dark(#fffbff, #3b2501);
--md-sys-color-on-secondary-container: light-dark(#947548, #9f7f51);
--md-sys-color-on-secondary-fixed: light-dark(#62471f, #e4be8b);
--md-sys-color-on-secondary-fixed-variant: light-dark(#7f6136, #bd9a6a);
--md-sys-color-on-surface: light-dark(#6d5c4e, #b49f8f);
--md-sys-color-on-surface-variant: light-dark(#8d7665, #967f6d);
--md-sys-color-on-tertiary: light-dark(#fffbff, #352800);
--md-sys-color-on-tertiary-container: light-dark(#907733, #9b813c);
--md-sys-color-on-tertiary-fixed: light-dark(#5e4907, #dfc175);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#7b6421, #b99d55);
--md-sys-color-outline: light-dark(#c7ad9a, #645041);
--md-sys-color-outline-variant: light-dark(#efd4bf, #483728);
--md-sys-color-primary: light-dark(#ae6100, #d77900);
--md-sys-color-primary-container: light-dark(#ffd0aa, #5a2f00);
--md-sys-color-primary-dim: light-dark(#9c5600, #d87900);
--md-sys-color-primary-fixed: light-dark(#ffd0aa, #7b4300);
--md-sys-color-primary-fixed-dim: light-dark(#ffaa5c, #5a2f00);
--md-sys-color-primary-palette-key-color: light-dark(#fe8f00, #fe8f00);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#8e6f43, #ad8b5c);
--md-sys-color-secondary-container: light-dark(#fad39e, #4e350e);
--md-sys-color-secondary-dim: light-dark(#806338, #ad8b5d);
--md-sys-color-secondary-fixed: light-dark(#fad39e, #674c23);
--md-sys-color-secondary-fixed-dim: light-dark(#dcb785, #4e350e);
--md-sys-color-secondary-palette-key-color: light-dark(#917246, #917246);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f5, #1c1107);
--md-sys-color-surface-bright: light-dark(#fff8f5, #45362a);
--md-sys-color-surface-container: light-dark(#ffeadc, #2a1d13);
--md-sys-color-surface-container-high: light-dark(#fce4d3, #35271c);
--md-sys-color-surface-container-highest: light-dark(#f6decd, #403226);
--md-sys-color-surface-container-low: light-dark(#fff1e8, #25190f);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #160c04);
--md-sys-color-surface-dim: light-dark(#edd6c5, #1c1107);
--md-sys-color-surface-tint: light-dark(#8e4e00, #ffb779);
--md-sys-color-surface-variant: light-dark(#f9ddc9, #564334);
--md-sys-color-tertiary: light-dark(#8a722e, #a88e47);
--md-sys-color-tertiary-container: light-dark(#f5d688, #493800);
--md-sys-color-tertiary-dim: light-dark(#7c6523, #a98e48);
--md-sys-color-tertiary-fixed: light-dark(#f5d688, #644e0c);
--md-sys-color-tertiary-fixed-dim: light-dark(#d8ba6f, #493800);
--md-sys-color-tertiary-palette-key-color: light-dark(#8d7431, #8d7431);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fff8f5, #1c1107);
--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(#ffb779, #6e3b00);
--md-sys-color-inverse-surface: light-dark(#3c2e22, #f6decd);
--md-sys-color-neutral-palette-key-color: light-dark(#867466, #867466);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#897362, #897362);
--md-sys-color-on-background: light-dark(#25190f, #f6decd);
--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, #160800);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #1f0c00);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #130900);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #1b0f00);
--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, #100a00);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #181000);
--md-sys-color-outline: light-dark(#39291b, #ffede0);
--md-sys-color-outline-variant: light-dark(#584536, #d8beaa);
--md-sys-color-primary: light-dark(#462300, #ffede0);
--md-sys-color-primary-container: light-dark(#703c00, #ffb26d);
--md-sys-color-primary-dim: light-dark(#331900, #ffeee2);
--md-sys-color-primary-fixed: light-dark(#703c00, #ffdcc1);
--md-sys-color-primary-fixed-dim: light-dark(#4f2900, #ffb779);
--md-sys-color-primary-palette-key-color: light-dark(#fe8f00, #fe8f00);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#3e2803, #ffedda);
--md-sys-color-secondary-container: light-dark(#5f441c, #e2bc8a);
--md-sys-color-secondary-dim: light-dark(#2e1c00, #ffeedc);
--md-sys-color-secondary-fixed: light-dark(#5f441c, #ffddb2);
--md-sys-color-secondary-fixed-dim: light-dark(#452e07, #e6c08d);
--md-sys-color-secondary-palette-key-color: light-dark(#917246, #917246);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f5, #1c1107);
--md-sys-color-surface-bright: light-dark(#fff8f5, #5d4d40);
--md-sys-color-surface-container: light-dark(#f6decd, #3c2e22);
--md-sys-color-surface-container-high: light-dark(#e7d0bf, #47392d);
--md-sys-color-surface-container-highest: light-dark(#d9c2b2, #534437);
--md-sys-color-surface-container-low: light-dark(#ffeee2, #2a1d13);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#cbb5a5, #1c1107);
--md-sys-color-surface-tint: light-dark(#8e4e00, #ffb779);
--md-sys-color-surface-variant: light-dark(#f9ddc9, #564334);
--md-sys-color-tertiary: light-dark(#382a00, #ffeecc);
--md-sys-color-tertiary-container: light-dark(#5b4603, #ddc074);
--md-sys-color-tertiary-dim: light-dark(#291e00, #ffefcf);
--md-sys-color-tertiary-fixed: light-dark(#5b4603, #ffdf91);
--md-sys-color-tertiary-fixed-dim: light-dark(#403100, #e2c377);
--md-sys-color-tertiary-palette-key-color: light-dark(#8d7431, #8d7431);
}