@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(#faf8fd, #121317);
--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(#f2f0f5, #303034);
--md-sys-color-inverse-primary: light-dark(#b1c5ff, #495d90);
--md-sys-color-inverse-surface: light-dark(#303034, #e3e2e7);
--md-sys-color-neutral-palette-key-color: light-dark(#77777b, #77777b);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#757780, #757780);
--md-sys-color-on-background: light-dark(#1b1b1f, #e3e2e7);
--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, #182e5f);
--md-sys-color-on-primary-container: light-dark(#3d5183, #3d5183);
--md-sys-color-on-primary-fixed: light-dark(#001847, #001847);
--md-sys-color-on-primary-fixed-variant: light-dark(#314577, #314577);
--md-sys-color-on-secondary: light-dark(#ffffff, #293044);
--md-sys-color-on-secondary-container: light-dark(#5b6278, #aeb4cd);
--md-sys-color-on-secondary-fixed: light-dark(#141b2e, #141b2e);
--md-sys-color-on-secondary-fixed-variant: light-dark(#3f465b, #3f465b);
--md-sys-color-on-surface: light-dark(#1b1b1f, #e3e2e7);
--md-sys-color-on-surface-variant: light-dark(#44464f, #c5c6d0);
--md-sys-color-on-tertiary: light-dark(#ffffff, #402d00);
--md-sys-color-on-tertiary-container: light-dark(#6a4e01, #6a4e01);
--md-sys-color-on-tertiary-fixed: light-dark(#261a00, #261a00);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#5c4300, #5c4300);
--md-sys-color-outline: light-dark(#757780, #8f909a);
--md-sys-color-outline-variant: light-dark(#c5c6d0, #44464f);
--md-sys-color-primary: light-dark(#495d90, #d9e1ff);
--md-sys-color-primary-container: light-dark(#b1c5ff, #b1c5ff);
--md-sys-color-primary-dim: light-dark(#3d5183, #b1c5ff);
--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(#6276ab, #6276ab);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#575e74, #bfc6df);
--md-sys-color-secondary-container: light-dark(#d8dff9, #3f465b);
--md-sys-color-secondary-dim: light-dark(#4b5267, #dbe2fc);
--md-sys-color-secondary-fixed: light-dark(#dbe2fc, #dbe2fc);
--md-sys-color-secondary-fixed-dim: light-dark(#bfc6df, #bfc6df);
--md-sys-color-secondary-palette-key-color: light-dark(#6f768d, #6f768d);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#faf8fd, #121317);
--md-sys-color-surface-bright: light-dark(#faf8fd, #38393d);
--md-sys-color-surface-container: light-dark(#efedf2, #1f1f23);
--md-sys-color-surface-container-high: light-dark(#e9e7ec, #292a2d);
--md-sys-color-surface-container-highest: light-dark(#e3e2e7, #343438);
--md-sys-color-surface-container-low: light-dark(#f5f3f8, #1b1b1f);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0d0e11);
--md-sys-color-surface-dim: light-dark(#dbd9de, #121317);
--md-sys-color-surface-tint: light-dark(#495d90, #b1c5ff);
--md-sys-color-surface-variant: light-dark(#e1e2ed, #44464f);
--md-sys-color-tertiary: light-dark(#785a0f, #ffde9f);
--md-sys-color-tertiary-container: light-dark(#e9c16e, #e9c16e);
--md-sys-color-tertiary-dim: light-dark(#6a4e01, #fed57f);
--md-sys-color-tertiary-fixed: light-dark(#ffdfa0, #ffdfa0);
--md-sys-color-tertiary-fixed-dim: light-dark(#e9c16e, #e9c16e);
--md-sys-color-tertiary-palette-key-color: light-dark(#e9c16e, #e9c16e);
}
:root[low-contrast] {
--md-sys-color-background: light-dark(#faf8fd, #121317);
--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(#98989c, #646468);
--md-sys-color-inverse-primary: light-dark(#6578ad, #6b7fb5);
--md-sys-color-inverse-surface: light-dark(#303034, #e3e2e7);
--md-sys-color-neutral-palette-key-color: light-dark(#77777b, #77777b);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#757780, #757780);
--md-sys-color-on-background: light-dark(#908f94, #626266);
--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, #102758);
--md-sys-color-on-primary-container: light-dark(#6579ae, #6f83b9);
--md-sys-color-on-primary-fixed: light-dark(#364b7d, #afc3fd);
--md-sys-color-on-primary-fixed-variant: light-dark(#516599, #8b9fd6);
--md-sys-color-on-secondary: light-dark(#fefcff, #22293d);
--md-sys-color-on-secondary-container: light-dark(#727990, #7d849b);
--md-sys-color-on-secondary-fixed: light-dark(#454c61, #bdc3dd);
--md-sys-color-on-secondary-fixed-variant: light-dark(#5f667c, #999fb8);
--md-sys-color-on-surface: light-dark(#5f5f63, #a3a2a7);
--md-sys-color-on-surface-variant: light-dark(#797a84, #81838c);
--md-sys-color-on-tertiary: light-dark(#fffbff, #372700);
--md-sys-color-on-tertiary-container: light-dark(#96752a, #a17f33);
--md-sys-color-on-tertiary-fixed: light-dark(#634800, #e6bf6c);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#806217, #c09b4c);
--md-sys-color-outline: light-dark(#b0b1bc, #52545d);
--md-sys-color-outline-variant: light-dark(#d7d8e3, #383a42);
--md-sys-color-primary: light-dark(#5f73a8, #7c8fc6);
--md-sys-color-primary-container: light-dark(#ccd8ff, #233869);
--md-sys-color-primary-dim: light-dark(#53669a, #7c90c7);
--md-sys-color-primary-fixed: light-dark(#ccd8ff, #3b4f82);
--md-sys-color-primary-fixed-dim: light-dark(#a8bcf5, #233869);
--md-sys-color-primary-palette-key-color: light-dark(#6276ab, #6276ab);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#6d748b, #8990a8);
--md-sys-color-secondary-container: light-dark(#d1d8f2, #333a4e);
--md-sys-color-secondary-dim: light-dark(#60677e, #8a91a8);
--md-sys-color-secondary-fixed: light-dark(#d1d8f2, #495166);
--md-sys-color-secondary-fixed-dim: light-dark(#b6bcd6, #333a4e);
--md-sys-color-secondary-palette-key-color: light-dark(#6f768d, #6f768d);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#faf8fd, #121317);
--md-sys-color-surface-bright: light-dark(#faf8fd, #38393d);
--md-sys-color-surface-container: light-dark(#efedf2, #1f1f23);
--md-sys-color-surface-container-high: light-dark(#e9e7ec, #292a2d);
--md-sys-color-surface-container-highest: light-dark(#e3e2e7, #343438);
--md-sys-color-surface-container-low: light-dark(#f5f3f8, #1b1b1f);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #0d0e11);
--md-sys-color-surface-dim: light-dark(#dbd9de, #121317);
--md-sys-color-surface-tint: light-dark(#495d90, #b1c5ff);
--md-sys-color-surface-variant: light-dark(#e1e2ed, #44464f);
--md-sys-color-tertiary: light-dark(#907025, #af8c3f);
--md-sys-color-tertiary-container: light-dark(#fdd37e, #4c3700);
--md-sys-color-tertiary-dim: light-dark(#826319, #af8c3f);
--md-sys-color-tertiary-fixed: light-dark(#fdd37e, #694c00);
--md-sys-color-tertiary-fixed-dim: light-dark(#dfb866, #4c3700);
--md-sys-color-tertiary-palette-key-color: light-dark(#e9c16e, #e9c16e);
}
:root[high-contrast] {
--md-sys-color-background: light-dark(#faf8fd, #121317);
--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, #324678);
--md-sys-color-inverse-surface: light-dark(#303034, #e3e2e7);
--md-sys-color-neutral-palette-key-color: light-dark(#77777b, #77777b);
--md-sys-color-neutral-variant-palette-key-color: light-dark(#757780, #757780);
--md-sys-color-on-background: light-dark(#1b1b1f, #e3e2e7);
--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, #000e31);
--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, #040a1d);
--md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #091123);
--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, #190f00);
--md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
--md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #191000);
--md-sys-color-outline: light-dark(#2a2c34, #efeffa);
--md-sys-color-outline-variant: light-dark(#474952, #c1c2cc);
--md-sys-color-primary: light-dark(#132a5a, #edefff);
--md-sys-color-primary-container: light-dark(#334779, #b1c5ff);
--md-sys-color-primary-dim: light-dark(#021c4d, #eef0ff);
--md-sys-color-primary-fixed: light-dark(#334779, #dae2ff);
--md-sys-color-primary-fixed-dim: light-dark(#1b3161, #b1c5ff);
--md-sys-color-primary-palette-key-color: light-dark(#6276ab, #6276ab);
--md-sys-color-scrim: light-dark(#000000, #000000);
--md-sys-color-secondary: light-dark(#252c3f, #edefff);
--md-sys-color-secondary-container: light-dark(#42495e, #bbc2db);
--md-sys-color-secondary-dim: light-dark(#181f32, #eef0ff);
--md-sys-color-secondary-fixed: light-dark(#42495e, #dbe2fc);
--md-sys-color-secondary-fixed-dim: light-dark(#2b3246, #bfc6df);
--md-sys-color-secondary-palette-key-color: light-dark(#6f768d, #6f768d);
--md-sys-color-shadow: light-dark(#000000, #000000);
--md-sys-color-surface: light-dark(#faf8fd, #121317);
--md-sys-color-surface-bright: light-dark(#faf8fd, #4f5054);
--md-sys-color-surface-container: light-dark(#e3e2e7, #303034);
--md-sys-color-surface-container-high: light-dark(#d5d4d8, #3b3b3f);
--md-sys-color-surface-container-highest: light-dark(#c7c6ca, #46464a);
--md-sys-color-surface-container-low: light-dark(#f2f0f5, #1f1f23);
--md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
--md-sys-color-surface-dim: light-dark(#b9b8bd, #121317);
--md-sys-color-surface-tint: light-dark(#495d90, #b1c5ff);
--md-sys-color-surface-variant: light-dark(#e1e2ed, #44464f);
--md-sys-color-tertiary: light-dark(#3a2900, #ffeed2);
--md-sys-color-tertiary-container: light-dark(#5f4500, #e9c16e);
--md-sys-color-tertiary-dim: light-dark(#2b1d00, #ffefd5);
--md-sys-color-tertiary-fixed: light-dark(#5f4500, #ffdfa0);
--md-sys-color-tertiary-fixed-dim: light-dark(#433000, #e9c16e);
--md-sys-color-tertiary-palette-key-color: light-dark(#e9c16e, #e9c16e);
}