@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(#f3fbf7, #0d1513);
--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(#eaf3ef, #2a3230);
--md-sys-color-inverse-primary: light-dark(#01dfc0, #006b5b);
--md-sys-color-inverse-surface: light-dark(#2a3230, #dce4e0);
--md-sys-color-neutral-palette-key-color: light-dark(#707976, #707976);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#6a7a75, #6a7a75);
--md-sys-color-on-background: light-dark(#151d1b, #dce4e0);
--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, #00382e);
--md-sys-color-on-primary-container: light-dark(#005d4f, #005d4f);
--md-sys-color-on-primary-fixed: light-dark(#00201a, #00201a);
--md-sys-color-on-primary-fixed-variant: light-dark(#005144, #005144);
--md-sys-color-on-secondary: light-dark(#ffffff, #00382e);
--md-sys-color-on-secondary-container: light-dark(#336c60, #87c0b2);
--md-sys-color-on-secondary-fixed: light-dark(#00201a, #00201a);
--md-sys-color-on-secondary-fixed-variant: light-dark(#115044, #115044);
--md-sys-color-on-surface: light-dark(#151d1b, #dce4e0);
--md-sys-color-on-surface-variant: light-dark(#3b4a46, #bacac4);
--md-sys-color-on-tertiary: light-dark(#ffffff, #452b00);
--md-sys-color-on-tertiary-container: light-dark(#724a00, #724a00);
--md-sys-color-on-tertiary-fixed: light-dark(#291800, #291800);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#624000, #624000);
--md-sys-color-outline: light-dark(#6b7a75, #84948f);
--md-sys-color-outline-variant: light-dark(#bacac4, #3b4a46);
--md-sys-color-primary: light-dark(#006b5b, #49fcdc);
--md-sys-color-primary-container: light-dark(#00dfc0, #00dfc0);
--md-sys-color-primary-dim: light-dark(#005e4f, #36f1d1);
--md-sys-color-primary-fixed: light-dark(#49fcdc, #49fcdc);
--md-sys-color-primary-fixed-dim: light-dark(#01dfc0, #01dfc0);
--md-sys-color-primary-palette-key-color: light-dark(#00dfc0, #00dfc0);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#2f685c, #98d2c3);
--md-sys-color-secondary-container: light-dark(#b0ecdc, #115044);
--md-sys-color-secondary-dim: light-dark(#215c50, #b3eedf);
--md-sys-color-secondary-fixed: light-dark(#b3eedf, #b3eedf);
--md-sys-color-secondary-fixed-dim: light-dark(#98d2c3, #98d2c3);
--md-sys-color-secondary-palette-key-color: light-dark(#488174, #488174);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f3fbf7, #0d1513);
--md-sys-color-surface-bright: light-dark(#f3fbf7, #333b38);
--md-sys-color-surface-container: light-dark(#e7f0ec, #19211f);
--md-sys-color-surface-container-high: light-dark(#e2eae6, #242c29);
--md-sys-color-surface-container-highest: light-dark(#dce4e0, #2e3634);
--md-sys-color-surface-container-low: light-dark(#edf6f1, #151d1b);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #08100e);
--md-sys-color-surface-dim: light-dark(#d3dcd8, #0d1513);
--md-sys-color-surface-tint: light-dark(#006b5b, #01dfc0);
--md-sys-color-surface-variant: light-dark(#d5e6e0, #3b4a46);
--md-sys-color-tertiary: light-dark(#825500, #ffddb2);
--md-sys-color-tertiary-container: light-dark(#ffb94d, #ffb94d);
--md-sys-color-tertiary-dim: light-dark(#724a00, #f9b448);
--md-sys-color-tertiary-fixed: light-dark(#ffddb2, #ffddb2);
--md-sys-color-tertiary-fixed-dim: light-dark(#ffb94e, #ffb94e);
--md-sys-color-tertiary-palette-key-color: light-dark(#ffb94d, #ffb94d);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#f3fbf7, #0d1513);
--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(#929a97, #5e6663);
--md-sys-color-inverse-primary: light-dark(#008976, #00917c);
--md-sys-color-inverse-surface: light-dark(#2a3230, #dce4e0);
--md-sys-color-neutral-palette-key-color: light-dark(#707976, #707976);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#6a7a75, #6a7a75);
--md-sys-color-on-background: light-dark(#89928f, #5c6461);
--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(#f4fffa, #003028);
--md-sys-color-on-primary-container: light-dark(#008a76, #009580);
--md-sys-color-on-primary-fixed: light-dark(#005749, #00dcbe);
--md-sys-color-on-primary-fixed-variant: light-dark(#007463, #00b49b);
--md-sys-color-on-secondary: light-dark(#f4fffa, #003028);
--md-sys-color-on-secondary-container: light-dark(#4c8477, #568f81);
--md-sys-color-on-secondary-fixed: light-dark(#19554a, #95cfc0);
--md-sys-color-on-secondary-fixed-variant: light-dark(#377064, #72ab9d);
--md-sys-color-on-surface: light-dark(#58615e, #9ca5a1);
--md-sys-color-on-surface-variant: light-dark(#6e7e79, #778781);
--md-sys-color-on-tertiary: light-dark(#fffbff, #3c2500);
--md-sys-color-on-tertiary-container: light-dark(#a66e00, #b37806);
--md-sys-color-on-tertiary-fixed: light-dark(#694500, #fdb74b);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#8c5d00, #d4942a);
--md-sys-color-outline: light-dark(#a5b6b0, #485753);
--md-sys-color-outline-variant: light-dark(#ccddd7, #2e3d39);
--md-sys-color-primary: light-dark(#008471, #00a38c);
--md-sys-color-primary-container: light-dark(#39f2d2, #004238);
--md-sys-color-primary-dim: light-dark(#007664, #00a48c);
--md-sys-color-primary-fixed: light-dark(#39f2d2, #005c4e);
--md-sys-color-primary-fixed-dim: light-dark(#00d5b7, #004238);
--md-sys-color-primary-palette-key-color: light-dark(#00dfc0, #00dfc0);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#467f72, #639b8e);
--md-sys-color-secondary-container: light-dark(#aae5d5, #004238);
--md-sys-color-secondary-dim: light-dark(#397265, #639c8e);
--md-sys-color-secondary-fixed: light-dark(#aae5d5, #1f5a4e);
--md-sys-color-secondary-fixed-dim: light-dark(#8ec9ba, #004238);
--md-sys-color-secondary-palette-key-color: light-dark(#488174, #488174);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f3fbf7, #0d1513);
--md-sys-color-surface-bright: light-dark(#f3fbf7, #333b38);
--md-sys-color-surface-container: light-dark(#e7f0ec, #19211f);
--md-sys-color-surface-container-high: light-dark(#e2eae6, #242c29);
--md-sys-color-surface-container-highest: light-dark(#dce4e0, #2e3634);
--md-sys-color-surface-container-low: light-dark(#edf6f1, #151d1b);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #08100e);
--md-sys-color-surface-dim: light-dark(#d3dcd8, #0d1513);
--md-sys-color-surface-tint: light-dark(#006b5b, #01dfc0);
--md-sys-color-surface-variant: light-dark(#d5e6e0, #3b4a46);
--md-sys-color-tertiary: light-dark(#9f6a00, #c28419);
--md-sys-color-tertiary-container: light-dark(#ffd194, #513400);
--md-sys-color-tertiary-dim: light-dark(#8e5e00, #c28519);
--md-sys-color-tertiary-fixed: light-dark(#ffd194, #704900);
--md-sys-color-tertiary-fixed-dim: light-dark(#f5b045, #513400);
--md-sys-color-tertiary-palette-key-color: light-dark(#ffb94d, #ffb94d);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#f3fbf7, #0d1513);
--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(#01dfc0, #005245);
--md-sys-color-inverse-surface: light-dark(#2a3230, #dce4e0);
--md-sys-color-neutral-palette-key-color: light-dark(#707976, #707976);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#6a7a75, #6a7a75);
--md-sys-color-on-background: light-dark(#151d1b, #dce4e0);
--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, #001410);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #001510);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #000e0a);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #001510);
--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, #1b0e00);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #1b0e00);
--md-sys-color-outline: light-dark(#202f2b, #e3f4ed);
--md-sys-color-outline-variant: light-dark(#3d4c48, #b6c6c0);
--md-sys-color-primary: light-dark(#00332a, #b2ffeb);
--md-sys-color-primary-container: light-dark(#005346, #00dfc0);
--md-sys-color-primary-dim: light-dark(#00251e, #b7ffec);
--md-sys-color-primary-fixed: light-dark(#005346, #49fcdc);
--md-sys-color-primary-fixed-dim: light-dark(#003a31, #01dfc0);
--md-sys-color-primary-palette-key-color: light-dark(#00dfc0, #00dfc0);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#00332a, #c0fcec);
--md-sys-color-secondary-container: light-dark(#155247, #94cebf);
--md-sys-color-secondary-dim: light-dark(#00251e, #c1fded);
--md-sys-color-secondary-fixed: light-dark(#155247, #b3eedf);
--md-sys-color-secondary-fixed-dim: light-dark(#003a31, #98d2c3);
--md-sys-color-secondary-palette-key-color: light-dark(#488174, #488174);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#f3fbf7, #0d1513);
--md-sys-color-surface-bright: light-dark(#f3fbf7, #4a524f);
--md-sys-color-surface-container: light-dark(#dce4e0, #2a3230);
--md-sys-color-surface-container-high: light-dark(#ced6d2, #353d3a);
--md-sys-color-surface-container-highest: light-dark(#c0c8c5, #404846);
--md-sys-color-surface-container-low: light-dark(#eaf3ef, #19211f);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#b2bbb7, #0d1513);
--md-sys-color-surface-tint: light-dark(#006b5b, #01dfc0);
--md-sys-color-surface-variant: light-dark(#d5e6e0, #3b4a46);
--md-sys-color-tertiary: light-dark(#3f2700, #ffedda);
--md-sys-color-tertiary-container: light-dark(#654200, #ffb94d);
--md-sys-color-tertiary-dim: light-dark(#2e1c00, #ffeedc);
--md-sys-color-tertiary-fixed: light-dark(#654200, #ffddb2);
--md-sys-color-tertiary-fixed-dim: light-dark(#482d00, #ffb94e);
--md-sys-color-tertiary-palette-key-color: light-dark(#ffb94d, #ffb94d);
}