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

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

@layer design-system.tokens{html,[data-theme=classic-vibrant]{--sys-color-primary:light-dark(#005bbf,#adc7ff);--sys-color-surface-tint:light-dark(#005bbf,#adc7ff);--sys-color-on-primary:light-dark(#fff,#002e68);--sys-color-primary-container:light-dark(#d8e2ff,#004493);--sys-color-on-primary-container:light-dark(#004493,#d8e2ff);--sys-color-secondary:light-dark(#585c7e,#c1c4eb);--sys-color-on-secondary:light-dark(#fff,#2a2e4d);--sys-color-secondary-container:light-dark(#dfe0ff,#414465);--sys-color-on-secondary-container:light-dark(#414465,#dfe0ff);--sys-color-tertiary:light-dark(#615789,#cbbff8);--sys-color-on-tertiary:light-dark(#fff,#332958);--sys-color-tertiary-container:light-dark(#e7deff,#494070);--sys-color-on-tertiary-container:light-dark(#494070,#e7deff);--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(#f9f9ff,#0f131c);--sys-color-on-background:light-dark(#171c25,#dfe2ef);--sys-color-surface:light-dark(#f9f9ff,#0f131c);--sys-color-on-surface:light-dark(#171c25,#dfe2ef);--sys-color-surface-variant:light-dark(#dee2f2,#414753);--sys-color-on-surface-variant:light-dark(#414753,#c2c6d6);--sys-color-outline:light-dark(#727785,#8c909f);--sys-color-outline-variant:light-dark(#c2c6d6,#414753);--sys-color-shadow:#000;--sys-color-scrim:#000;--sys-color-inverse-surface:light-dark(#2c303a,#dfe2ef);--sys-color-inverse-on-surface:light-dark(#edf0fd,#2c303a);--sys-color-inverse-primary:light-dark(#adc7ff,#005bbf);--sys-color-primary-fixed:#d8e2ff;--sys-color-on-primary-fixed:#001a41;--sys-color-primary-fixed-dim:#adc7ff;--sys-color-on-primary-fixed-variant:#004493;--sys-color-secondary-fixed:#dfe0ff;--sys-color-on-secondary-fixed:#151937;--sys-color-secondary-fixed-dim:#c1c4eb;--sys-color-on-secondary-fixed-variant:#414465;--sys-color-tertiary-fixed:#e7deff;--sys-color-on-tertiary-fixed:#1d1342;--sys-color-tertiary-fixed-dim:#cbbff8;--sys-color-on-tertiary-fixed-variant:#494070;--sys-color-surface-dim:light-dark(#d7dae6,#0f131c);--sys-color-surface-bright:light-dark(#f9f9ff,#353943);--sys-color-surface-container-lowest:light-dark(#fff,#0a0e17);--sys-color-surface-container-low:light-dark(#f1f3ff,#171c25);--sys-color-surface-container:light-dark(#ebedfa,#1c2029);--sys-color-surface-container-high:light-dark(#e5e8f5,#262a33);--sys-color-surface-container-highest:light-dark(#dfe2ef,#31353f)}}