chore(Button): update

src/runtime/components/Button.vue

@@ -4,15 +4,16 @@ import { tv, type VariantProps } from 'tailwind-variants'
 import type { LinkProps } from '#ui/components/Link.vue'
 import theme from '#ui/theme/button'
 
-const appButton = tv(theme)
+const button = tv(theme)
 // const appButton = tv({ extend: button, ...(appConfig.ui?.button || {}) })
 
-type ButtonVariants = VariantProps<typeof appButton>
+type ButtonVariants = VariantProps<typeof button>
 
 export interface ButtonProps extends LinkProps {
   type?: string
   label?: string
   color?: ButtonVariants['color']
+  variant?: ButtonVariants['variant']
   size?: ButtonVariants['size']
   icon?: string
   leading?: boolean
@@ -24,16 +25,15 @@ export interface ButtonProps extends LinkProps {
   square?: boolean
   block?: boolean
   disabled?: boolean
-  padded?: boolean
   truncate?: boolean
   class?: any
-  ui?: Partial<typeof appButton.slots>
+  ui?: Partial<typeof button.slots>
 }
 
 export interface ButtonSlots {
-  leading(props?: { disabled?: boolean; loading?: boolean }): any
+  leading(props?: { disabled?: boolean; loading?: boolean, ui?: string }): any
   default(): any
-  trailing(props?: { disabled?: boolean; loading?: boolean }): any
+  trailing(props?: { disabled?: boolean; loading?: boolean, ui?: string }): any
 }
 </script>
 
@@ -49,20 +49,17 @@ const props = defineProps<ButtonProps>()
 const slots = defineSlots<ButtonSlots>()
 
 const appConfig = useAppConfig()
-const forward = useForwardProps(reactiveOmit(props, 'type', 'label', 'color', 'size', 'icon', 'leading', 'leadingIcon', 'trailing', 'trailingIcon', 'loading', 'loadingIcon', 'square', 'block', 'disabled', 'padded', 'truncate', 'class', 'ui'))
+const forward = useForwardProps(reactiveOmit(props, 'type', 'label', 'color', 'variant', 'size', 'icon', 'leading', 'leadingIcon', 'trailing', 'trailingIcon', 'loading', 'loadingIcon', 'square', 'block', 'disabled', 'truncate', 'class', 'ui'))
 
 // Computed
 
-const ui = computed(() => tv({
-  extend: appButton,
-  slots: props.ui
-})({
+const ui = computed(() => tv({ extend: button, slots: props.ui })({
   color: props.color,
+  variant: props.variant,
   size: props.size,
   loading: props.loading,
   truncate: props.truncate,
   block: props.block,
-  padded: props.padded,
   square: props.square || (!slots.default && !props.label)
 }))
 
@@ -88,8 +85,26 @@ const trailingIconName = computed(() => {
 </script>
 
 <template>
-  <ULink :type="type" :disabled="disabled || loading" :class="ui.base({ class: props.class })" v-bind="{ ...forward, ...$attrs }">
-    <slot name="leading" :disabled="disabled" :loading="loading">
+  <ULink
+    :type="type"
+    :disabled="disabled || loading"
+    :class="ui.base({ class: props.class })"
+    v-bind="{ ...forward, ...$attrs }"
+    :style="color && {
+      '--color-current-50': `var(--color-${color}-50)`,
+      '--color-current-100': `var(--color-${color}-100)`,
+      '--color-current-200': `var(--color-${color}-200)`,
+      '--color-current-300': `var(--color-${color}-300)`,
+      '--color-current-400': `var(--color-${color}-400)`,
+      '--color-current-500': `var(--color-${color}-500)`,
+      '--color-current-600': `var(--color-${color}-600)`,
+      '--color-current-700': `var(--color-${color}-700)`,
+      '--color-current-800': `var(--color-${color}-800)`,
+      '--color-current-900': `var(--color-${color}-900)`,
+      '--color-current-950': `var(--color-${color}-950)`
+    }"
+  >
+    <slot name="leading" :disabled="disabled" :loading="loading" :ui="ui.icon()">
       <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.icon()" aria-hidden="true" />
     </slot>
 
@@ -99,7 +114,7 @@ const trailingIconName = computed(() => {
       </slot>
     </span>
 
-    <slot name="trailing" :disabled="disabled" :loading="loading">
+    <slot name="trailing" :disabled="disabled" :loading="loading" :ui="ui.icon()">
       <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="ui.icon()" aria-hidden="true" />
     </slot>
   </ULink>

src/runtime/theme/button.ts

@@ -1,3 +1,5 @@
+const colors = ['primary', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchia', 'pink', 'rose']
+
 export default {
   slots: {
     base: 'rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 shrink-0',
@@ -6,9 +8,31 @@ export default {
   },
   variants: {
     color: {
-      primary: 'bg-blue-500 hover:bg-blue-700',
-      red: 'bg-red-500 hover:bg-red-700',
-      green: 'bg-green-500 hover:bg-green-700'
+      primary: '',
+      red: '',
+      orange: '',
+      amber: '',
+      yellow: '',
+      lime: '',
+      green: '',
+      emerald: '',
+      teal: '',
+      cyan: '',
+      sky: '',
+      blue: '',
+      indigo: '',
+      violet: '',
+      purple: '',
+      fuchia: '',
+      pink: '',
+      rose: ''
+    },
+    variant: {
+      solid: '',
+      outline: '',
+      soft: '',
+      ghost: '',
+      link: ''
     },
     size: {
       '2xs': {
@@ -47,22 +71,33 @@ export default {
       }
     },
     block: {
-      true: {
-        base: 'w-full justify-center'
-      }
+      true: 'w-full justify-center'
     },
     square: {
-      true: {
-        base: ''
-      }
-    },
-    padded: {
-      true: {
-        base: 'p-0'
-      }
+      true: ''
     }
   },
   compoundVariants: [{
+    color: ['primary'] as any,
+    variant: 'solid' as const,
+    class: { base: 'shadow-sm text-white dark:text-gray-900 bg-[--color-current-500] hover:bg-[--color-current-600] disabled:bg-[--color-current-500] dark:bg-[--color-current-400] dark:hover:bg-[--color-current-500] dark:disabled:bg-[--color-current-400] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--color-current-500] dark:focus-visible:outline-[--color-current-400]' }
+  }, {
+    color: colors as any,
+    variant: 'outline' as const,
+    class: 'ring-1 ring-inset ring-current text-[--color-current-500] dark:text-[--color-current-400] hover:bg-[--color-current-50] disabled:bg-transparent dark:hover:bg-[--color-current-950] dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-[--color-current-500] dark:focus-visible:ring-[--color-current-400]'
+  }, {
+    color: colors as any,
+    variant: 'soft' as const,
+    class: 'text-[--color-current-500] dark:text-[--color-current-400] bg-[--color-current-50] hover:bg-[--color-current-100] disabled:bg-[--color-current-50] dark:bg-[--color-current-950] dark:hover:bg-[--color-current-900] dark:disabled:bg-[--color-current-950] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--color-current-500] dark:focus-visible:ring-[--color-current-400]'
+  }, {
+    color: colors as any,
+    variant: 'ghost' as const,
+    class: 'text-[--color-current-500] dark:text-[--color-current-400] hover:bg-[--color-current-50] disabled:bg-transparent dark:hover:bg-[--color-current-950] dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--color-current-500] dark:focus-visible:ring-[--color-current-400]'
+  }, {
+    color: colors as any,
+    variant: 'link' as const,
+    class: 'text-[--color-current-500] hover:text-[--color-current-600] disabled:text-[--color-current-500] dark:text-[--color-current-400] dark:hover:text-[--color-current-500] dark:disabled:text-[--color-current-400] underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--color-current-500] dark:focus-visible:ring-[--color-current-400]'
+  }, {
     size: '2xs' as const,
     square: true,
     class: {
@@ -101,6 +136,7 @@ export default {
   }],
   defaultVariants: {
     color: 'primary' as const,
+    variant: 'solid' as const,
     size: 'sm' as const
   }
 }