Is there a way to make variants support multiple colors?

[Naes0]

Hi,

Was wondering if it was possible to make variants of a button like 'filled' and 'outlined' support multiple colours.
Im currently structuring my cva by hardcoding all possible combinations which I feel like won't scale well (adding outline-primary, , outline-secondary):

const buttonVariants = cva(
  'inline-flex items-center justify-center whitespace-nowrap rounded border-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-2 focus-visible:ring-magenta focus-visible:ring-ring  disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        'filled-primary':
          'border-primary bg-primary text-primary-foreground hover:bg-transparent hover:text-primary active:bg-deep-blue-50 active:text-primary',
        'filled-secondary':
          'border-secondary bg-secondary text-secondary-foreground hover:bg-transparent hover:text-secondary active:border-grey-500 active:bg-grey-500 active:text-white',
        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
      },
      size: {
        default: 'rounded-[5px] px-[30px] py-[15px]',
        icon: 'h-10 w-10 rounded-full'
      },
      disabled: {
        true: 'cursor-not-allowed opacity-10'
      }
    },
    compoundVariants: [
      {
        variant: ['filled-primary', 'filled-secondary', 'outline', ],
        disabled: true,
        className: 'hover:bg-current'
      }
    ],
    defaultVariants: {
      variant: 'filled-primary',
      size: 'default'
    }
  }
);

Still quite new to tailwind land as I was previously using styled-components. I saw someone doing something like this using Compound Variants but it looked pretty messy in comparison to this...🫤

I was thinking of something a long lines of this:

    variants: {
      variant: {
        filled:
          'border-primary bg-primary text-primary-foreground hover:bg-transparent hover:text-primary active:bg-deep-blue-50 active:text-primary',
        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
      },
      colour: {
        primary: '',
        secondary: ''
      },
   }

But it quickly fails as setting primary='bg-any' would fail as soon as your try to do variant=outline (since there should be no background).

If there is a good way to do this or if this is the good way please let me know 😄

[pixeliner]

I was about to post the same question.

I liked the idea of how Mui for example has a variant (contained, outlined, ...) and separate color attribute. I tried reproducing it, but am stuck at how to solve the text color. Because of the specificity of how tailwind generates the order of colors, the following unfortunately doesn't work

variants: {
      variant: {
        contained: "border text-white",
        outlined: "border bg-transparent",
        text: "border border-transparent bg-transparent",
      },
      color: {
        primary: "text-primary bg-primary border-primary hover:bg-primary/90",
        secondary: "text-secondary bg-secondary border-secondary hover:bg-secondary/90",
        success: "text-success bg-success border-success hover:bg-success/90",
        warning: "text-warning bg-warning border-warning hover:bg-warning/90",
        danger: "text-danger bg-danger border-danger hover:bg-danger/90",
      },
      size: {
        md: "h-10 px-4 py-2",
        sm: "h-8 px-3 py-1.5 text-xs",
        lg: "h-12 px-6 py-3 text-lg",
      },
    },

If anyone has an idea :D

[pixeliner]

Okay I think I found it, with some !important props and seperating the opacity from the bg-color it seems to work fine:

variants: {
      variant: {
        contained: "border !text-white",
        outlined: "border bg-transparent hover:!bg-opacity-10",
        text: "border border-transparent bg-transparent hover:!bg-opacity-10",
      },
      color: {
        primary: "text-primary bg-primary border-primary hover:bg-primary hover:bg-opacity-90",
        secondary: "text-secondary bg-secondary border-secondary hover:bg-secondary hover:bg-opacity-90",
        success: "text-success bg-success border-success hover:bg-success hover:bg-opacity-90",
        warning: "text-warning bg-warning border-warning hover:bg-warning hover:bg-opacity-90",
        danger: "text-danger bg-danger border-danger hover:bg-danger hover:bg-opacity-90",
      },
      size: {
        md: "h-10 px-4 py-2",
        sm: "h-8 px-3 py-1.5 text-xs",
        lg: "h-12 px-6 py-3 text-lg",
      },
    }

[pixeliner]

One more issue, you might want to reinitialize the transparent color within your tailwind config. I haven't found a decent solution for this, but it seems the additional colors are added alphabetically. So all colors named alphabetically before the word transparent will work. For me it's a solution that works but not a clean one.