chore(module): update theming

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" />

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 || {}) })

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 || {}) })

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')}

src/runtime/theme/button.ts

@@ -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
-  }
-}

src/runtime/theme/container.ts

@@ -1,3 +0,0 @@
-export default {
-  base: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'
-}

src/runtime/theme/index.ts

@@ -1,3 +0,0 @@
-export { default as button } from './button'
-export { default as container } from './container'
-export { default as tooltip } from './tooltip'

src/runtime/theme/tooltip.ts

@@ -1,6 +0,0 @@
-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'
-  }
-}