From 1530e822358e11ef03a95c31dbf4ff81ed438fa9 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 7 Mar 2024 12:55:00 +0100
Subject: [PATCH] chore(module): update colors

---
 src/module.ts                | 39 +++++++-----------------------------
 src/runtime/plugins/index.ts |  5 +++++
 src/templates.ts             | 34 +++++++++++++++++++++++++++++++
 3 files changed, 46 insertions(+), 32 deletions(-)
 create mode 100644 src/templates.ts

diff --git a/src/module.ts b/src/module.ts
index de00b0fd..be539dc9 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -1,6 +1,7 @@
 import { defu } from 'defu'
-import { createResolver, defineNuxtModule, addComponentsDir, addImportsDir, addVitePlugin, addPlugin, addTemplate, installModule } from '@nuxt/kit'
+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'
 
@@ -46,43 +47,17 @@ export default defineNuxtModule({
       }
     })
 
-    await installModule('nuxt-icon')
-
     addVitePlugin(tailwindcss)
 
+    createTemplates(nuxt)
+
+    await installModule('nuxt-icon')
+    // await installModule('@nuxtjs/color-mode', { classSuffix: '' })
+
     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 {
-        --color-cool-50: #f9fafb;
-        --color-cool-100: #f3f4f6;
-        --color-cool-200: #e5e7eb;
-        --color-cool-300: #d1d5db;
-        --color-cool-400: #9ca3af;
-        --color-cool-500: #6b7280;
-        --color-cool-600: #4b5563;
-        --color-cool-700: #374151;
-        --color-cool-800: #1f2937;
-        --color-cool-900: #111827;
-        --color-cool-950: #030712;
-
-        ${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')}
-      }
-      `
-    })
-
-    nuxt.options.css.push(template.dst)
-
     addComponentsDir({
       path: resolver.resolve('./runtime/components'),
       prefix: 'U',
diff --git a/src/runtime/plugins/index.ts b/src/runtime/plugins/index.ts
index 57bf8a27..dda1071e 100644
--- a/src/runtime/plugins/index.ts
+++ b/src/runtime/plugins/index.ts
@@ -9,9 +9,14 @@ 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')}
 }
+.dark {
+  --color-primary-DEFAULT: var(--color-primary-400);
+}
 `
   })
 
diff --git a/src/templates.ts b/src/templates.ts
new file mode 100644
index 00000000..7fc43e8b
--- /dev/null
+++ b/src/templates.ts
@@ -0,0 +1,34 @@
+import { useNuxt, addTemplate } from '@nuxt/kit'
+
+export default function createTemplates (nuxt = useNuxt()) {
+  const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
+
+  const template = addTemplate({
+    filename: 'ui.css',
+    write: true,
+    getContents: () => `
+      @import "tailwindcss";
+
+      @theme {
+        --color-gray-*: initial;
+        --color-cool-50: #f9fafb;
+        --color-cool-100: #f3f4f6;
+        --color-cool-200: #e5e7eb;
+        --color-cool-300: #d1d5db;
+        --color-cool-400: #9ca3af;
+        --color-cool-500: #6b7280;
+        --color-cool-600: #4b5563;
+        --color-cool-700: #374151;
+        --color-cool-800: #1f2937;
+        --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')}
+      }
+    `
+  })
+
+  nuxt.options.css.push(template.dst)
+}