@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(#faf8ff, #121318);
--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(#f1f0f7, #2f3035);
--md-sys-color-inverse-primary: light-dark(#b1c5ff, #3e5ca3);
--md-sys-color-inverse-surface: light-dark(#2f3035, #e3e2e8);
--md-sys-color-neutral-palette-key-color: light-dark(#76777d, #76777d);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#747782, #747782);
--md-sys-color-on-background: light-dark(#1a1b20, #e3e2e8);
--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, #002c72);
--md-sys-color-on-primary-container: light-dark(#7a96e2, #7a96e2);
--md-sys-color-on-primary-fixed: light-dark(#001847, #001847);
--md-sys-color-on-primary-fixed-variant: light-dark(#234389, #234389);
--md-sys-color-on-secondary: light-dark(#ffffff, #25304b);
--md-sys-color-on-secondary-container: light-dark(#56607e, #adb8d9);
--md-sys-color-on-secondary-fixed: light-dark(#101b35, #101b35);
--md-sys-color-on-secondary-fixed-variant: light-dark(#3c4662, #3c4662);
--md-sys-color-on-surface: light-dark(#1a1b20, #e3e2e8);
--md-sys-color-on-surface-variant: light-dark(#444651, #c4c6d2);
--md-sys-color-on-tertiary: light-dark(#ffffff, #5b1a01);
--md-sys-color-on-tertiary-container: light-dark(#df7f5b, #df7f5b);
--md-sys-color-on-tertiary-fixed: light-dark(#380d00, #380d00);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#793013, #793013);
--md-sys-color-outline: light-dark(#747782, #8e909c);
--md-sys-color-outline-variant: light-dark(#c4c6d2, #444651);
--md-sys-color-primary: light-dark(#001947, #b1c5ff);
--md-sys-color-primary-container: light-dark(#002c72, #002c72);
--md-sys-color-primary-dim: light-dark(#304f96, #94b1ff);
--md-sys-color-primary-fixed: light-dark(#dae2ff, #dae2ff);
--md-sys-color-primary-fixed-dim: light-dark(#b1c5ff, #b1c5ff);
--md-sys-color-primary-palette-key-color: light-dark(#5875be, #5875be);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#535e7b, #bbc6e8);
--md-sys-color-secondary-container: light-dark(#d2dcff, #3e4865);
--md-sys-color-secondary-dim: light-dark(#48526f, #d2dcff);
--md-sys-color-secondary-fixed: light-dark(#dae2ff, #dae2ff);
--md-sys-color-secondary-fixed-dim: light-dark(#bbc6e8, #bbc6e8);
--md-sys-color-secondary-palette-key-color: light-dark(#6c7695, #6c7695);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#faf8ff, #121318);
--md-sys-color-surface-bright: light-dark(#faf8ff, #38393e);
--md-sys-color-surface-container: light-dark(#eeedf4, #1e1f24);
--md-sys-color-surface-container-high: light-dark(#e8e7ee, #292a2f);
--md-sys-color-surface-container-highest: light-dark(#e3e2e8, #33343a);
--md-sys-color-surface-container-low: light-dark(#f4f3fa, #1a1b20);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0d0e13);
--md-sys-color-surface-dim: light-dark(#dad9e0, #121318);
--md-sys-color-surface-tint: light-dark(#3e5ca3, #b1c5ff);
--md-sys-color-surface-variant: light-dark(#e0e2ef, #444651);
--md-sys-color-tertiary: light-dark(#390d00, #ffb59b);
--md-sys-color-tertiary-container: light-dark(#5b1b01, #5b1b01);
--md-sys-color-tertiary-dim: light-dark(#883b1e, #f9936f);
--md-sys-color-tertiary-fixed: light-dark(#ffdbcf, #ffdbcf);
--md-sys-color-tertiary-fixed-dim: light-dark(#ffb59b, #ffb59b);
--md-sys-color-tertiary-palette-key-color: light-dark(#5c1b01, #5c1b01);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#faf8ff, #121318);
--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(#98989e, #63646a);
--md-sys-color-inverse-primary: light-dark(#5a77c0, #617ec8);
--md-sys-color-inverse-surface: light-dark(#2f3035, #e3e2e8);
--md-sys-color-neutral-palette-key-color: light-dark(#76777d, #76777d);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#747782, #747782);
--md-sys-color-on-background: light-dark(#8f8f96, #616268);
--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(#fefcff, #002664);
--md-sys-color-on-primary-container: light-dark(#5a78c1, #6582cc);
--md-sys-color-on-primary-fixed: light-dark(#29498f, #aec3ff);
--md-sys-color-on-primary-fixed-variant: light-dark(#4664ab, #819eea);
--md-sys-color-on-secondary: light-dark(#fefcff, #1f2944);
--md-sys-color-on-secondary-container: light-dark(#6f7998, #7983a3);
--md-sys-color-on-secondary-fixed: light-dark(#414c68, #b9c3e5);
--md-sys-color-on-secondary-fixed-variant: light-dark(#5b6684, #959fc0);
--md-sys-color-on-surface: light-dark(#5e5f64, #a2a2a8);
--md-sys-color-on-surface-variant: light-dark(#787a85, #80838e);
--md-sys-color-on-tertiary: light-dark(#fffbff, #501600);
--md-sys-color-on-tertiary-container: light-dark(#ba6140, #c66b49);
--md-sys-color-on-tertiary-fixed: light-dark(#803518, #ffb196);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#a24e2f, #e88662);
--md-sys-color-outline: light-dark(#afb1bd, #51545e);
--md-sys-color-outline-variant: light-dark(#d7d8e5, #373a44);
--md-sys-color-primary: light-dark(#5572bb, #728fd9);
--md-sys-color-primary-container: light-dark(#ccd8ff, #11367c);
--md-sys-color-primary-dim: light-dark(#4865ad, #728fda);
--md-sys-color-primary-fixed: light-dark(#ccd8ff, #2f4e94);
--md-sys-color-primary-fixed-dim: light-dark(#a3bcff, #11367c);
--md-sys-color-primary-palette-key-color: light-dark(#5875be, #5875be);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#6a7492, #8690b0);
--md-sys-color-secondary-container: light-dark(#ced8fb, #2f3955);
--md-sys-color-secondary-dim: light-dark(#5d6785, #8690b0);
--md-sys-color-secondary-fixed: light-dark(#ced8fb, #46506d);
--md-sys-color-secondary-fixed-dim: light-dark(#b2bcde, #2f3955);
--md-sys-color-secondary-palette-key-color: light-dark(#6c7695, #6c7695);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#faf8ff, #121318);
--md-sys-color-surface-bright: light-dark(#faf8ff, #38393e);
--md-sys-color-surface-container: light-dark(#eeedf4, #1e1f24);
--md-sys-color-surface-container-high: light-dark(#e8e7ee, #292a2f);
--md-sys-color-surface-container-highest: light-dark(#e3e2e8, #33343a);
--md-sys-color-surface-container-low: light-dark(#f4f3fa, #1a1b20);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0d0e13);
--md-sys-color-surface-dim: light-dark(#dad9e0, #121318);
--md-sys-color-surface-tint: light-dark(#3e5ca3, #b1c5ff);
--md-sys-color-surface-variant: light-dark(#e0e2ef, #444651);
--md-sys-color-tertiary: light-dark(#b35c3c, #d67754);
--md-sys-color-tertiary-container: light-dark(#ffcebe, #682407);
--md-sys-color-tertiary-dim: light-dark(#a35030, #d67755);
--md-sys-color-tertiary-fixed: light-dark(#ffcebe, #863a1c);
--md-sys-color-tertiary-fixed-dim: light-dark(#ffa789, #682407);
--md-sys-color-tertiary-palette-key-color: light-dark(#5c1b01, #5c1b01);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#faf8ff, #121318);
--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(#b1c5ff, #24458b);
--md-sys-color-inverse-surface: light-dark(#2f3035, #e3e2e8);
--md-sys-color-neutral-palette-key-color: light-dark(#76777d, #76777d);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#747782, #747782);
--md-sys-color-on-background: light-dark(#1a1b20, #e3e2e8);
--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(#e8ecff, #000925);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #000f32);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #010a24);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #05102a);
--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(#ffe7e0, #1d0400);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #270600);
--md-sys-color-outline: light-dark(#292c35, #eeeffc);
--md-sys-color-outline-variant: light-dark(#464953, #c0c2ce);
--md-sys-color-primary: light-dark(#001947, #edefff);
--md-sys-color-primary-container: light-dark(#002c72, #acc1ff);
--md-sys-color-primary-dim: light-dark(#001c4f, #eef0ff);
--md-sys-color-primary-fixed: light-dark(#26468c, #dae2ff);
--md-sys-color-primary-fixed-dim: light-dark(#042e74, #b1c5ff);
--md-sys-color-primary-palette-key-color: light-dark(#5875be, #5875be);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#212b46, #edefff);
--md-sys-color-secondary-container: light-dark(#3e4865, #b8c2e4);
--md-sys-color-secondary-dim: light-dark(#141f39, #eef0ff);
--md-sys-color-secondary-fixed: light-dark(#3e4865, #dae2ff);
--md-sys-color-secondary-fixed-dim: light-dark(#28324d, #bbc6e8);
--md-sys-color-secondary-palette-key-color: light-dark(#6c7695, #6c7695);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#faf8ff, #121318);
--md-sys-color-surface-bright: light-dark(#faf8ff, #4f5055);
--md-sys-color-surface-container: light-dark(#e3e2e8, #2f3035);
--md-sys-color-surface-container-high: light-dark(#d4d4da, #3a3b40);
--md-sys-color-surface-container-highest: light-dark(#c6c6cc, #46464c);
--md-sys-color-surface-container-low: light-dark(#f1f0f7, #1e1f24);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#b9b8be, #121318);
--md-sys-color-surface-tint: light-dark(#3e5ca3, #b1c5ff);
--md-sys-color-surface-variant: light-dark(#e0e2ef, #444651);
--md-sys-color-tertiary: light-dark(#390d00, #ffece6);
--md-sys-color-tertiary-container: light-dark(#5b1b01, #ffaf94);
--md-sys-color-tertiary-dim: light-dark(#3f0f00, #ffede8);
--md-sys-color-tertiary-fixed: light-dark(#7c3215, #ffdbcf);
--md-sys-color-tertiary-fixed-dim: light-dark(#5e1d02, #ffb59b);
--md-sys-color-tertiary-palette-key-color: light-dark(#5c1b01, #5c1b01);
}