refactor: add brand variants to the regulr button

mdatelle · mdatelle · commit c4df56c4f881 · 2025-04-01T14:46:29.000-04:00
diff --git a/unraid-ui/src/components/brand/BrandButton.vue b/unraid-ui/src/components/brand/BrandButton.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import { type BrandButtonVariants, brandButtonVariants } from './brand-button.variants';
 import { cn } from '@/lib/utils';
+import { computed } from 'vue';
+import { brandButtonVariants, type BrandButtonVariants } from './brand-button.variants';
 
 export interface BrandButtonProps {
   variant?: BrandButtonVariants['variant'];
@@ -43,7 +43,10 @@ const classes = computed(() => {
   const iconSize = `w-${props.size}`;
 
   return {
-    button: cn(brandButtonVariants({ variant: props.variant, size: props.size, padding: props.padding }), props.class),
+    button: cn(
+      brandButtonVariants({ variant: props.variant, size: props.size, padding: props.padding }),
+      props.class
+    ),
     icon: `${iconSize} fill-current flex-shrink-0`,
   };
 });
@@ -74,11 +77,7 @@ const needsBrandGradientBackground = computed(() => {
       class="absolute -top-[2px] -right-[2px] -bottom-[2px] -left-[2px] -z-10 bg-gradient-to-r from-unraid-red to-orange opacity-0 transition-all rounded-md group-hover:opacity-100 group-focus:opacity-100"
     />
 
-    <component
-      :is="icon"
-      v-if="icon"
-      :class="classes.icon"
-    />
+    <component :is="icon" v-if="icon" :class="classes.icon" />
 
     {{ text }}
     <slot />
@@ -88,7 +87,8 @@ const needsBrandGradientBackground = computed(() => {
       v-if="iconRight"
       :class="[
         classes.icon,
-        iconRightHoverDisplay && 'opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-all',
+        iconRightHoverDisplay &&
+          'opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-all',
       ]"
     />
   </component>
diff --git a/unraid-ui/src/components/brand/brand-button.variants.ts b/unraid-ui/src/components/brand/brand-button.variants.ts
@@ -1,72 +1,78 @@
-import { cva, type VariantProps } from "class-variance-authority";
+import { cva, type VariantProps } from 'class-variance-authority';
 
 export const brandButtonVariants = cva(
-  "group text-center font-semibold leading-none relative z-0 flex flex-row items-center justify-center border-2 border-solid shadow-none cursor-pointer rounded-md hover:shadow-md focus:shadow-md disabled:opacity-25 disabled:hover:opacity-25 disabled:focus:opacity-25 disabled:cursor-not-allowed",
+  'group text-center font-semibold leading-none relative z-0 flex flex-row items-center justify-center border-2 border-solid shadow-none cursor-pointer rounded-md hover:shadow-md focus:shadow-md disabled:opacity-25 disabled:hover:opacity-25 disabled:focus:opacity-25 disabled:cursor-not-allowed',
   {
     variants: {
       variant: {
-        fill: "[&]:text-white bg-transparent border-transparent",
-        black: "[&]:text-white bg-black border-black transition hover:text-black focus:text-black hover:bg-grey focus:bg-grey hover:border-grey focus:border-grey",
-        gray: "text-black bg-grey transition hover:text-white focus:text-white hover:bg-grey-mid focus:bg-grey-mid hover:border-grey-mid focus:border-grey-mid",
-        outline: "[&]:text-orange bg-transparent border-orange hover:text-white focus:text-white",
-        "outline-primary": "text-primary [&]:text-primary uppercase tracking-widest bg-transparent border-primary rounded-sm hover:text-white focus:text-white",
-        "outline-black": "text-black bg-transparent border-black hover:text-black focus:text-black hover:bg-grey focus:bg-grey hover:border-grey focus:border-grey",
-        "outline-white": "text-white bg-transparent border-white hover:text-black focus:text-black hover:bg-white focus:bg-white",
-        underline: "opacity-75 underline border-transparent transition hover:text-primary hover:bg-muted hover:border-muted focus:text-primary focus:bg-muted focus:border-muted hover:opacity-100 focus:opacity-100",
-        "underline-hover-red": "opacity-75 underline border-transparent transition hover:text-white hover:bg-unraid-red hover:border-unraid-red focus:text-white focus:bg-unraid-red focus:border-unraid-red hover:opacity-100 focus:opacity-100",
-        white: "text-black bg-white transition hover:bg-grey focus:bg-grey",
-        none: "",
+        fill: '[&]:text-white bg-transparent border-transparent',
+        black:
+          '[&]:text-white bg-black border-black transition hover:text-black focus:text-black hover:bg-grey focus:bg-grey hover:border-grey focus:border-grey',
+        gray: 'text-black bg-grey transition hover:text-white focus:text-white hover:bg-grey-mid focus:bg-grey-mid hover:border-grey-mid focus:border-grey-mid',
+        outline: '[&]:text-orange bg-transparent border-orange hover:text-white focus:text-white',
+        'outline-primary':
+          'text-primary [&]:text-primary uppercase tracking-widest bg-transparent border-primary rounded-sm hover:text-white focus:text-white',
+        'outline-black':
+          'text-black bg-transparent border-black hover:text-black focus:text-black hover:bg-grey focus:bg-grey hover:border-grey focus:border-grey',
+        'outline-white':
+          'text-white bg-transparent border-white hover:text-black focus:text-black hover:bg-white focus:bg-white',
+        underline:
+          'opacity-75 underline border-transparent transition hover:text-primary hover:bg-muted hover:border-muted focus:text-primary focus:bg-muted focus:border-muted hover:opacity-100 focus:opacity-100',
+        'underline-hover-red':
+          'opacity-75 underline border-transparent transition hover:text-white hover:bg-unraid-red hover:border-unraid-red focus:text-white focus:bg-unraid-red focus:border-unraid-red hover:opacity-100 focus:opacity-100',
+        white: 'text-black bg-white transition hover:bg-grey focus:bg-grey',
+        none: '',
       },
       size: {
-        "12px": "text-12px gap-4px",
-        "14px": "text-14px gap-8px",
-        "16px": "text-16px gap-8px",
-        "18px": "text-18px gap-8px",
-        "20px": "text-20px gap-8px",
-        "24px": "text-24px gap-8px",
+        '12px': 'text-xs gap-1',
+        '14px': 'text-sm gap-2',
+        '16px': 'text-base gap-2',
+        '18px': 'text-lg gap-2',
+        '20px': 'text-xl gap-2',
+        '24px': 'text-2xl gap-2',
       },
       padding: {
-        default: "",
-        none: "p-0",
-        lean: "px-4 py-2",
+        default: '',
+        none: 'p-0',
+        lean: 'px-4 py-2',
       },
     },
     compoundVariants: [
       {
-        size: "12px",
-        padding: "default",
-        class: "p-8px",
+        size: '12px',
+        padding: 'default',
+        class: 'p-8px',
       },
       {
-        size: "14px",
-        padding: "default",
-        class: "p-8px",
+        size: '14px',
+        padding: 'default',
+        class: 'p-8px',
       },
       {
-        size: "16px",
-        padding: "default",
-        class: "p-12px",
+        size: '16px',
+        padding: 'default',
+        class: 'p-12px',
       },
       {
-        size: "18px",
-        padding: "default",
-        class: "p-12px",
+        size: '18px',
+        padding: 'default',
+        class: 'p-12px',
       },
       {
-        size: "20px",
-        padding: "default",
-        class: "p-16px",
+        size: '20px',
+        padding: 'default',
+        class: 'p-16px',
       },
       {
-        size: "24px",
-        padding: "default",
-        class: "p-16px",
+        size: '24px',
+        padding: 'default',
+        class: 'p-16px',
       },
     ],
     defaultVariants: {
-      variant: "fill",
-      size: "16px",
-      padding: "default",
+      variant: 'fill',
+      size: '16px',
+      padding: 'default',
     },
   }
 );
diff --git a/unraid-ui/src/components/common/button/button.variants.ts b/unraid-ui/src/components/common/button/button.variants.ts
@@ -1,13 +1,18 @@
-import { cva, VariantProps } from 'class-variance-authority';
+import { cva, type VariantProps } from 'class-variance-authority';
 
 export const buttonVariants = cva(
   'inline-flex items-center justify-center rounded-md text-base font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
         primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        brand:
+          'bg-gradient-to-r from-unraid-red to-orange text-white opacity-100 transition-all hover:opacity-60 focus:opacity-60',
         destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        outline:
+          'border border-input border-2 bg-transparent hover:bg-accent hover:text-accent-foreground',
+        'outline-brand':
+          'text-orange bg-transparent border-orange border-2 hover:text-white focus:text-white hover:bg-gradient-to-r hover:from-unraid-red hover:to-orange hover:text-white hover:bg-gradient-to-r hover:from-unraid-red hover:to-orange transition-[background,color,opacity] duration-300 ease-in-out rounded-md hover:opacity-100 focus:opacity-100',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
