Whats the recommended way of approaching "references"?

[lstephensca]

I didn't really know the best title for this, so if it is too vague please let me know. I might be trying to fit a square peg in a round hole here, but I have been trying to figure the best way around this. I am trying to find a way to correlate the buttons "type" with what colors are available to choose from. For example, if "primary" is used as the type and "rose" is used for the color, the class would be "bg-rose-500". Thus far, I have created a baseButtonVariant and have it set up:

export const baseButtonVariants = cva({
  base: "relative flex w-full transition-all duration-100 ease-in-out",
  variants: {
    type: {
      primary: "",
      accent: "",
    },
    primaryColors: {
      rose: "bg-rose-500",
      orange: "bg-orange-500",
    },
    accentColors: {
      rose: "bg-rose-300",
      orange: "bg-orange-300",
    },
  },
});

In my mind this makes sense, but I can't seem to perform the mental gymnastics to connect the "type" to the corresponding colors. I was not sure if this was even possible or if there was a better way of going about this.

[airtonix]

if "primary" is used as the type and "rose" is used for the color, the class would be "bg-rose-500".

you want "compound variants".

export const baseButtonVariants = cva({
  base: "relative flex w-full transition-all duration-100 ease-in-out",
  variants: {
    type: {
      primary: "",
      accent: "",
    },
    primaryColor: {
      rose: "",
      orange: "",
    },
    accentColor: {
      rose: "",
      orange: "",
    },
  },
  compoundVariants: [
    {
      intent: "primary",
      primaryColor: "rose",
      className: "bg-rose-500"
    },
  ]
});

compoundVariants can be though of as situational overrides.

[lstephensca]

I appreciate the response (sorry I never responded, I didn't ever see an alert)! For some reason, compound variants never clicked for me when I originally wrote this, but I have been using it for a little while now and love it. That being said, having empty strings, primary: "" never quite set quite right with me even though I know it works.