Compound Variants

Compound variants are a way to override styles based on specific variant combinations.

In this lesson, we specify the styles the input recipe should have. For this example, the px is set to 0, the borderRadius is also 0.

const inputRecipe = cva({
  base: {
    _placeholder: {
      color: '#8B95A1',
    },
    borderColor: '#E2E8F0',
  },
  variants: {
    kind: {
      outline: {
        borderWidth: '1px',
      },
      flushed: {
        borderBottomWidth: '1px',
      },
    },
    size: {
      small: {
        borderRadius: '2px',
        fontSize: '12px',
        px: '8px',
        h: '24px',
      },
      medium: {
        borderRadius: '2px',
        fontSize: '14px',
        px: '12px',
        h: '32px',
      },
      large: {
        borderRadius: '4px',
        fontSize: '16px',
        px: '16px',
        h: '40px',
      },
    },
  },
  compoundVariants: [{ kind: 'flushed', css: { px: '0', borderRadius: '0' } }],
})