chore: kickstart vanilla-extract migration

[gndz07]

Description

Fixes #422

This PoC is part of the study, and we can move forward from this point.

We decided to choose vanilla-extract for several practical reasons:

• not very different syntax with our current implementation with stitches
• allows us to migrate progressively
• no compiling needed on the user's side

Key points:

• We will migrate progressively, one component after another
• Stitches and vanilla-extract component can live side by side, so we can remove stitches support only after we finish the migration for all of the components
• We aim for no API changes from the user perspective

Please refer to the migration plan and developer guide to get more insight on how we will proceed with this migration.

Two components are migrated already to be used as examples: Box and Badge component.

Preview

Stitches and vanilla-extract components should be visually identical with the exact same props for each components:

[mdeliatf]

LGTM! Amazing work, Gina!!

I just have one non-blocking question: in CLAUDE.md we mention that Stitches is the core styling system; shouldn’t we say instead that it was, and that we’re migrating to Vanilla Extract with its specs?

[gndz07]

@mdeliatf yes, but maybe in the near future. True that we will move forward with vanilla-extract, but during the migration stage the default will still be the stitches components. When developing new component that will need to be used right now, I imagine we will still build one with stitches to avoid breaking changes (mostly for the provider). While migrating each components, claude (and the developer) should refer to the migration guide.

[traefiker]

🎉 This PR is included in version 12.0.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀