Multiple variants

[claidler]

Just wondering how you'd go about creating variants of variants, or if that's something that you definitely wouldn't do.

For example, if you had a Button component that had a type prop ('primary', 'secondary') and a size ('sm', 'md', 'lg').

Hopefully this will give you an idea of what I'm thinking:

import { styleVariants } from '@vanilla-extract/css';

const base = style({ padding: 12 });

const backgrounds = {
  primary: 'blue',
  secondary: 'aqua'
} as const;

const sizes = {
  sm: '4px',
  md: '8px',
  lg: '10px',
}

export const backgroundButtons = styleVariants(
  backgrounds,
  (background) => [base, { background }]
);

Could I now somehow get something like:

<button className={styles.variant['primary-sm']}></button>

Or would you advise against doing this?

To summarise - I'm wondering if it would be possible for the styleVariants function to potentially take a base which is also a styleVariant, and you could then create variants from variants, like primary-sm, primary-md, primary-lg, secondary-sm, secondary-md, secondary-lg

[KirdesMF]

Maybe the Recipe api would be fit perfectly.

https://vanilla-extract.style/documentation/recipes-api/

[claidler]

Ah! This is exactly what I need. Thank you