How can I apply a group of styles conditionally?

[alinnert]

I want to define a bunch of "style groups" and apply them conditionally like this:

css(buttonDefault, { _hover: buttonHover, _active: buttonActive })

I've tried using cva recipes, config recipes, and simple css.raw() values. The buttonDefault does work, but the conditional styles don't get applied.

How can I do this? Is there any way this can be achieved?

And yes, I do need the states separately in some cases. I don't want to combine them.

[anubra266]

@alinnert I don't fully understand your issue. But if a style is for hover, then the _hover should be within buttonHover I suppose

[alinnert]

In this case maybe. I do need a focusRing style though that I need to apply under different circumstances like css({ _focus: focusRing }), but in other components like css({ _groupFocus: focusRing }). That's why I'd like to keep that flexibility in general.

[anubra266]

Use patterns or recipes then

[alinnert]

But I've tried recipes already, at least like this:

css({ _focus: focusRing.raw() })

This does not work either. Should I use them differently?

Patterns seem a bit of an overkill and not really what I need.

[anubra266]

By @alinnert I meant create different config recipes including the condiiton i.e. _focus _hover, etc.
SImilar to my initial suggestion, but since config recipes are not statically extracted, it means you can share the style objects across the different recipes.
https://play.panda-css.com/EuA_HU0afE

[alinnert]

Ah, I see. Thank you.