@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(#f4c000, #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(#786225, #ceb26d);
--md-sys-color-on-secondary-fixed: light-dark(#241a00, #241a00);
--md-sys-color-on-secondary-fixed-variant: light-dark(#584407, #584407);
--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, #283500);
--md-sys-color-on-tertiary-container: light-dark(#465a00, #465a00);
--md-sys-color-on-tertiary-fixed: light-dark(#161f00, #161f00);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#3b4d00, #3b4d00);
--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(#f4c000, #f4c000);
--md-sys-color-primary-dim: light-dark(#674f00, #fdc814);
--md-sys-color-primary-fixed: light-dark(#ffdf91, #ffdf91);
--md-sys-color-primary-fixed-dim: light-dark(#f4c000, #f4c000);
--md-sys-color-primary-palette-key-color: light-dark(#f4c000, #f4c000);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#715c1f, #e0c47c);
--md-sys-color-secondary-container: light-dark(#fee095, #584407);
--md-sys-color-secondary-dim: light-dark(#645014, #fee095);
--md-sys-color-secondary-fixed: light-dark(#fee095, #fee095);
--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, #241f14);
--md-sys-color-surface-container-high: light-dark(#f1e7d6, #2e291e);
--md-sys-color-surface-container-highest: light-dark(#ebe1d0, #3a3428);
--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, #f4c000);
--md-sys-color-surface-variant: light-dark(#efe1c6, #4e4632);
--md-sys-color-tertiary: light-dark(#506600, #ccf163);
--md-sys-color-tertiary-container: light-dark(#b1d44a, #b1d44a);
--md-sys-color-tertiary-dim: light-dark(#465900, #d7fc6d);
--md-sys-color-tertiary-fixed: light-dark(#ccf063, #ccf063);
--md-sys-color-tertiary-fixed-dim: light-dark(#b1d44a, #b1d44a);
--md-sys-color-tertiary-palette-key-color: light-dark(#b1d44a, #b1d44a);
}
: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(#977600, #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(#5d4a0d, #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(#fbffe4, #222e00);
--md-sys-color-on-tertiary-container: light-dark(#688400, #718f00);
--md-sys-color-on-tertiary-fixed: light-dark(#405300, #aed147);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#576f00, #8bac24);
--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(#ffd45e, #493800);
--md-sys-color-primary-dim: light-dark(#816400, #b38c00);
--md-sys-color-primary-fixed: light-dark(#ffd45e, #654e00);
--md-sys-color-primary-fixed-dim: light-dark(#e8b700, #493800);
--md-sys-color-primary-palette-key-color: light-dark(#f4c000, #f4c000);
--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, #634e12);
--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, #241f14);
--md-sys-color-surface-container-high: light-dark(#f1e7d6, #2e291e);
--md-sys-color-surface-container-highest: light-dark(#ebe1d0, #3a3428);
--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, #f4c000);
--md-sys-color-surface-variant: light-dark(#efe1c6, #4e4632);
--md-sys-color-tertiary: light-dark(#637e00, #7c9c0f);
--md-sys-color-tertiary-container: light-dark(#c3e75a, #303f00);
--md-sys-color-tertiary-dim: light-dark(#587000, #7d9c10);
--md-sys-color-tertiary-fixed: light-dark(#c3e75a, #445800);
--md-sys-color-tertiary-fixed-dim: light-dark(#a7ca41, #303f00);
--md-sys-color-tertiary-palette-key-color: light-dark(#b1d44a, #b1d44a);
}
: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(#f4c000, #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, #0d1400);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #0d1300);
--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, #f4c000);
--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, #f4c000);
--md-sys-color-primary-palette-key-color: light-dark(#f4c000, #f4c000);
--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, #fee095);
--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(#ddd3c2, #403b2f);
--md-sys-color-surface-container-highest: light-dark(#cfc5b5, #4c463a);
--md-sys-color-surface-container-low: light-dark(#faf0de, #241f14);
--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, #f4c000);
--md-sys-color-surface-variant: light-dark(#efe1c6, #4e4632);
--md-sys-color-tertiary: light-dark(#243000, #d9fe6f);
--md-sys-color-tertiary-container: light-dark(#3d4f00, #b1d44a);
--md-sys-color-tertiary-dim: light-dark(#192300, #daff70);
--md-sys-color-tertiary-fixed: light-dark(#3d4f00, #ccf063);
--md-sys-color-tertiary-fixed-dim: light-dark(#2a3700, #b1d44a);
--md-sys-color-tertiary-palette-key-color: light-dark(#b1d44a, #b1d44a);
}