Simplify button components styles and variants

[onyedikachi23]

I've used Shadcn ui before coming to React Native, and trying Gluestack ui. So, I tried using the button components from gluestack, but the composition of variants was unnecessarily complex, compared to how it looks like in Shadcn ui button.

Using just the variant prop is enough. Because I'm always thinking about when to use which variant with which action.

For a quick grasp, here's my refactored version (Shadcn style):

// NOTE: Web specific styles are omitted.

const buttonStyle = tva({
	base: "group/button rounded flex-row items-center justify-center data-[disabled=true]:opacity-40 gap-2",
	variants: {
		variant: {
			default:
				"bg-primary-500 data-[hover=true]:bg-primary-600 data-[active=true]:bg-primary-700 border border-primary-300 data-[hover=true]:border-primary-400 data-[active=true]:border-primary-500",
			destructive:
				"bg-error-500 data-[hover=true]:bg-error-600 data-[active=true]:bg-error-700 border border-error-300 data-[hover=true]:border-error-400 data-[active=true]:border-error-500",
			secondary:
				"bg-secondary-500 data-[hover=true]:bg-secondary-600 data-[active=true]:bg-secondary-700 border border-secondary-300 data-[hover=true]:border-secondary-400 data-[active=true]:border-secondary-500",
			outline:
				"bg-transparent border border-outline-500 data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent",
			ghost: "bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-background-100",
			link: "px-0 bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent",
		},
		size: {
			default: "h-9 px-4 py-2",
			sm: "h-8 rounded-md px-3",
			lg: "h-10 rounded-md px-8",
			icon: "h-9 w-9",
		},
	},
});

const buttonTextStyle = tva({
	base: "font-medium",
	parentVariants: {
		variant: {
			default:
				"text-typography-950 data-[hover=true]:text-typography-950 data-[active=true]:text-typography-950",
			destructive:
				"text-typography-50 data-[hover=true]:text-typography-50 data-[active=true]:text-typography-50",
			secondary:
				"text-typography-50 data-[hover=true]:text-typography-50 data-[active=true]:text-typography-50",
			outline:
				"text-typography-500 data-[hover=true]:text-primary-500 data-[active=true]:text-primary-600",
			ghost: "text-typography-500 data-[hover=true]:text-primary-500 data-[active=true]:text-primary-600",
			link: "text-primary-500 underline-offset-4 data-[hover=true]:underline data-[active=true]:underline",
		},
		size: {
			default: "text-sm",
			sm: "text-xs",
			lg: "text-base",
			icon: "",
		},
	},
});

const buttonIconStyle = tva({
	base: "fill-none",
	parentVariants: {
		variant: {
			default: "text-typography-950",
			destructive: "text-typography-50",
			secondary: "text-typography-50",
			outline:
				"text-typography-500 data-[hover=true]:text-primary-500 data-[active=true]:text-primary-600",
			ghost: "text-typography-500 data-[hover=true]:text-primary-500 data-[active=true]:text-primary-600",
			link: "text-primary-500 data-[hover=true]:text-primary-600 data-[active=true]:text-primary-700",
		},
		size: {
			default: "h-4 w-4",
			sm: "h-3.5 w-3.5",
			lg: "h-[18px] w-[18px]",
			icon: "h-5 w-5",
		},
	},
});

When compared with the original styles from gluestack, you can see that this is unnecessarily complex:

const buttonStyle = tva({
  base: "group/button rounded bg-primary-500 flex-row items-center justify-center data-[focus-visible=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[disabled=true]:opacity-40 gap-2",

  variants: {
    action: {
      primary:
        "bg-primary-500 data-[hover=true]:bg-primary-600 data-[active=true]:bg-primary-700 border-primary-300 data-[hover=true]:border-primary-400 data-[active=true]:border-primary-500 data-[focus-visible=true]:web:ring-indicator-info",

      secondary:
        "bg-secondary-500 border-secondary-300 data-[hover=true]:bg-secondary-600 data-[hover=true]:border-secondary-400 data-[active=true]:bg-secondary-700 data-[active=true]:border-secondary-700 data-[focus-visible=true]:web:ring-indicator-info",

      positive:
        "bg-success-500 border-success-300 data-[hover=true]:bg-success-600 data-[hover=true]:border-success-400 data-[active=true]:bg-success-700 data-[active=true]:border-success-500 data-[focus-visible=true]:web:ring-indicator-info",

      negative:
        "bg-error-500 border-error-300 data-[hover=true]:bg-error-600 data-[hover=true]:border-error-400 data-[active=true]:bg-error-700 data-[active=true]:border-error-500 data-[focus-visible=true]:web:ring-indicator-info",

      default:
        "bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent",
    },

    variant: {
      link: "px-0",

      outline:
        "bg-transparent border data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent",

      solid: "",
    },

    size: {
      xs: "px-3.5 h-8",

      sm: "px-4 h-9",

      md: "px-5 h-10",

      lg: "px-6 h-11",

      xl: "px-7 h-12",
    },
  },

  compoundVariants: [
    {
      action: "primary",

      variant: "link",

      class:
        "px-0 bg-transparent data-[hover=true]:bg-transparent data-[active=true]:bg-transparent",
    },

    {
      action: "secondary",

      variant: "link",

      class:
        "px-0 bg-transparent data-[hover=true]:bg-transparent data-[active=true]:bg-transparent",
    },

    {
      action: "positive",

      variant: "link",

      class:
        "px-0 bg-transparent data-[hover=true]:bg-transparent data-[active=true]:bg-transparent",
    },

    {
      action: "negative",

      variant: "link",

      class:
        "px-0 bg-transparent data-[hover=true]:bg-transparent data-[active=true]:bg-transparent",
    },

    {
      action: "primary",

      variant: "outline",

      class:
        "bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent",
    },

    {
      action: "secondary",

      variant: "outline",

      class:
        "bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent",
    },

    {
      action: "positive",

      variant: "outline",

      class:
        "bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent",
    },

    {
      action: "negative",

      variant: "outline",

      class:
        "bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent",
    },
  ],
});

const buttonTextStyle = tva({
  base: "text-typography-0 font-semibold web:select-none",

  parentVariants: {
    action: {
      primary:
        "text-primary-600 data-[hover=true]:text-primary-600 data-[active=true]:text-primary-700",

      secondary:
        "text-typography-500 data-[hover=true]:text-typography-600 data-[active=true]:text-typography-700",

      positive:
        "text-success-600 data-[hover=true]:text-success-600 data-[active=true]:text-success-700",

      negative:
        "text-error-600 data-[hover=true]:text-error-600 data-[active=true]:text-error-700",
    },

    variant: {
      link: "data-[hover=true]:underline data-[active=true]:underline",

      outline: "",

      solid:
        "text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0",
    },

    size: {
      xs: "text-xs",

      sm: "text-sm",

      md: "text-base",

      lg: "text-lg",

      xl: "text-xl",
    },
  },

  parentCompoundVariants: [
    {
      variant: "solid",

      action: "primary",

      class:
        "text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0",
    },

    {
      variant: "solid",

      action: "secondary",

      class:
        "text-typography-800 data-[hover=true]:text-typography-800 data-[active=true]:text-typography-800",
    },

    {
      variant: "solid",

      action: "positive",

      class:
        "text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0",
    },

    {
      variant: "solid",

      action: "negative",

      class:
        "text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0",
    },

    {
      variant: "outline",

      action: "primary",

      class:
        "text-primary-500 data-[hover=true]:text-primary-500 data-[active=true]:text-primary-500",
    },

    {
      variant: "outline",

      action: "secondary",

      class:
        "text-typography-500 data-[hover=true]:text-primary-600 data-[active=true]:text-typography-700",
    },

    {
      variant: "outline",

      action: "positive",

      class:
        "text-primary-500 data-[hover=true]:text-primary-500 data-[active=true]:text-primary-500",
    },

    {
      variant: "outline",

      action: "negative",

      class:
        "text-primary-500 data-[hover=true]:text-primary-500 data-[active=true]:text-primary-500",
    },
  ],
});

const buttonIconStyle = tva({
  base: "fill-none",

  parentVariants: {
    variant: {
      link: "data-[hover=true]:underline data-[active=true]:underline",

      outline: "",

      solid:
        "text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0",
    },

    size: {
      xs: "h-3.5 w-3.5",

      sm: "h-4 w-4",

      md: "h-[18px] w-[18px]",

      lg: "h-[18px] w-[18px]",

      xl: "h-5 w-5",
    },

    action: {
      primary:
        "text-primary-600 data-[hover=true]:text-primary-600 data-[active=true]:text-primary-700",

      secondary:
        "text-typography-500 data-[hover=true]:text-typography-600 data-[active=true]:text-typography-700",

      positive:
        "text-success-600 data-[hover=true]:text-success-600 data-[active=true]:text-success-700",

      negative:
        "text-error-600 data-[hover=true]:text-error-600 data-[active=true]:text-error-700",
    },
  },

  parentCompoundVariants: [
    {
      variant: "solid",

      action: "primary",

      class:
        "text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0",
    },

    {
      variant: "solid",

      action: "secondary",

      class:
        "text-typography-800 data-[hover=true]:text-typography-800 data-[active=true]:text-typography-800",
    },

    {
      variant: "solid",

      action: "positive",

      class:
        "text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0",
    },

    {
      variant: "solid",

      action: "negative",

      class:
        "text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0",
    },
  ],
});

While this is not a big deal, my suggestion is that using the Shadcn like composition of the variants is much easier to work with.