Palette?

[binajmen]

I have the current setup for a Button component:

const button = cva({
  base: "inline-flex justify-center items-center gap-2 font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 ui-disabled:cursor-not-allowed",
  variants: {
    size: {
      xs: "px-2 py-1 text-xs",
      sm: "px-2 py-1 text-sm",
      md: "px-2.5 py-1.5 text-sm",
      lg: "px-3 py-2 text-sm",
      xl: "px-3.5 py-2.5 text-sm",
    },
    visual: {
      filled:
        "bg-blue-600 hover:bg-blue-500 ui-disabled:bg-gray-300 ui-disabled:text-gray-500",
      tonal:
        "bg-blue-50 text-blue-600 hover:bg-blue-100 ui-disabled:bg-gray-100 ui-disabled:text-gray-500",
      destructive:
        "bg-red-50 text-red-600 hover:bg-red-100 ui-disabled:bg-gray-100 ui-disabled:text-gray-500",
      outlined:
        "text-blue-700 ring-1 ring-inset ring-blue-700 hover:bg-blue-50 ui-disabled:bg-inherit ui-disabled:text-gray-400 ui-disabled:ring-gray-400",
      text: "text-blue-700 hover:bg-blue-50 shadow-none ui-disabled:bg-inherit ui-disabled:text-gray-400",
      link: "p-0 text-blue-700 underline underline-offset-2 hover:no-underline shadow-none ui-disabled:bg-inherit ui-disabled:text-gray-400",
    },
    shape: {
      rounded: "rounded-md",
      circle: "rounded-full",
      square: "rounded-none",
    },
  },
  defaultVariants: {
    visual: "filled",
    size: "md",
    shape: "rounded",
  },
});

As you can see, the main color is blue. I'm using the red for the destructive button variant. But I would prefer to split the visual style from the color itself, similar to the colorPalette in PandaCSS in order to use the different visual styles with all colors.

Is it possible? 🙏