feat(module)!: move primary and gray inside colors object

docs/app/app.config.ts

@@ -1,6 +1,8 @@
 export default defineAppConfig({
   ui: {
-    primary: 'sky',
-    gray: 'cool'
+    colors: {
+      primary: 'sky',
+      gray: 'cool'
+    }
   }
 })

playground/app/app.config.ts

@@ -5,7 +5,9 @@ export default defineAppConfig({
     duration: 5000
   },
   ui: {
-    primary: 'sky',
-    gray: 'cool'
+    colors: {
+      primary: 'red',
+      gray: 'cool'
+    }
   }
 })

src/module.ts

@@ -48,8 +48,10 @@ export default defineNuxtModule<ModuleOptions>({
     nuxt.options.alias['#ui'] = resolve('./runtime')
 
     nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, {
-      primary: 'green',
-      gray: 'cool',
+      colors: {
+        primary: 'green',
+        gray: 'cool'
+      },
       icons
     })
 

src/runtime/plugins/colors.ts

@@ -7,11 +7,14 @@ export default defineNuxtPlugin(() => {
 
   const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
 
+  function generateColor(key: string, value: string) {
+    return `${shades.map(shade => `--color-${key}-${shade}: var(--color-${value}-${shade});`).join('\n  ')}`
+  }
+
   const root = computed(() => {
     return `:root {
-  ${shades.map(shade => `--color-primary-${shade}: var(--color-${appConfig.ui.primary}-${shade});`).join('\n')}
+  ${Object.entries(appConfig.ui.colors).map(([key, value]: [string, string]) => generateColor(key, value)).join('\n  ')}
   --color-primary-DEFAULT: var(--color-primary-500);
-  ${shades.map(shade => `--color-gray-${shade}: var(--color-${appConfig.ui.gray}-${shade});`).join('\n')}
 }
 .dark {
   --color-primary-DEFAULT: var(--color-primary-400);

src/templates.ts

@@ -94,8 +94,10 @@ const colors = ${JSON.stringify(options.colors)} as const;
 const icons = ${JSON.stringify(nuxt.options.appConfig.ui.icons)};
 
 type AppConfigUI = {
-  primary?: typeof colors[number]
-  gray?: 'slate' | 'cool' | 'zinc' | 'neutral' | 'stone'
+  colors?: {
+    primary?: typeof colors[number]
+    gray?: 'slate' | 'cool' | 'zinc' | 'neutral' | 'stone'
+  }
   icons?: Partial<typeof icons>
 } & DeepPartial<typeof ui>