Thinking in Recipes

To build maintainable and scalable recipes for your components, it's important to understand how to create a recipe from component variations.

There are four properties of a recipe:

• base: The common styles a component has regardless of the variations.
• variants: The different visual styles for the component.
• compoundVariants: They combine multiple variants together to create more complex sets of styles. This is an optional property.
• defaultVariants: The default variant values for the component. This is optional.

Here's an example of a button recipe.

import { cva } from '../styled-system/css'

const button = cva({
  base: {
    display: 'flex',
  },
  variants: {
    visual: {
      solid: { bg: 'red.200', color: 'white' },
      outline: { borderWidth: '1px', borderColor: 'red.200' },
    },
    size: {
      sm: { padding: '4', fontSize: '12px' },
      lg: { padding: '8', fontSize: '24px' },
    },
  },
  compoundVariants: [
    {
      size: 'small',
      visual: 'solid',
      css: {
        border: '2px solid blue',
      },
    },
  ],
  defaultVariants: {
    visual: 'solid',
    size: 'lg',
  },
})