Using a preset system to combine variants

[azoriusss]

Hi everyone
First of all, what I'm suggesting here may already exists, but I didn't find it in documentation

I think it would be great to have a "preset" system to combine recurrent variant combination, with someting similar to defaultVariants key
Example :

export const buttonRecipe =  defineRecipe({
 className: 'button',
 description: 'Button component',
 base: {},
 variants: {
   size: {
     sm: {},
     md: {},
   colorScheme: {
     red:{},
     green:{}
   },
   visual: {
     solid:{},
     visual:{}
   },
 },
 presets:{
   primary:{
     colorScheme: 'red',
     size: 'md',
     visual: 'solid'
   },
   secondary:{
     colorScheme: 'green',
     size: 'md',
     visual: 'outline'
   }
 },

})

I'm excited to get your opinions on this ! 😊

[anubra266]

@vlrd-playin Instead of color scheme, you probably should be using colorPalette. But overall IMO this seems like a rare abtraction that should be handled in userland, especially since I can't think of any design system specs where this is a thing.
Would love to see if you find any.

[azoriusss]

It would be very long to explain why I have to do this but it can be a thing !
I'll try to handle it in userland, and I'll try to use colorPalette
Thanks !

[astahmer]

you can achieve the same results with just JS, by spreading the common properties: https://play.panda-css.com/N0TdOZ5phH

[azoriusss]

It's surprisingly easy ! Thank you !

One issue remains (I've made a diff code) :
https://play.panda-css.com/N0TdOZ5phH/1Sn8aQxXMR

If I'm adding default variant, it seems that priority is taken by default in some cases (and I can't see the logic in this case, the first button is xs and not the second one ?)

[astahmer]

since .button--size_xs and .button--preset_secondary are classNames generated from your variants, which both have the same CSS specificity, the one that wins will depend on the CSS rule order (which is not really deterministic, as it will be matching the order in which those rules were found in your config)

so the easy solution is just to use !important for the one that you think should win

a more advanced solution could be to leverage CSS variable for that: https://play.panda-css.com/1Sn8aQxXMR/LmV0xjvueY