Add change colors for all Components

[drujbanjo]

To change the color of components, we manually change the classes for only one color. To be able to use the primary color and various other colors at the same time, you can add color changes to componentVariants.

How?

const buttonVariants = cva("...", {
  variants: {
    variant: {
      default: "",
      outline: "",
      ...
    },
    color: {
      primary: "",
      red: "",
      green: "",
      ...
    }
  },
  compoundVariants: [
    {
      variant: "default",
      color: "primary",
      className: "bg-primary text-primary-foreground ....",
    },
    {
      variant: "default",
      color: "red",
      className: "bg-red text-white ....",
    },
  ]
})

• Or you can create your own version of cva so that you can throw class templates for variants.
• Or you can create an additional library that can perform this function. 👍

Why?

Many websites and projects require colorful components, but having only one color on a website looks very boring, and writing classes for all colored components yourself takes a long time.