From ccbaf6ea150e0902d7150585bd09f132fc26ff89 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 1 Jul 2024 14:57:46 +0200
Subject: [PATCH] feat(module)!: move `primary` and `gray` inside `colors`
 object

---
 docs/app/app.config.ts        | 6 ++++--
 playground/app/app.config.ts  | 6 ++++--
 src/module.ts                 | 6 ++++--
 src/runtime/plugins/colors.ts | 7 +++++--
 src/templates.ts              | 6 ++++--
 5 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/docs/app/app.config.ts b/docs/app/app.config.ts
index dce4c0e6..c73eff73 100644
--- a/docs/app/app.config.ts
+++ b/docs/app/app.config.ts
@@ -1,6 +1,8 @@
 export default defineAppConfig({
   ui: {
-    primary: 'sky',
-    gray: 'cool'
+    colors: {
+      primary: 'sky',
+      gray: 'cool'
+    }
   }
 })
diff --git a/playground/app/app.config.ts b/playground/app/app.config.ts
index ac8a35cc..229a6934 100644
--- a/playground/app/app.config.ts
+++ b/playground/app/app.config.ts
@@ -5,7 +5,9 @@ export default defineAppConfig({
     duration: 5000
   },
   ui: {
-    primary: 'sky',
-    gray: 'cool'
+    colors: {
+      primary: 'red',
+      gray: 'cool'
+    }
   }
 })
diff --git a/src/module.ts b/src/module.ts
index ed032632..9ea0fe8b 100644
--- a/src/module.ts
+++ b/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
     })
 
diff --git a/src/runtime/plugins/colors.ts b/src/runtime/plugins/colors.ts
index 5f55d96f..ea0a35bf 100644
--- a/src/runtime/plugins/colors.ts
+++ b/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);
diff --git a/src/templates.ts b/src/templates.ts
index 661e459b..c1971232 100644
--- a/src/templates.ts
+++ b/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>