chore(module): dynamic colors

src/module.ts

@@ -1,5 +1,5 @@
 import { defu } from 'defu'
-import { createResolver, defineNuxtModule, addComponentsDir, addImportsDir, addVitePlugin, installModule } from '@nuxt/kit'
+import { createResolver, defineNuxtModule, addComponentsDir, addImportsDir, addVitePlugin, addPlugin, addTemplate, installModule } from '@nuxt/kit'
 import tailwindcss from '@tailwindcss/vite'
 import type { DeepPartial } from './runtime/types'
 import * as theme from './runtime/theme'
@@ -34,13 +34,15 @@ export default defineNuxtModule({
 
     nuxt.options.alias['#ui'] = resolver.resolve('./runtime')
 
-    nuxt.options.css.push(resolver.resolve('./runtime/main.css'))
-
     nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, {
       primary: 'green',
       gray: 'cool',
       icons: {
-        loading: 'i-heroicons-arrow-path-20-solid'
+        search: 'i-heroicons-magnifying-glass-20-solid',
+        close: 'i-heroicons-x-mark-20-solid',
+        check: 'i-heroicons-check-20-solid',
+        loading: 'i-heroicons-arrow-path-20-solid',
+        empty: 'i-heroicons-circle-stack-20-solid'
       }
     })
 
@@ -48,6 +50,27 @@ export default defineNuxtModule({
 
     addVitePlugin(tailwindcss)
 
+    addPlugin({
+      src: resolver.resolve('./runtime/plugins/index')
+    })
+
+    const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
+
+    const template = addTemplate({
+      filename: 'main.css',
+      write: true,
+      getContents: () => `
+      @import "tailwindcss";
+
+      @theme {
+        ${shades.map(shade => `--color-primary-${shade}: var(--color-primary-${shade});`).join('\n')}
+        ${shades.map(shade => `--color-gray-${shade}: var(--color-gray-${shade});`).join('\n')}
+      }
+      `
+    })
+
+    nuxt.options.css.push(template.dst)
+
     addComponentsDir({
       path: resolver.resolve('./runtime/components'),
       prefix: 'U',