Styling complex components

[makeupsomething]

Hi all 👋

Im not sure how to properly style a button component with multiple sizes and colors. For example I have a theme object with something like this structure.

buttons: {
  primary: {
	  backgroundColor: 'primary',
          // more styles
  },
  secondary: {
	  backgroundColor: 'secondary',
           // more styles
  },
  textButton: {
      small: {
          // more styles
      },
      big: {
         // more styles
      }
    },
  iconButton: {
    small: {
        // more styles
    },
    big: {
       // more styles
    }
  }
}

Using reflexbox how could I define a small textButton with primary coloring?

<Box
	as="button"
	ref={ref}
	onClick={onClick}
	__tx="buttons"
	variant="textButton.small" //want to add a color here too
	sx={{}}
	{...rest}
>

So far I can only get a small textButton or primary colors? I can set buttons.primary as a variant inside small, but then would I need to do that separately for every color, size and button type separately?

[makeupsomething]

My solution was to override the variant()function in reflex box to handle an array of variants and merge the objects from the theme. It ends up working something like this

<Box
	as="button"
	ref={ref}
	onClick={onClick}
	__tx="buttons"
	variant=["textButton.small", "primary"]
	sx={{}}
	{...rest}
>