From c79e6f188da1a508f0f736e70c28814ac01fe9f2 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 7 Mar 2024 15:33:53 +0100
Subject: [PATCH] chore(module): update theming

---
 src/module.ts                                 |  55 ++++---
 src/runtime/components/Button.vue             |  18 +--
 src/runtime/components/Container.vue          |   2 +-
 src/runtime/components/Tooltip.vue            |   2 +-
 src/runtime/plugins/index.ts                  |   1 -
 src/runtime/theme/button.ts                   | 142 -----------------
 src/templates.ts                              |  25 ++-
 src/theme/button.ts                           | 149 ++++++++++++++++++
 src/{runtime => }/theme/container.ts          |   4 +-
 src/{runtime => }/theme/index.ts              |   0
 src/{runtime => }/theme/tooltip.ts            |   4 +-
 .../__snapshots__/Button.spec.ts.snap         |  40 ++---
 12 files changed, 231 insertions(+), 211 deletions(-)
 delete mode 100644 src/runtime/theme/button.ts
 create mode 100644 src/theme/button.ts
 rename src/{runtime => }/theme/container.ts (65%)
 rename src/{runtime => }/theme/index.ts (100%)
 rename src/{runtime => }/theme/tooltip.ts (90%)

diff --git a/src/module.ts b/src/module.ts
index be539dc9..5be8c361 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -2,27 +2,31 @@ import { defu } from 'defu'
 import { createResolver, defineNuxtModule, addComponentsDir, addImportsDir, addVitePlugin, addPlugin, installModule } from '@nuxt/kit'
 import tailwindcss from '@tailwindcss/vite'
 import createTemplates from './templates'
-import type { DeepPartial } from './runtime/types'
-import * as theme from './runtime/theme'
+// import type { DeepPartial } from './runtime/types'
+// import * as theme from './runtime/theme'
 
-type UI = {
-  primary?: string
-  gray?: string
-  [key: string]: any
-} & DeepPartial<typeof theme>
+// type UI = {
+//   primary?: string
+//   gray?: string
+//   [key: string]: any
+// } & DeepPartial<typeof theme>
 
-declare module 'nuxt/schema' {
-  interface AppConfigInput {
-    ui?: UI
-  }
-}
-declare module '@nuxt/schema' {
-  interface AppConfigInput {
-    ui?: UI
-  }
+// declare module 'nuxt/schema' {
+//   interface AppConfigInput {
+//     ui?: UI
+//   }
+// }
+// declare module '@nuxt/schema' {
+//   interface AppConfigInput {
+//     ui?: UI
+//   }
+// }
+
+export interface ModuleOptions {
+  colors: string[]
 }
 
-export default defineNuxtModule({
+export default defineNuxtModule<ModuleOptions>({
   meta: {
     name: 'ui',
     configKey: 'ui',
@@ -30,10 +34,13 @@ export default defineNuxtModule({
       nuxt: '^3.10.0'
     }
   },
-  async setup (_, nuxt) {
-    const resolver = createResolver(import.meta.url)
+  defaults: {
+    colors: ['primary', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchia', 'pink', 'rose']
+  },
+  async setup (options, nuxt) {
+    const { resolve } = createResolver(import.meta.url)
 
-    nuxt.options.alias['#ui'] = resolver.resolve('./runtime')
+    nuxt.options.alias['#ui'] = resolve('./runtime')
 
     nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, {
       primary: 'green',
@@ -49,21 +56,21 @@ export default defineNuxtModule({
 
     addVitePlugin(tailwindcss)
 
-    createTemplates(nuxt)
+    createTemplates(options, nuxt)
 
     await installModule('nuxt-icon')
     // await installModule('@nuxtjs/color-mode', { classSuffix: '' })
 
     addPlugin({
-      src: resolver.resolve('./runtime/plugins/index')
+      src: resolve('./runtime/plugins/index')
     })
 
     addComponentsDir({
-      path: resolver.resolve('./runtime/components'),
+      path: resolve('./runtime/components'),
       prefix: 'U',
       pathPrefix: false
     })
 
-    addImportsDir(resolver.resolve('./runtime/composables'))
+    addImportsDir(resolve('./runtime/composables'))
   }
 })
diff --git a/src/runtime/components/Button.vue b/src/runtime/components/Button.vue
index 769ae128..5356078a 100644
--- a/src/runtime/components/Button.vue
+++ b/src/runtime/components/Button.vue
@@ -2,10 +2,11 @@
 import { tv, type VariantProps } from 'tailwind-variants'
 // import appConfig from '#build/app.config'
 import type { LinkProps } from '#ui/components/Link.vue'
-import theme from '#ui/theme/button'
+import theme from '#build/ui/button'
 
+// @ts-ignore
 const button = tv(theme)
-// const appButton = tv({ extend: button, ...(appConfig.ui?.button || {}) })
+// const button = tv({ extend: tv(theme), ...(appConfig.ui?.button || {}) })
 
 type ButtonVariants = VariantProps<typeof button>
 
@@ -90,19 +91,6 @@ const trailingIconName = computed(() => {
     :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" />
diff --git a/src/runtime/components/Container.vue b/src/runtime/components/Container.vue
index 3d8b63a8..721f4393 100644
--- a/src/runtime/components/Container.vue
+++ b/src/runtime/components/Container.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { tv } from 'tailwind-variants'
 // import appConfig from '#build/app.config'
-import theme from '#ui/theme/container'
+import theme from '#build/ui/container'
 
 const container = tv(theme)
 // const appContainer = tv({ extend: container, ...(appConfig.ui?.container || {}) })
diff --git a/src/runtime/components/Tooltip.vue b/src/runtime/components/Tooltip.vue
index 80d524d1..a8377c8f 100644
--- a/src/runtime/components/Tooltip.vue
+++ b/src/runtime/components/Tooltip.vue
@@ -2,7 +2,7 @@
 import { tv } from 'tailwind-variants'
 import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps } from 'radix-vue'
 // import appConfig from '#build/app.config'
-import theme from '#ui/theme/tooltip'
+import theme from '#build/ui/tooltip'
 
 const tooltip = tv(theme)
 // const appTooltip = tv({ extend: tooltip, ...(appConfig.ui?.tooltip || {}) })
diff --git a/src/runtime/plugins/index.ts b/src/runtime/plugins/index.ts
index dda1071e..6597fe4a 100644
--- a/src/runtime/plugins/index.ts
+++ b/src/runtime/plugins/index.ts
@@ -9,7 +9,6 @@ export default defineNuxtPlugin(() => {
 
   const root = computed(() => {
     return `:root {
-${shades.map(shade => `--color-current-${shade}: var(--color-${appConfig.ui.primary}-${shade});`).join('\n')}
 ${shades.map(shade => `--color-primary-${shade}: var(--color-${appConfig.ui.primary}-${shade});`).join('\n')}
 --color-primary-DEFAULT: var(--color-primary-500);
 ${shades.map(shade => `--color-gray-${shade}: var(--color-${appConfig.ui.gray}-${shade});`).join('\n')}
diff --git a/src/runtime/theme/button.ts b/src/runtime/theme/button.ts
deleted file mode 100644
index b1ea1b2b..00000000
--- a/src/runtime/theme/button.ts
+++ /dev/null
@@ -1,142 +0,0 @@
-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',
-    label: '',
-    icon: 'shrink-0'
-  },
-  variants: {
-    color: {
-      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': {
-        base: 'px-2 py-1 text-xs gap-x-1',
-        icon: 'h-4 w-4'
-      },
-      xs: {
-        base: 'px-2.5 py-1.5 text-xs gap-x-1.5',
-        icon: 'h-4 w-4'
-      },
-      sm: {
-        base: 'px-2.5 py-1.5 text-sm gap-x-1.5',
-        icon: 'h-5 w-5'
-      },
-      md: {
-        base: 'px-3 py-2 text-sm gap-x-2',
-        icon: 'h-5 w-5'
-      },
-      lg: {
-        base: 'px-3.5 py-2.5 text-sm gap-x-2.5',
-        icon: 'h-6 w-6'
-      },
-      xl: {
-        base: 'px-3.5 py-2.5 text-base gap-x-2.5',
-        icon: 'h-6 w-6'
-      }
-    },
-    truncate: {
-      true: {
-        label: 'truncate'
-      }
-    },
-    loading: {
-      true: {
-        icon: 'animate-spin'
-      }
-    },
-    block: {
-      true: 'w-full justify-center'
-    },
-    square: {
-      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: {
-      base: 'p-1'
-    }
-  }, {
-    size: 'xs' as const,
-    square: true,
-    class: {
-      base: 'p-1'
-    }
-  }, {
-    size: 'sm' as const,
-    square: true,
-    class: {
-      base: 'p-1'
-    }
-  }, {
-    size: 'md' as const,
-    square: true,
-    class: {
-      base: 'p-2'
-    }
-  }, {
-    size: 'lg' as const,
-    square: true,
-    class: {
-      base: 'p-2'
-    }
-  }, {
-    size: 'xl' as const,
-    square: true,
-    class: {
-      base: 'p-2'
-    }
-  }],
-  defaultVariants: {
-    color: 'primary' as const,
-    variant: 'solid' as const,
-    size: 'sm' as const
-  }
-}
\ No newline at end of file
diff --git a/src/templates.ts b/src/templates.ts
index 7fc43e8b..26de0e92 100644
--- a/src/templates.ts
+++ b/src/templates.ts
@@ -1,6 +1,9 @@
-import { useNuxt, addTemplate } from '@nuxt/kit'
+import { addTemplate, addTypeTemplate } from '@nuxt/kit'
+import type { Nuxt } from '@nuxt/schema'
+import type { ModuleOptions } from './module'
+import * as theme from './theme'
 
-export default function createTemplates (nuxt = useNuxt()) {
+export default function createTemplates (options: ModuleOptions, nuxt: Nuxt) {
   const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
 
   const template = addTemplate({
@@ -23,7 +26,6 @@ export default function createTemplates (nuxt = useNuxt()) {
         --color-cool-900: #111827;
         --color-cool-950: #030712;
 
-        ${shades.map(shade => `--color-current-${shade}: var(--color-${nuxt.options.appConfig.ui.primary}-${shade});`).join('\n')}
         ${shades.map(shade => `--color-primary-${shade}: var(--color-${nuxt.options.appConfig.ui.primary}-${shade});`).join('\n')}
         ${shades.map(shade => `--color-gray-${shade}: var(--color-${nuxt.options.appConfig.ui.gray}-${shade});`).join('\n')}
       }
@@ -31,4 +33,21 @@ export default function createTemplates (nuxt = useNuxt()) {
   })
 
   nuxt.options.css.push(template.dst)
+
+  for (const component in theme) {
+    addTemplate({
+      filename: `ui/${component}.ts`,
+      write: true,
+      getContents: () => `export default ${JSON.stringify((theme as any)[component]({ colors: options.colors }), null, 2)}`
+    })
+
+    // addTypeTemplate({
+    //   filename: `ui/${component}.d.ts`,
+    //   write: true,
+    //   getContents: () => `import ${component} from './${component}'
+
+    //   type T = typeof ${component}
+    //   export default T`
+    // })
+  }
 }
diff --git a/src/theme/button.ts b/src/theme/button.ts
new file mode 100644
index 00000000..1fab8f42
--- /dev/null
+++ b/src/theme/button.ts
@@ -0,0 +1,149 @@
+export default (config: any) => ({
+  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',
+    label: '',
+    icon: 'shrink-0'
+  },
+  variants: {
+    color: Object.fromEntries(config.colors.map((color: string) => [color, ''])),
+    variant: {
+      solid: '',
+      outline: '',
+      soft: '',
+      ghost: '',
+      link: ''
+    },
+    size: {
+      '2xs': {
+        base: 'px-2 py-1 text-xs gap-x-1',
+        icon: 'h-4 w-4'
+      },
+      xs: {
+        base: 'px-2.5 py-1.5 text-xs gap-x-1.5',
+        icon: 'h-4 w-4'
+      },
+      sm: {
+        base: 'px-2.5 py-1.5 text-sm gap-x-1.5',
+        icon: 'h-5 w-5'
+      },
+      md: {
+        base: 'px-3 py-2 text-sm gap-x-2',
+        icon: 'h-5 w-5'
+      },
+      lg: {
+        base: 'px-3.5 py-2.5 text-sm gap-x-2.5',
+        icon: 'h-6 w-6'
+      },
+      xl: {
+        base: 'px-3.5 py-2.5 text-base gap-x-2.5',
+        icon: 'h-6 w-6'
+      }
+    },
+    truncate: {
+      true: {
+        label: 'truncate'
+      }
+    },
+    loading: {
+      true: {
+        icon: 'animate-spin'
+      }
+    },
+    block: {
+      true: 'w-full justify-center'
+    },
+    square: {
+      true: ''
+    }
+  },
+  compoundVariants: [...config.colors.map((color: string) => ({
+    color,
+    variant: 'solid',
+    class: `shadow-sm text-white dark:text-gray-900 bg-${color}-500 hover:bg-${color}-600 disabled:bg-${color}-500 dark:bg-${color}-400 dark:hover:bg-${color}-500 dark:disabled:bg-${color}-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`
+  })), ...config.colors.map((color: string) => ({
+    color,
+    variant: 'outline',
+    class: `ring-1 ring-inset ring-current text-${color}-500 dark:text-${color}-400 hover:bg-${color}-50 disabled:bg-transparent dark:hover:bg-${color}-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
+  })), ...config.colors.map((color: string) => ({
+    color,
+    variant: 'soft',
+    class: `text-${color}-500 dark:text-${color}-400 bg-${color}-50 hover:bg-${color}-100 disabled:bg-${color}-50 dark:bg-${color}-950 dark:hover:bg-${color}-900 dark:disabled:bg-${color}-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
+  })), ...config.colors.map((color: string) => ({
+    color,
+    variant: 'ghost',
+    class: `text-${color}-500 dark:text-${color}-400 hover:bg-${color}-50 disabled:bg-transparent dark:hover:bg-${color}-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
+  })), ...config.colors.map((color: string) => ({
+    color,
+    variant: 'link',
+    class: `text-${color}-500 hover:text-${color}-600 disabled:text-${color}-500 dark:text-${color}-400 dark:hover:text-${color}-500 dark:disabled:text-${color}-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
+  })), {
+    color: 'white',
+    variant: 'solid',
+    class: 'shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
+  }, {
+    color: 'white',
+    variant: 'ghost',
+    class: 'text-gray-900 dark:text-white hover:bg-white dark:hover:bg-gray-900 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
+  }, {
+    color: 'gray',
+    variant: 'solid',
+    class: 'shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
+  }, {
+    color: 'gray',
+    variant: 'ghost',
+    class: 'text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
+  }, {
+    color: 'gray',
+    variant: 'link',
+    class: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
+  }, {
+    color: 'black',
+    variant: 'solid',
+    class: 'shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
+  }, {
+    color: 'black',
+    variant: 'link',
+    class: 'text-gray-900 dark:text-white underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
+  }, {
+    size: '2xs',
+    square: true,
+    class: {
+      base: 'p-1'
+    }
+  }, {
+    size: 'xs',
+    square: true,
+    class: {
+      base: 'p-1'
+    }
+  }, {
+    size: 'sm',
+    square: true,
+    class: {
+      base: 'p-1'
+    }
+  }, {
+    size: 'md',
+    square: true,
+    class: {
+      base: 'p-2'
+    }
+  }, {
+    size: 'lg',
+    square: true,
+    class: {
+      base: 'p-2'
+    }
+  }, {
+    size: 'xl',
+    square: true,
+    class: {
+      base: 'p-2'
+    }
+  }],
+  defaultVariants: {
+    color: 'primary',
+    variant: 'solid',
+    size: 'sm'
+  }
+})
\ No newline at end of file
diff --git a/src/runtime/theme/container.ts b/src/theme/container.ts
similarity index 65%
rename from src/runtime/theme/container.ts
rename to src/theme/container.ts
index 6af6eae4..c24f7808 100644
--- a/src/runtime/theme/container.ts
+++ b/src/theme/container.ts
@@ -1,3 +1,3 @@
-export default {
+export default () => ({
   base: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'
-}
\ No newline at end of file
+})
\ No newline at end of file
diff --git a/src/runtime/theme/index.ts b/src/theme/index.ts
similarity index 100%
rename from src/runtime/theme/index.ts
rename to src/theme/index.ts
diff --git a/src/runtime/theme/tooltip.ts b/src/theme/tooltip.ts
similarity index 90%
rename from src/runtime/theme/tooltip.ts
rename to src/theme/tooltip.ts
index e3bf35c6..5d379f67 100644
--- a/src/runtime/theme/tooltip.ts
+++ b/src/theme/tooltip.ts
@@ -1,6 +1,6 @@
-export default {
+export default () => ({
   slots: {
     content: 'bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring-1 ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs font-normal truncate relative',
     arrow: 'fill-white dark:fill-gray-900'
   }
-}
\ No newline at end of file
+})
\ No newline at end of file
diff --git a/test/components/__snapshots__/Button.spec.ts.snap b/test/components/__snapshots__/Button.spec.ts.snap
index 70491ec7..5ea90764 100644
--- 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 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]">
+"<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-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-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 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 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-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-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 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);">
+"<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-red-500 hover:bg-red-600 disabled:bg-red-500 dark:bg-red-400 dark:hover:bg-red-500 dark:disabled:bg-red-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400">
   <!--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 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]">
+"<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-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-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 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]">
+"<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-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-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 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">
+"<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-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-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 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]">
+"<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-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-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 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
+"<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-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-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 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">
+"<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-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-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 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">
+"<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-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-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 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">
+"<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-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-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-->
@@ -81,28 +81,28 @@ exports[`Button > renders with loadingIcon correctly 1`] = `
 `;
 
 exports[`Button > renders with size correctly 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 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]">
+"<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-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-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 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">
+"<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-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-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 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">
+"<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-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-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 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">
+"<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-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1">
   <!--v-if-->
   <!--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>
@@ -111,35 +111,35 @@ exports[`Button > renders with trailingIcon correctly 1`] = `
 `;
 
 exports[`Button > renders with truncate correctly 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 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]">
+"<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-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-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]">
+"<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-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-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]">
+"<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-primary-500 hover:text-primary-600 disabled:text-primary-500 dark:text-primary-400 dark:hover:text-primary-500 dark:disabled:text-primary-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-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]">
+"<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-primary-500 dark:text-primary-400 hover:bg-primary-50 disabled:bg-transparent dark:hover:bg-primary-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-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]">
+"<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-primary-500 dark:text-primary-400 bg-primary-50 hover:bg-primary-100 disabled:bg-primary-50 dark:bg-primary-950 dark:hover:bg-{color}-900 dark:disabled:bg-primary-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
   <!--v-if--><span class="">Button</span>
   <!--v-if-->
 </button>"