@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(#fff8f1, #171309);
--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(#faf0de, #353024);
--md-sys-color-inverse-primary: light-dark(#f4c001, #755b00);
--md-sys-color-inverse-surface: light-dark(#353024, #ebe1d0);
--md-sys-color-neutral-palette-key-color: light-dark(#7d7668, #7d7668);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#807660, #807660);
--md-sys-color-on-background: light-dark(#1f1b11, #ebe1d0);
--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, #3d2e00);
--md-sys-color-on-primary-container: light-dark(#675000, #675000);
--md-sys-color-on-primary-fixed: light-dark(#241a00, #241a00);
--md-sys-color-on-primary-fixed-variant: light-dark(#594400, #594400);
--md-sys-color-on-secondary: light-dark(#ffffff, #3d2e00);
--md-sys-color-on-secondary-container: light-dark(#766023, #d1b670);
--md-sys-color-on-secondary-fixed: light-dark(#241a00, #241a00);
--md-sys-color-on-secondary-fixed-variant: light-dark(#584408, #584408);
--md-sys-color-on-surface: light-dark(#1f1b11, #ebe1d0);
--md-sys-color-on-surface-variant: light-dark(#4e4632, #d2c5ab);
--md-sys-color-on-tertiary: light-dark(#ffffff, #003543);
--md-sys-color-on-tertiary-container: light-dark(#005a70, #005a70);
--md-sys-color-on-tertiary-fixed: light-dark(#001f28, #001f28);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#004e60, #004e60);
--md-sys-color-outline: light-dark(#807660, #9b9078);
--md-sys-color-outline-variant: light-dark(#d2c5ab, #4e4632);
--md-sys-color-primary: light-dark(#755b00, #ffe093);
--md-sys-color-primary-container: light-dark(#f4c002, #f4c002);
--md-sys-color-primary-dim: light-dark(#674f00, #f4c001);
--md-sys-color-primary-fixed: light-dark(#ffdf91, #ffdf91);
--md-sys-color-primary-fixed-dim: light-dark(#f4c001, #f4c001);
--md-sys-color-primary-palette-key-color: light-dark(#f4c002, #f4c002);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#715c1f, #e0c47c);
--md-sys-color-secondary-container: light-dark(#fbdd93, #5a470a);
--md-sys-color-secondary-dim: light-dark(#645014, #fbdd93);
--md-sys-color-secondary-fixed: light-dark(#fee096, #fee096);
--md-sys-color-secondary-fixed-dim: light-dark(#e0c47c, #e0c47c);
--md-sys-color-secondary-palette-key-color: light-dark(#8c7435, #8c7435);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f1, #171309);
--md-sys-color-surface-bright: light-dark(#fff8f1, #3e392d);
--md-sys-color-surface-container: light-dark(#f7eddb, #241f15);
--md-sys-color-surface-container-high: light-dark(#f1e7d6, #2e291e);
--md-sys-color-surface-container-highest: light-dark(#ebe1d0, #3a3429);
--md-sys-color-surface-container-low: light-dark(#fdf2e1, #1f1b11);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #120e05);
--md-sys-color-surface-dim: light-dark(#e3d9c8, #171309);
--md-sys-color-surface-tint: light-dark(#755b00, #f4c001);
--md-sys-color-surface-variant: light-dark(#efe1c6, #4e4632);
--md-sys-color-tertiary: light-dark(#00677f, #b7ebff);
--md-sys-color-tertiary-container: light-dark(#4dd6ff, #4dd6ff);
--md-sys-color-tertiary-dim: light-dark(#005a6f, #4dd6ff);
--md-sys-color-tertiary-fixed: light-dark(#b6eaff, #b6eaff);
--md-sys-color-tertiary-fixed-dim: light-dark(#4dd6ff, #4dd6ff);
--md-sys-color-tertiary-palette-key-color: light-dark(#4dd6ff, #4dd6ff);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#fff8f1, #171309);
--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(#9f9788, #6a6456);
--md-sys-color-inverse-primary: light-dark(#967500, #9f7c00);
--md-sys-color-inverse-surface: light-dark(#353024, #ebe1d0);
--md-sys-color-neutral-palette-key-color: light-dark(#7d7668, #7d7668);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#807660, #807660);
--md-sys-color-on-background: light-dark(#978f80, #686254);
--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, #352800);
--md-sys-color-on-primary-container: light-dark(#977500, #a37f00);
--md-sys-color-on-primary-fixed: light-dark(#5f4900, #f1bd00);
--md-sys-color-on-primary-fixed-variant: light-dark(#7f6300, #c59a00);
--md-sys-color-on-secondary: light-dark(#fffbff, #352800);
--md-sys-color-on-secondary-container: light-dark(#8f7738, #9a8141);
--md-sys-color-on-secondary-fixed: light-dark(#5d4a0e, #dec17a);
--md-sys-color-on-secondary-fixed-variant: light-dark(#7a6427, #b89d5a);
--md-sys-color-on-surface: light-dark(#655e51, #aaa292);
--md-sys-color-on-surface-variant: light-dark(#847a63, #8d826b);
--md-sys-color-on-tertiary: light-dark(#fafdff, #002e3a);
--md-sys-color-on-tertiary-container: light-dark(#0085a3, #0090b0);
--md-sys-color-on-tertiary-fixed: light-dark(#005367, #49d3fc);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#007089, #00aed5);
--md-sys-color-outline: light-dark(#bdb198, #5c533f);
--md-sys-color-outline-variant: light-dark(#e5d8bd, #413926);
--md-sys-color-primary: light-dark(#907000, #b28c00);
--md-sys-color-primary-container: light-dark(#ffd45f, #493800);
--md-sys-color-primary-dim: light-dark(#816400, #b38c00);
--md-sys-color-primary-fixed: light-dark(#ffd45f, #654e00);
--md-sys-color-primary-fixed-dim: light-dark(#e8b700, #493800);
--md-sys-color-primary-palette-key-color: light-dark(#f4c002, #f4c002);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#897233, #a78e4c);
--md-sys-color-secondary-container: light-dark(#f4d68d, #493800);
--md-sys-color-secondary-dim: light-dark(#7b6528, #a88e4d);
--md-sys-color-secondary-fixed: light-dark(#f4d68d, #634e13);
--md-sys-color-secondary-fixed-dim: light-dark(#d6ba74, #493800);
--md-sys-color-secondary-palette-key-color: light-dark(#8c7435, #8c7435);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f1, #171309);
--md-sys-color-surface-bright: light-dark(#fff8f1, #3e392d);
--md-sys-color-surface-container: light-dark(#f7eddb, #241f15);
--md-sys-color-surface-container-high: light-dark(#f1e7d6, #2e291e);
--md-sys-color-surface-container-highest: light-dark(#ebe1d0, #3a3429);
--md-sys-color-surface-container-low: light-dark(#fdf2e1, #1f1b11);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #120e05);
--md-sys-color-surface-dim: light-dark(#e3d9c8, #171309);
--md-sys-color-surface-tint: light-dark(#755b00, #f4c001);
--md-sys-color-surface-variant: light-dark(#efe1c6, #4e4632);
--md-sys-color-tertiary: light-dark(#007f9c, #009ec1);
--md-sys-color-tertiary-container: light-dark(#99e3ff, #004050);
--md-sys-color-tertiary-dim: light-dark(#00718b, #009ec1);
--md-sys-color-tertiary-fixed: light-dark(#99e3ff, #00596e);
--md-sys-color-tertiary-fixed-dim: light-dark(#3fccf5, #004050);
--md-sys-color-tertiary-palette-key-color: light-dark(#4dd6ff, #4dd6ff);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#fff8f1, #171309);
--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(#f4c001, #5a4500);
--md-sys-color-inverse-surface: light-dark(#353024, #ebe1d0);
--md-sys-color-neutral-palette-key-color: light-dark(#7d7668, #7d7668);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#807660, #807660);
--md-sys-color-on-background: light-dark(#1f1b11, #ebe1d0);
--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, #181100);
--md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #181000);
--md-sys-color-on-secondary: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-container: light-dark(#ffffff, #100a00);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #181000);
--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, #00141b);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #00141a);
--md-sys-color-outline: light-dark(#332b1a, #fdefd3);
--md-sys-color-outline-variant: light-dark(#514835, #cec1a8);
--md-sys-color-primary: light-dark(#382a00, #ffeecc);
--md-sys-color-primary-container: light-dark(#5b4600, #f4c002);
--md-sys-color-primary-dim: light-dark(#291e00, #ffefcf);
--md-sys-color-primary-fixed: light-dark(#5b4600, #ffdf91);
--md-sys-color-primary-fixed-dim: light-dark(#403100, #f4c001);
--md-sys-color-primary-palette-key-color: light-dark(#f4c002, #f4c002);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#382a00, #ffeecc);
--md-sys-color-secondary-container: light-dark(#5a470a, #dcc079);
--md-sys-color-secondary-dim: light-dark(#291e00, #ffefcf);
--md-sys-color-secondary-fixed: light-dark(#5a470a, #fee096);
--md-sys-color-secondary-fixed-dim: light-dark(#403100, #e0c47c);
--md-sys-color-secondary-palette-key-color: light-dark(#8c7435, #8c7435);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#fff8f1, #171309);
--md-sys-color-surface-bright: light-dark(#fff8f1, #564f43);
--md-sys-color-surface-container: light-dark(#ebe1d0, #353024);
--md-sys-color-surface-container-high: light-dark(#ddd3c3, #403b2f);
--md-sys-color-surface-container-highest: light-dark(#cfc5b5, #4c463a);
--md-sys-color-surface-container-low: light-dark(#faf0de, #241f15);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#c1b8a8, #171309);
--md-sys-color-surface-tint: light-dark(#755b00, #f4c001);
--md-sys-color-surface-variant: light-dark(#efe1c6, #4e4632);
--md-sys-color-tertiary: light-dark(#00313e, #dbf4ff);
--md-sys-color-tertiary-container: light-dark(#005063, #4dd6ff);
--md-sys-color-tertiary-dim: light-dark(#00232d, #ddf5ff);
--md-sys-color-tertiary-fixed: light-dark(#005063, #b6eaff);
--md-sys-color-tertiary-fixed-dim: light-dark(#003846, #4dd6ff);
--md-sys-color-tertiary-palette-key-color: light-dark(#4dd6ff, #4dd6ff);
}