chore(Button): update

2026-01-19 14:31:47 +01:00 · 2024-03-07 12:55:18 +01:00
parent 1530e82235
commit c90cea55a7
4 changed files with 129 additions and 55 deletions
--- a/src/runtime/components/Button.vue
+++ b/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>
--- a/src/runtime/theme/button.ts
+++ b/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
  }
 }
--- a/test/components/Button.spec.ts
+++ b/test/components/Button.spec.ts
@@ -8,14 +8,16 @@ describe('Button', () => {
    ['with class', { props: { class: 'rounded-full font-bold' } }],
    ['with size', { props: { label: 'Button', size: 'lg' as const } }],
    ['with color', { props: { label: 'Button', color: 'red' as const } }],
-    // ['with variant', { props: { label: 'Button', variant: 'outline' } }],
+    ['with variant outline', { props: { label: 'Button', variant: 'outline' as const } }],
+    ['with variant soft', { props: { label: 'Button', variant: 'soft' as const } }],
+    ['with variant ghost', { props: { label: 'Button', variant: 'ghost' as const } }],
+    ['with variant link', { props: { label: 'Button', variant: 'link' as const } }],
    ['with icon', { props: { icon: 'i-heroicons-academic-cap' } }],
    ['with trailingIcon', { props: { trailing: true, trailingIcon: 'i-heroicons-arrow-right' } }],
    ['with leadingIcon', { props: { leading: true, leadingIcon: 'i-heroicons-arrow-left' } }],
    ['with loading', { props: { loading: true } }],
    ['with loadingIcon', { props: { loading: true, loadingIcon: 'i-heroicons-sparkles' } }],
    ['with disabled', { props: { label: 'Button', disabled: true } }],
-    ['with padded', { props: { label: 'Button', padded: false } }],
    ['with block', { props: { label: 'Button', block: true } }],
    ['with square', { props: { label: 'Button', square: true } }],
    ['with truncate', { props: { label: 'Button', truncate: true } }],
--- a/test/components/snapshots/Button.spec.ts.snap
+++ b/test/components/snapshots/Button.spec.ts.snap
@@ -1,37 +1,37 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

 exports[`Button > renders with block correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 bg-blue-500 hover:bg-blue-700 px-2.5 py-1.5 text-sm gap-x-1.5 w-full justify-center">
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5 w-full justify-center 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]">
  <!--v-if--><span class="">Button</span>
  <!--v-if-->
 </button>"
 `;

-exports[`Button > renders with class correctly 1`] = `"<button type="button" class="inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 bg-blue-500 hover:bg-blue-700 text-sm gap-x-1.5 p-1 rounded-full font-bold"></button>"`;
+exports[`Button > renders with class correctly 1`] = `"<button type="button" class="inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 text-sm gap-x-1.5 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] p-1 rounded-full font-bold"></button>"`;

 exports[`Button > renders with color correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 bg-red-500 hover:bg-red-700 px-2.5 py-1.5 text-sm gap-x-1.5">
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5" style="--color-current-50: var(--color-red-50); --color-current-100: var(--color-red-100); --color-current-200: var(--color-red-200); --color-current-300: var(--color-red-300); --color-current-400: var(--color-red-400); --color-current-500: var(--color-red-500); --color-current-600: var(--color-red-600); --color-current-700: var(--color-red-700); --color-current-800: var(--color-red-800); --color-current-900: var(--color-red-900); --color-current-950: var(--color-red-950);">
  <!--v-if--><span class="">Button</span>
  <!--v-if-->
 </button>"
 `;

 exports[`Button > renders with default slot correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 bg-blue-500 hover:bg-blue-700 px-2.5 py-1.5 text-sm gap-x-1.5">
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5 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]">
  <!--v-if--><span class="">Default slot</span>
  <!--v-if-->
 </button>"
 `;

 exports[`Button > renders with disabled correctly 1`] = `
-"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 bg-blue-500 hover:bg-blue-700 px-2.5 py-1.5 text-sm gap-x-1.5">
+"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5 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]">
  <!--v-if--><span class="">Button</span>
  <!--v-if-->
 </button>"
 `;

 exports[`Button > renders with icon correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 bg-blue-500 hover:bg-blue-700 text-sm gap-x-1.5 p-1"><svg data-v-2f2f464d="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon flex-shrink-0 h-5 w-5" width="1em" height="1em" viewBox="0 0 24 24">
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 text-sm gap-x-1.5 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] p-1"><svg data-v-1cc11072="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 h-5 w-5" width="1em" height="1em" viewBox="0 0 24 24">
    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41a60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84a51.39 51.39 0 0 0-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5m0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5"></path>
  </svg>
  <!--v-if-->
@@ -40,21 +40,21 @@ exports[`Button > renders with icon correctly 1`] = `
 `;

 exports[`Button > renders with label correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 bg-blue-500 hover:bg-blue-700 px-2.5 py-1.5 text-sm gap-x-1.5">
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5 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]">
  <!--v-if--><span class="">Button</span>
  <!--v-if-->
 </button>"
 `;

 exports[`Button > renders with leading slot correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 bg-blue-500 hover:bg-blue-700 text-sm gap-x-1.5 p-1">Leading slot
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 text-sm gap-x-1.5 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] p-1">Leading slot
  <!--v-if-->
  <!--v-if-->
 </button>"
 `;

 exports[`Button > renders with leadingIcon correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 bg-blue-500 hover:bg-blue-700 text-sm gap-x-1.5 p-1"><svg data-v-2f2f464d="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon flex-shrink-0 h-5 w-5" width="1em" height="1em" viewBox="0 0 24 24">
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 text-sm gap-x-1.5 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] p-1"><svg data-v-1cc11072="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 h-5 w-5" width="1em" height="1em" viewBox="0 0 24 24">
    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"></path>
  </svg>
  <!--v-if-->
@@ -63,7 +63,7 @@ exports[`Button > renders with leadingIcon correctly 1`] = `
 `;

 exports[`Button > renders with loading correctly 1`] = `
-"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 bg-blue-500 hover:bg-blue-700 text-sm gap-x-1.5 p-1"><svg data-v-2f2f464d="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon flex-shrink-0 h-5 w-5 animate-spin" width="1em" height="1em" viewBox="0 0 20 20">
+"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 text-sm gap-x-1.5 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] p-1"><svg data-v-1cc11072="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 h-5 w-5 animate-spin" width="1em" height="1em" viewBox="0 0 20 20">
    <path fill="currentColor" fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138a.75.75 0 0 0-1.449-.39m1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219" clip-rule="evenodd"></path>
  </svg>
  <!--v-if-->
@@ -72,7 +72,7 @@ exports[`Button > renders with loading correctly 1`] = `
 `;

 exports[`Button > renders with loadingIcon correctly 1`] = `
-"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 bg-blue-500 hover:bg-blue-700 text-sm gap-x-1.5 p-1"><svg data-v-2f2f464d="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon flex-shrink-0 h-5 w-5 animate-spin" width="1em" height="1em" viewBox="0 0 24 24">
+"<button type="button" disabled="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 text-sm gap-x-1.5 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] p-1"><svg data-v-1cc11072="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 h-5 w-5 animate-spin" width="1em" height="1em" viewBox="0 0 24 24">
    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09m8.445-7.188L18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456m-1.365 11.852L16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183l.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394l-1.183.394a2.25 2.25 0 0 0-1.423 1.423"></path>
  </svg>
  <!--v-if-->
@@ -80,46 +80,67 @@ exports[`Button > renders with loadingIcon correctly 1`] = `
 </button>"
 `;

-exports[`Button > renders with padded correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 bg-blue-500 hover:bg-blue-700 px-2.5 py-1.5 text-sm gap-x-1.5">
-  <!--v-if--><span class="">Button</span>
-  <!--v-if-->
-</button>"
-`;
-
 exports[`Button > renders with size correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 bg-blue-500 hover:bg-blue-700 px-3.5 py-2.5 text-sm gap-x-2.5">
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-3.5 py-2.5 text-sm gap-x-2.5 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]">
  <!--v-if--><span class="">Button</span>
  <!--v-if-->
 </button>"
 `;

 exports[`Button > renders with square correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 bg-blue-500 hover:bg-blue-700 text-sm gap-x-1.5 p-1">
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 text-sm gap-x-1.5 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] p-1">
  <!--v-if--><span class="">Button</span>
  <!--v-if-->
 </button>"
 `;

 exports[`Button > renders with trailing slot correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 bg-blue-500 hover:bg-blue-700 text-sm gap-x-1.5 p-1">
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 text-sm gap-x-1.5 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] p-1">
  <!--v-if-->
  <!--v-if-->Trailing slot
 </button>"
 `;

 exports[`Button > renders with trailingIcon correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 bg-blue-500 hover:bg-blue-700 text-sm gap-x-1.5 p-1">
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 text-sm gap-x-1.5 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] p-1">
  <!--v-if-->
-  <!--v-if--><svg data-v-2f2f464d="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon flex-shrink-0 h-5 w-5" width="1em" height="1em" viewBox="0 0 24 24">
+  <!--v-if--><svg data-v-1cc11072="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 h-5 w-5" width="1em" height="1em" viewBox="0 0 24 24">
    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"></path>
  </svg>
 </button>"
 `;

 exports[`Button > renders with truncate correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 bg-blue-500 hover:bg-blue-700 px-2.5 py-1.5 text-sm gap-x-1.5">
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5 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]">
  <!--v-if--><span class="truncate">Button</span>
  <!--v-if-->
 </button>"
 `;
+
+exports[`Button > renders with variant ghost correctly 1`] = `
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5 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]">
+  <!--v-if--><span class="">Button</span>
+  <!--v-if-->
+</button>"
+`;
+
+exports[`Button > renders with variant link correctly 1`] = `
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5 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]">
+  <!--v-if--><span class="">Button</span>
+  <!--v-if-->
+</button>"
+`;
+
+exports[`Button > renders with variant outline correctly 1`] = `
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5 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]">
+  <!--v-if--><span class="">Button</span>
+  <!--v-if-->
+</button>"
+`;
+
+exports[`Button > renders with variant soft correctly 1`] = `
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 shrink-0 px-2.5 py-1.5 text-sm gap-x-1.5 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]">
+  <!--v-if--><span class="">Button</span>
+  <!--v-if-->
+</button>"
+`;