Button Background Gradient Doesn't Change When Applied to Disabled State

[fabriciolak]

Describe the bug This code snippet defines different style variations for a button. The class disabled:bg-neutral-03 sets the background when the button is disabled, but the class bg-gradient-radial-02 is specified only in the default variant. This might be causing the issue, as the radial gradient could be affecting the proper functioning of the disabled state. However, when switching to the secondary or tertiary state, the disabled:bg-neutral-03 color is applied correctly.

const buttonVariants = tv({
  base: "inline-flex items-center justify-center rounded-lg px-6 py-4 text-xs font-semibold focus:outline-2 focus:outline-neutral-04 focus:ring-2 focus:ring-shade-02 focus:ring-offset-1 disabled:bg-neutral-03 disabled:text-shade-01 ",
  variants: {
    variant: {
      default:
        "bg-gradient-radial-02 text-shade-01 hover:bg-gradient-radial-03 active:bg-gradient-radial-01",
      secondary: "bg-shade-02 text-shade-01",
      tertiary:
        "border border-shade-02 text-shade-02 disabled:border-neutral-03",
    },
    fullWidth: {
      true: "w-full px-0",
      false: "",
    },
  },
  defaultVariants: {
    variant: "default",
    fullWidth: false,
  },
});

To Reproduce Changing the button state to disabled in the default variant.

Expected behavior The expected scenario is that when changing the button state to "disabled" in the default variant, the background of the button should change as defined by the class disabled:bg-neutral-03, regardless of the presence of the class bg-gradient-radial-02.

Screenshots Variant: default disabled: true

Variant: secondary disabled: true

Desktop (please complete the following information):

• OS: Windows
• Browser: chrome
• Version: 120.0.6099.129