web-expressive/dist/schemes/monochrome.css

A standard-first frontend toolkit based on Material Expressive design language intent.

@layer design-system.tokens{html,[data-theme=monochrome]{--sys-color-primary:light-dark(#000,#fff);--sys-color-surface-tint:light-dark(#5e5e5e,#c6c6c6);--sys-color-on-primary:light-dark(#e2e2e2,#1b1b1b);--sys-color-primary-container:light-dark(#3b3b3b,#d4d4d4);--sys-color-on-primary-container:light-dark(#fff,#000);--sys-color-secondary:light-dark(#5e5e5e,#c6c6c6);--sys-color-on-secondary:light-dark(#fff,#1b1b1b);--sys-color-secondary-container:light-dark(#d4d4d4,#474747);--sys-color-on-secondary-container:light-dark(#1b1b1b,#e2e2e2);--sys-color-tertiary:light-dark(#3b3b3b,#e2e2e2);--sys-color-on-tertiary:light-dark(#e2e2e2,#1b1b1b);--sys-color-tertiary-container:light-dark(#747474,#919191);--sys-color-on-tertiary-container:light-dark(#fff,#000);--sys-color-error:light-dark(#ba1a1a,#ffb4ab);--sys-color-on-error:light-dark(#fff,#690005);--sys-color-error-container:light-dark(#ffdad6,#93000a);--sys-color-on-error-container:light-dark(#410002,#ffdad6);--sys-color-background:light-dark(#f9f9f9,#131313);--sys-color-on-background:light-dark(#1b1b1b,#e2e2e2);--sys-color-surface:light-dark(#f9f9f9,#131313);--sys-color-on-surface:light-dark(#1b1b1b,#e2e2e2);--sys-color-surface-variant:light-dark(#e2e2e2,#474747);--sys-color-on-surface-variant:light-dark(#474747,#c6c6c6);--sys-color-outline:light-dark(#777,#919191);--sys-color-outline-variant:light-dark(#c6c6c6,#474747);--sys-color-shadow:light-dark(#000,#000);--sys-color-scrim:light-dark(#000,#000);--sys-color-inverse-surface:light-dark(#303030,#e2e2e2);--sys-color-inverse-on-surface:light-dark(#f1f1f1,#303030);--sys-color-inverse-primary:light-dark(#c6c6c6,#5e5e5e);--sys-color-primary-fixed:light-dark(#5e5e5e,#5e5e5e);--sys-color-on-primary-fixed:light-dark(#fff,#fff);--sys-color-primary-fixed-dim:light-dark(#474747,#474747);--sys-color-on-primary-fixed-variant:light-dark(#e2e2e2,#e2e2e2);--sys-color-secondary-fixed:light-dark(#c6c6c6,#c6c6c6);--sys-color-on-secondary-fixed:light-dark(#1b1b1b,#1b1b1b);--sys-color-secondary-fixed-dim:light-dark(#ababab,#ababab);--sys-color-on-secondary-fixed-variant:light-dark(#3b3b3b,#3b3b3b);--sys-color-tertiary-fixed:light-dark(#5e5e5e,#5e5e5e);--sys-color-on-tertiary-fixed:light-dark(#fff,#fff);--sys-color-tertiary-fixed-dim:light-dark(#474747,#474747);--sys-color-on-tertiary-fixed-variant:light-dark(#e2e2e2,#e2e2e2);--sys-color-surface-dim:light-dark(#dadada,#131313);--sys-color-surface-bright:light-dark(#f9f9f9,#393939);--sys-color-surface-container-lowest:light-dark(#fff,#0e0e0e);--sys-color-surface-container-low:light-dark(#f3f3f3,#1b1b1b);--sys-color-surface-container:light-dark(#eee,#1f1f1f);--sys-color-surface-container-high:light-dark(#e8e8e8,#2a2a2a);--sys-color-surface-container-highest:light-dark(#e2e2e2,#353535)}}