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

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

@layer design-system.tokens{html,[data-theme=berry-vibrant]{--sys-color-primary:light-dark(#bc0052,#ffb1c0);--sys-color-surface-tint:light-dark(#bc0052,#ffb1c0);--sys-color-on-primary:light-dark(#fff,#660029);--sys-color-primary-container:light-dark(#ffd9df,#90003d);--sys-color-on-primary-container:light-dark(#90003d,#ffd9df);--sys-color-secondary:light-dark(#82524d,#f5b7b1);--sys-color-on-secondary:light-dark(#fff,#4c2522);--sys-color-secondary-container:light-dark(#ffdad6,#673b37);--sys-color-on-secondary-container:light-dark(#673b37,#ffdad6);--sys-color-tertiary:light-dark(#8a4f36,#ffb597);--sys-color-on-tertiary:light-dark(#fff,#52230d);--sys-color-tertiary-container:light-dark(#ffdbcd,#6d3821);--sys-color-on-tertiary-container:light-dark(#6d3821,#ffdbcd);--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(#fff8f7,#1d1012);--sys-color-on-background:light-dark(#26181a,#f7dce0);--sys-color-surface:light-dark(#fff8f7,#1d1012);--sys-color-on-surface:light-dark(#26181a,#f7dce0);--sys-color-surface-variant:light-dark(#fadbdf,#574145);--sys-color-on-surface-variant:light-dark(#574145,#ddbfc3);--sys-color-outline:light-dark(#8a7175,#a58a8e);--sys-color-outline-variant:light-dark(#ddbfc3,#574145);--sys-color-shadow:light-dark(#000,#000);--sys-color-scrim:light-dark(#000,#000);--sys-color-inverse-surface:light-dark(#3c2c2f,#f7dce0);--sys-color-inverse-on-surface:light-dark(#ffecee,#3c2c2f);--sys-color-inverse-primary:light-dark(#ffb1c0,#bc0052);--sys-color-primary-fixed:light-dark(#ffd9df,#ffd9df);--sys-color-on-primary-fixed:light-dark(#3f0017,#3f0017);--sys-color-primary-fixed-dim:light-dark(#ffb1c0,#ffb1c0);--sys-color-on-primary-fixed-variant:light-dark(#90003d,#90003d);--sys-color-secondary-fixed:light-dark(#ffdad6,#ffdad6);--sys-color-on-secondary-fixed:light-dark(#33110e,#33110e);--sys-color-secondary-fixed-dim:light-dark(#f5b7b1,#f5b7b1);--sys-color-on-secondary-fixed-variant:light-dark(#673b37,#673b37);--sys-color-tertiary-fixed:light-dark(#ffdbcd,#ffdbcd);--sys-color-on-tertiary-fixed:light-dark(#360f00,#360f00);--sys-color-tertiary-fixed-dim:light-dark(#ffb597,#ffb597);--sys-color-on-tertiary-fixed-variant:light-dark(#6d3821,#6d3821);--sys-color-surface-dim:light-dark(#eed4d7,#1d1012);--sys-color-surface-bright:light-dark(#fff8f7,#463538);--sys-color-surface-container-lowest:light-dark(#fff,#170b0d);--sys-color-surface-container-low:light-dark(#fff0f1,#26181a);--sys-color-surface-container:light-dark(#ffe9eb,#2a1c1e);--sys-color-surface-container-high:light-dark(#fde2e5,#362629);--sys-color-surface-container-highest:light-dark(#f7dce0,#413033)}}