How to remove empty variants and improve long code?

[muhsalaa]

Im starting my migration from styled-components to tailwindcss, and using CVA for the design system. I stumbled upon a component that has some empty variants (outline and color). How can I removed it?

also if you have feedback on improving this code I will appreciate it. I feel its still too long, or it is expected to become large like this?

Thanks

const cvaButton = cva({
  base: [
    'c-button group border text-white text-center rounded-lg no-underline font-bold',
    'leading-normal transition-colors duration-150 ease-in-out whitespace-nowrap align-middle',
  ],
  variants: {
    block: {
      true: 'block w-full',
    },
    color: {
      orange:
        'border-flip-orange hover:border-brick bg-flip-orange hover:bg-brick',
      grey: 'border-dark-grey hover:border-dark-smoke bg-dark-grey hover:bg-dark-smoke',
    },
    variant: {
      primary: 'text-normal h-[53px] py-4 px-8',
      secondary: 'text-semi h-10 py-2.5 px-5',
      tertiary:
        '!border-transparent !bg-transparent text-semi h-10 py-2.5 px-5',
      'mobile-modal': 'text-normal h-12 p-3.5',
    },
    outline: { true: '' }, // empty
    v2: { true: 'rounded-full leading-[normal] h-11.5 py-2.5' },
    disabled: {
      true: 'cursor-not-allowed !bg-light-grey !text-white !border-light-grey',
    },
  },
  compoundVariants: [
    {
      outline: true,
      color: 'orange',
      className:
        'text-flip-orange hover:text-white bg-white hover:bg-flip-orange hover:border-flip-orange',
    },
    {
      outline: true,
      color: 'grey',
      className:
        'text-dark-grey hover:text-white bg-white hover:bg-dark-grey hover:border-dark-grey',
    },
    {
      variant: 'tertiary',
      color: 'orange',
      className: 'text-flip-orange hover:text-brick',
    },
    {
      variant: 'tertiary',
      color: 'grey',
      className: 'text-dark-grey hover:text-dark-smoke',
    },
    {
      variant: 'tertiary',
      disabled: true,
      className: '!bg-transparent !border-transparent !text-light-grey',
    },
  ],
  defaultVariants: {
    variant: 'primary',
    color: 'orange',
    outline: false,
    v2: false,
    block: false,
    disabled: false,
  },
});


// sucomponent of  button
const cvaSpinner = cva({
  base: 'text-white',
  variants: {
    variant: {
      tertiary: 'h-4 w-4',
      primary: 'h-5 w-5',
      secondary: 'h-4 w-4',
      'mobile-modal': 'h-3 w-3',
    },
    color: { orange: '', grey: '' },
    outline: { true: '' },
    disabled: { true: '!text-white' },
  },
  compoundVariants: [
    {
      outline: true,
      color: 'orange',
      className: 'text-flip-orange group-hover:text-white',
    },
    {
      outline: true,
      color: 'grey',
      className: 'text-dark-grey group-hover:text-white',
    },
    { variant: 'tertiary', color: 'orange', className: '!text-flip-orange' },
    { variant: 'tertiary', color: 'grey', className: '!text-dark-grey' },
    { variant: 'tertiary', disabled: true, className: '!text-dark-grey' },
  ],
  defaultVariants: {
    color: 'orange',
    variant: 'primary',
    outline: false,
    disabled: false,
  },
});