Should empty variants define as types？

[Tatametheus]

Let's look an example

const StyledButton = styled('button', {
  variants: {
    status: {
      warning: {},
      danger: {},
      success: {},
    },
    appearance: {
      default: {
//some styles here
      },
      primary: {
//some styles here
      },
      text: {
//some styles here
      },
    },
  },
  compoundVariants: [
    {
      appearance: 'primary',
      status: 'warning',
      css: {
        backgroundColor: '$orange9',
        '&:hover:not([disabled])': {
          backgroundColor: '$orange10',
        },
        '&:active:not([disabled])': {
          backgroundColor: '$orange11',
        },
      },
    },
    {
      appearance: 'primary',
      status: 'danger',
      css: {
        backgroundColor: '$red9',
        '&:hover:not([disabled])': {
          backgroundColor: '$red10',
        },
        '&:active:not([disabled])': {
          backgroundColor: '$red11',
        },
      },
    },
    {
      appearance: 'primary',
      status: 'success',
      css: {
        backgroundColor: '$green9',
        '&:hover:not([disabled])': {
          backgroundColor: '$green10',
        },
        '&:active:not([disabled])': {
          backgroundColor: '$green11',
        },
      },
    },
    {
      appearance: 'default',
      isDisabled: true,
      css: {
        backgroundColor: '$gray2',
        color: '$gray9',
      },
    },
    {
      appearance: 'primary',
      isDisabled: true,
      css: {
        backgroundColor: '$blue6',
      },
    },
  ],
});

In the example above, the status and appearance need to to compound, and only change the background color or color. Since I cant directly define those colors in status, I need to leave those variants to empty.
What I mean is can we remove the status variants and put it on the styled function?
Some thing like this

type status = 'warning' | 'danger' |'success'
const StyledButton = styled<status (maybe an object type)>('button', {
  variants: {
// keep this
    appearance: {
    },
  },
  compoundVariants: [
    {
      appearance: 'primary',
      status: 'warning',
      css: {
        backgroundColor: '$orange9',
        '&:hover:not([disabled])': {
          backgroundColor: '$orange10',
        },
        '&:active:not([disabled])': {
          backgroundColor: '$orange11',
        },
      },
    },
    {
      appearance: 'primary',
      status: 'danger',
      css: {
        backgroundColor: '$red9',
        '&:hover:not([disabled])': {
          backgroundColor: '$red10',
        },
        '&:active:not([disabled])': {
          backgroundColor: '$red11',
        },
      },
    },
    {
      appearance: 'primary',
      status: 'success',
      css: {
        backgroundColor: '$green9',
        '&:hover:not([disabled])': {
          backgroundColor: '$green10',
        },
        '&:active:not([disabled])': {
          backgroundColor: '$green11',
        },
      },
    },
    {
      appearance: 'default',
      isDisabled: true,
      css: {
        backgroundColor: '$gray2',
        color: '$gray9',
      },
    },
    {
      appearance: 'primary',
      isDisabled: true,
      css: {
        backgroundColor: '$blue6',
      },
    },
  ],
});

Simple way to require a variant is kind of similar with my opinion. Define the component types first and set it to styled function.

interface ButtonStyleProps{
  status?: 'warning'|'danger'| 'success'
  appearance?: 'default' | 'primary' | 'text'
}
const StyledButton = styled<ButtonStyleProps>('button', {})
// use it
// with out the appearance ,error
<StyledButton>Button</StyledButton>
// ways to define the default
// 1.
const StyledButton = styled<ButtonStyleProps>('button', {
defaultVariants:{
  appearance:'default'
}
})
//2.

cosnt {appearance = 'default'} =props
<StyledButton appearance ={appearance }>Button</StyledButton>

[peduarte]

I think it's fine to leave them as empty. At this point youre just creating the "component interface". Even if you add no styles, this is how Stitches knows the variants that are available.

We cant infer that from the compound variants.

The alternative would be for users to manually type their variants, but that kind of ruins the magic.