Alternative to config recipes for responsive variants

[schardev]

I've been trying to figure this out for a while now but couldn't come up with a solution.

Let's say I have a Button component that has 2 size variants, small and large. Now, I want to render the small variant on mobile and the larger one on desktop. I can't use breakpoints here (which is what everyone should use for responsive things imo, but I'm limited here) because I have other places within the same page that has a large button (i.e, a single page can have both variants at different locations).

Config recipes are built for this, it works and that's cool but I feel the DX around it is not ideal. Don't get me wrong, Panda is cool and it does allow me to do a heck lot of other complicated stuff but defining every component that's going to be using responsive variants in config is just ... a bit annoying 🙃.

So, is there a way we can have responsive variants like how config recipe allows but without having to define it in config?

<Button variant={{ lg: 'large', base: 'small' }} />

The way I'm doing it for now is render both variants and hide the other one on large breakpoint, like:

<Button variant="large" hideBelow="lg" />
<Button variant="small" hideFrom="lg" />

(Which is not good, I know, but for now it Just Works™ 😅)

[frogdevvn]

Config recipe supported responsive by variants but it will be limited when that variant using in compoundVariants

My current solution is using staticCss for variants which dynamic in config recipe file. Example:

staticCss: [{ size: ['*'], colorScheme: ['*'] }]

[jonambas]

Not perfect, but I built a plugin for this use case: https://github.com/jonambas/panda-plugin-crv. Edit: with support for responsive compound variants.