web-expressive/dist/schemes/paper-vibrant.css

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

@layer design-system.tokens{html,[data-theme=paper-vibrant]{--sys-color-primary:light-dark(#5331ff,#c6bfff);--sys-color-surface-tint:light-dark(#5331ff,#c6bfff);--sys-color-on-primary:light-dark(#fff,#2800a0);--sys-color-primary-container:light-dark(#e4dfff,#3b00df);--sys-color-on-primary-container:light-dark(#3b00df,#e4dfff);--sys-color-secondary:light-dark(#66587b,#d1bfe7);--sys-color-on-secondary:light-dark(#fff,#372a4a);--sys-color-secondary-container:light-dark(#ecdcff,#4e4162);--sys-color-on-secondary-container:light-dark(#4e4162,#ecdcff);--sys-color-tertiary:light-dark(#73527f,#e1b9ed);--sys-color-on-tertiary:light-dark(#fff,#42244e);--sys-color-tertiary-container:light-dark(#f8d8ff,#5a3b66);--sys-color-on-tertiary-container:light-dark(#5a3b66,#f8d8ff);--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(#93000a,#ffdad6);--sys-color-background:light-dark(#fcf8ff,#13121c);--sys-color-on-background:light-dark(#1c1a25,#e5e0ef);--sys-color-surface:light-dark(#fcf8ff,#13121c);--sys-color-on-surface:light-dark(#1c1a25,#e5e0ef);--sys-color-surface-variant:light-dark(#e5e0f2,#474554);--sys-color-on-surface-variant:light-dark(#474554,#c8c4d6);--sys-color-outline:light-dark(#787585,#928f9f);--sys-color-outline-variant:light-dark(#c8c4d6,#474554);--sys-color-shadow:#000;--sys-color-scrim:#000;--sys-color-inverse-surface:light-dark(#312f3a,#e5e0ef);--sys-color-inverse-on-surface:light-dark(#f3eefd,#312f3a);--sys-color-inverse-primary:light-dark(#c6bfff,#5331ff);--sys-color-primary-fixed:#e4dfff;--sys-color-on-primary-fixed:#160066;--sys-color-primary-fixed-dim:#c6bfff;--sys-color-on-primary-fixed-variant:#3b00df;--sys-color-secondary-fixed:#ecdcff;--sys-color-on-secondary-fixed:#211534;--sys-color-secondary-fixed-dim:#d1bfe7;--sys-color-on-secondary-fixed-variant:#4e4162;--sys-color-tertiary-fixed:#f8d8ff;--sys-color-on-tertiary-fixed:#2b0e38;--sys-color-tertiary-fixed-dim:#e1b9ed;--sys-color-on-tertiary-fixed-variant:#5a3b66;--sys-color-surface-dim:light-dark(#dcd8e6,#13121c);--sys-color-surface-bright:light-dark(#fcf8ff,#393843);--sys-color-surface-container-lowest:light-dark(#fff,#0e0d17);--sys-color-surface-container-low:light-dark(#f6f1ff,#1c1a25);--sys-color-surface-container:light-dark(#f0ecfb,#201e29);--sys-color-surface-container-high:light-dark(#eae6f5,#2a2933);--sys-color-surface-container-highest:light-dark(#e5e0ef,#35333f)}}