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(#7b00fc,#d4bbff);--sys-color-surface-tint:light-dark(#7b00fc,#d4bbff);--sys-color-on-primary:light-dark(#fff,#41008b);--sys-color-primary-container:light-dark(#ebdcff,#5d00c2);--sys-color-on-primary-container:light-dark(#5d00c2,#ebdcff);--sys-color-secondary:light-dark(#6c5677,#d8bde4);--sys-color-on-secondary:light-dark(#fff,#3c2947);--sys-color-secondary-container:light-dark(#f4d9ff,#533f5f);--sys-color-on-secondary-container:light-dark(#533f5f,#f4d9ff);--sys-color-tertiary:light-dark(#79507a,#e8b7e7);--sys-color-on-tertiary:light-dark(#fff,#462349);--sys-color-tertiary-container:light-dark(#ffd6fc,#5f3961);--sys-color-on-tertiary-container:light-dark(#5f3961,#ffd6fc);--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(#fef7ff,#15121c);--sys-color-on-background:light-dark(#1e1a24,#e8dfee);--sys-color-surface:light-dark(#fef7ff,#15121c);--sys-color-on-surface:light-dark(#1e1a24,#e8dfee);--sys-color-surface-variant:light-dark(#e9dff1,#4a4453);--sys-color-on-surface-variant:light-dark(#4a4453,#ccc3d5);--sys-color-outline:light-dark(#7b7484,#968e9e);--sys-color-outline-variant:light-dark(#ccc3d5,#4a4453);--sys-color-shadow:light-dark(#000,#000);--sys-color-scrim:light-dark(#000,#000);--sys-color-inverse-surface:light-dark(#332e39,#e8dfee);--sys-color-inverse-on-surface:light-dark(#f7eefd,#332e39);--sys-color-inverse-primary:light-dark(#d4bbff,#7b00fc);--sys-color-primary-fixed:light-dark(#ebdcff,#ebdcff);--sys-color-on-primary-fixed:light-dark(#270058,#270058);--sys-color-primary-fixed-dim:light-dark(#d4bbff,#d4bbff);--sys-color-on-primary-fixed-variant:light-dark(#5d00c2,#5d00c2);--sys-color-secondary-fixed:light-dark(#f4d9ff,#f4d9ff);--sys-color-on-secondary-fixed:light-dark(#261431,#261431);--sys-color-secondary-fixed-dim:light-dark(#d8bde4,#d8bde4);--sys-color-on-secondary-fixed-variant:light-dark(#533f5f,#533f5f);--sys-color-tertiary-fixed:light-dark(#ffd6fc,#ffd6fc);--sys-color-on-tertiary-fixed:light-dark(#2f0d33,#2f0d33);--sys-color-tertiary-fixed-dim:light-dark(#e8b7e7,#e8b7e7);--sys-color-on-tertiary-fixed-variant:light-dark(#5f3961,#5f3961);--sys-color-surface-dim:light-dark(#dfd7e6,#15121c);--sys-color-surface-bright:light-dark(#fef7ff,#3c3742);--sys-color-surface-container-lowest:light-dark(#fff,#100c16);--sys-color-surface-container-low:light-dark(#f9f0ff,#1e1a24);--sys-color-surface-container:light-dark(#f4ebfa,#221e28);--sys-color-surface-container-high:light-dark(#eee5f4,#2c2833);--sys-color-surface-container-highest:light-dark(#e8dfee,#37333e)}}