cleanup: Simplify button options, add two text only variants

src/components/input/MultiSelect.vue

@@ -114,7 +114,6 @@
           </span>
           <Button
             v-if="showClearButton"
-            variant="unset"
             subtype="textonly"
             size="md"
             @click.stop="selectedItems = []"

src/components/queue/job/QueueJobItem.vue

@@ -157,8 +157,7 @@
             <Button
               v-else-if="props.state === 'completed'"
               class="transform bg-modal-card-button-surface px-2 py-0 transition duration-150 ease-in-out hover:-translate-y-px hover:opacity-95"
-              variant="unset"
-              subtype="textonly"
+              variant="textonly"
               size="sm"
               @click.stop="emit('view')"
               >{{ t('menuLabels.View') }}</Button

src/components/ui/button/Button.vue

@@ -11,7 +11,6 @@ import { buttonVariants } from './button.variants'
 interface Props extends PrimitiveProps {
   variant?: ButtonVariants['variant']
   size?: ButtonVariants['size']
-  subtype?: ButtonVariants['subtype']
   class?: HTMLAttributes['class']
 }
 
@@ -22,7 +21,7 @@ const { as = 'button', class: customClass = '' } = defineProps<Props>()
   <Primitive
     :as
     :as-child
-    :class="cn(buttonVariants({ variant, size, subtype }), customClass)"
+    :class="cn(buttonVariants({ variant, size }), customClass)"
   >
     <slot />
   </Primitive>

src/components/ui/button/button.variants.ts

@@ -5,7 +5,6 @@ export const buttonVariants = cva({
   base: 'inline-flex items-center justify-center gap-2 cursor-pointer whitespace-nowrap appearance-none border-none rounded-md text-sm font-medium font-inter transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   variants: {
     variant: {
-      unset: 'text-base-foreground hover:bg-secondary-background-hover',
       secondary:
         'bg-secondary-background text-secondary-foreground hover:bg-secondary-background-hover',
       primary:
@@ -14,70 +13,34 @@ export const buttonVariants = cva({
         'bg-base-foreground text-base-background hover:bg-base-foreground/80',
       destructive:
         'bg-destructive-background text-base-foreground hover:bg-destructive-background-hover',
-      'destructive-subtle':
-        'bg-secondary-background text-base-foreground hover:bg-destructive-background-hover'
+      textonly:
+        'text-base-foreground bg-transparent hover:bg-secondary-background-hover',
+      'muted-textonly':
+        'text-muted-foreground bg-transparent hover:bg-secondary-background-hover'
     },
     size: {
       sm: 'h-6 rounded-sm px-2 py-1 text-xs',
       md: 'h-8 rounded-lg p-2 text-xs',
       lg: 'h-10 rounded-lg px-4 py-2 text-sm',
       icon: 'size-9'
-    },
-    subtype: {
-      unset: null,
-      textonly: null
     }
   },
-  compoundVariants: [
-    {
-      variant: [
-        'unset',
-        'primary',
-        'secondary',
-        'inverted',
-        'destructive',
-        'destructive-subtle'
-      ],
-      subtype: 'textonly',
-      class: 'bg-transparent'
-    },
-    {
-      variant: 'primary',
-      subtype: 'textonly',
-      class: 'text-primary-background'
-    },
-    {
-      variant: 'secondary',
-      subtype: 'textonly',
-      class: 'text-muted-foreground'
-    },
-    {
-      variant: 'destructive',
-      subtype: 'textonly',
-      class: 'text-destructive-background'
-    },
-    {
-      variant: 'destructive-subtle',
-      subtype: 'textonly',
-      class: 'text-secondary-background hover:text-destructive-background'
-    }
-  ],
+
   defaultVariants: {
     variant: 'secondary',
-    size: 'md',
-    subtype: 'unset'
+    size: 'md'
   }
 })
 
 export type ButtonVariants = VariantProps<typeof buttonVariants>
 
 const variants = [
-  'unset',
-  'primary',
   'secondary',
+  'primary',
   'inverted',
   'destructive',
-  'destructive-subtle'
+  'textonly',
+  'muted-textonly'
 ] as const satisfies Array<ButtonVariants['variant']>
 const sizes = ['sm', 'md', 'lg', 'icon'] as const satisfies Array<
   ButtonVariants['size']

src/platform/assets/components/UploadModelUpgradeModalFooter.vue

@@ -9,7 +9,7 @@
       <i class="icon-[lucide--external-link]" />
       <span>{{ $t('g.learnMore') }}</span>
     </a>
-    <Button variant="unset" subtype="textonly" @click="emit('close')">{{
+    <Button variant="textonly" @click="emit('close')">{{
       $t('g.close')
     }}</Button>
     <Button variant="secondary" @click="emit('subscribe')">