From d9fefe6df47c167a24362060a27832525a791f69 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Thu, 30 Oct 2025 18:18:37 -0600
Subject: [PATCH] =?UTF-8?q?Feat:=20Agregar=20variable=20success=20y=20comp?=
 =?UTF-8?q?letar=20inputs=20de=20personalizaci=C3=B3n=20de=20tema?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Cambios realizados:
- Agregada variable success (#00dc82 Nuxt green) para botones de confirmación y elementos de éxito
- Agregados inputs de color para todas las variables de café (Uva, Oreado, Mojado, Verde)
- Agregados inputs de color para todas las variables de estados (Pendiente, Pagado, Anulado)
- Actualizada interfaz ThemeColors con nueva propiedad success
- Actualizados todos los temas preestablecidos (café, azul, verde, carbón) con variable success
- Actualizada validación de importación de temas con nueva propiedad
- Agregado CSS --brand-success en main.css

Los usuarios ahora pueden personalizar completamente todos los colores del sistema:
- 9 colores base (incluye success)
- 4 colores de tipos de café
- 3 colores de estados de pago
Total: 16 variables personalizables

La variable success se aplica a:
- Botones de confirmación
- Página seleccionada en sidebar
- Indicadores de éxito
---
 nuxt4-app/app/assets/css/main.css     |   1 +
 nuxt4-app/app/composables/useTheme.ts |   5 +-
 nuxt4-app/app/pages/settings.vue      | 179 ++++++++++++++++++++++++++
 3 files changed, 184 insertions(+), 1 deletion(-)

diff --git a/nuxt4-app/app/assets/css/main.css b/nuxt4-app/app/assets/css/main.css
index e21c4ee..6bbaa67 100644
--- a/nuxt4-app/app/assets/css/main.css
+++ b/nuxt4-app/app/assets/css/main.css
@@ -25,6 +25,7 @@
   --brand-primary: #e0c080;
   --brand-primary-strong: #c08040;
   --brand-accent: #ffe0a0;
+  --brand-success: #00dc82;    /* Nuxt green - éxito/confirmación */
   --brand-text: #fef9f0;
   --brand-text-muted: #d8c7a6;
 
diff --git a/nuxt4-app/app/composables/useTheme.ts b/nuxt4-app/app/composables/useTheme.ts
index 3d51658..3908613 100644
--- a/nuxt4-app/app/composables/useTheme.ts
+++ b/nuxt4-app/app/composables/useTheme.ts
@@ -26,6 +26,7 @@ export interface ThemeColors {
   primary: string
   primaryStrong: string
   accent: string
+  success: string        // Verde de éxito/confirmación
   text: string
   textMuted: string
 
@@ -52,6 +53,7 @@ export const defaultTheme: ThemeColors = {
   primary: '#e0c080',
   primaryStrong: '#c08040',
   accent: '#ffe0a0',
+  success: '#00dc82',        // Nuxt green
   text: '#fef9f0',
   textMuted: '#d8c7a6',
 
@@ -95,6 +97,7 @@ export const useTheme = () => {
       root.style.setProperty('--brand-primary', colors.primary)
       root.style.setProperty('--brand-primary-strong', colors.primaryStrong)
       root.style.setProperty('--brand-accent', colors.accent)
+      root.style.setProperty('--brand-success', colors.success)
       root.style.setProperty('--brand-text', colors.text)
       root.style.setProperty('--brand-text-muted', colors.textMuted)
 
@@ -203,7 +206,7 @@ export const useTheme = () => {
       // Validar que tenga todas las propiedades requeridas
       const requiredKeys: (keyof ThemeColors)[] = [
         'bg', 'surface', 'border', 'primary',
-        'primaryStrong', 'accent', 'text', 'textMuted',
+        'primaryStrong', 'accent', 'success', 'text', 'textMuted',
         'coffeeUva', 'coffeeOreado', 'coffeeMojado', 'coffeeVerde',
         'statusPendiente', 'statusPagado', 'statusAnulado'
       ]
diff --git a/nuxt4-app/app/pages/settings.vue b/nuxt4-app/app/pages/settings.vue
index d48c5c5..0887697 100644
--- a/nuxt4-app/app/pages/settings.vue
+++ b/nuxt4-app/app/pages/settings.vue
@@ -28,6 +28,7 @@ const presetThemes: Record<string, ThemeColors> = {
     primary: '#60a5fa',
     primaryStrong: '#3b82f6',
     accent: '#93c5fd',
+    success: '#00dc82',
     text: '#f0f4f8',
     textMuted: '#cbd5e1',
     // Colores de café (mantener consistentes)
@@ -47,6 +48,7 @@ const presetThemes: Record<string, ThemeColors> = {
     primary: '#86efac',
     primaryStrong: '#4ade80',
     accent: '#bbf7d0',
+    success: '#00dc82',
     text: '#f0fdf4',
     textMuted: '#d1fae5',
     // Colores de café (mantener consistentes)
@@ -66,6 +68,7 @@ const presetThemes: Record<string, ThemeColors> = {
     primary: '#a3a3a3',
     primaryStrong: '#737373',
     accent: '#d4d4d4',
+    success: '#00dc82',
     text: '#fafafa',
     textMuted: '#d4d4d4',
     // Colores de café (mantener consistentes)
@@ -379,6 +382,30 @@ watch(() => theme.value, (newTheme) => {
                 </div>
               </div>
 
+              <!-- Éxito/Confirmación -->
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label class="block text-sm font-medium text-[var(--brand-text)] mb-2">
+                    Color de Éxito/Confirmación
+                  </label>
+                  <div class="flex gap-2">
+                    <input
+                      v-model="theme.success"
+                      type="color"
+                      class="h-10 w-20 rounded-lg border border-[var(--brand-border)] cursor-pointer"
+                    />
+                    <UInput
+                      v-model="theme.success"
+                      placeholder="#00dc82"
+                      class="flex-1"
+                    />
+                  </div>
+                  <p class="text-xs text-[var(--brand-text-muted)] mt-1">
+                    Se usa en botones de confirmar, página seleccionada en sidebar, etc.
+                  </p>
+                </div>
+              </div>
+
               <!-- Texto y Texto Muted -->
               <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div>
@@ -418,6 +445,158 @@ watch(() => theme.value, (newTheme) => {
                 </div>
               </div>
 
+              <!-- Separador -->
+              <div class="pt-6 border-t border-[var(--brand-border)]">
+                <h4 class="text-sm font-semibold text-[var(--brand-text)] mb-4">
+                  Colores de Tipos de Café
+                </h4>
+              </div>
+
+              <!-- Café Uva y Oreado -->
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label class="block text-sm font-medium text-[var(--brand-text)] mb-2">
+                    Café Uva
+                  </label>
+                  <div class="flex gap-2">
+                    <input
+                      v-model="theme.coffeeUva"
+                      type="color"
+                      class="h-10 w-20 rounded-lg border border-[var(--brand-border)] cursor-pointer"
+                    />
+                    <UInput
+                      v-model="theme.coffeeUva"
+                      placeholder="#a855f7"
+                      class="flex-1"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label class="block text-sm font-medium text-[var(--brand-text)] mb-2">
+                    Café Oreado
+                  </label>
+                  <div class="flex gap-2">
+                    <input
+                      v-model="theme.coffeeOreado"
+                      type="color"
+                      class="h-10 w-20 rounded-lg border border-[var(--brand-border)] cursor-pointer"
+                    />
+                    <UInput
+                      v-model="theme.coffeeOreado"
+                      placeholder="#f97316"
+                      class="flex-1"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- Café Mojado y Verde -->
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label class="block text-sm font-medium text-[var(--brand-text)] mb-2">
+                    Café Mojado
+                  </label>
+                  <div class="flex gap-2">
+                    <input
+                      v-model="theme.coffeeMojado"
+                      type="color"
+                      class="h-10 w-20 rounded-lg border border-[var(--brand-border)] cursor-pointer"
+                    />
+                    <UInput
+                      v-model="theme.coffeeMojado"
+                      placeholder="#06b6d4"
+                      class="flex-1"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label class="block text-sm font-medium text-[var(--brand-text)] mb-2">
+                    Café Verde
+                  </label>
+                  <div class="flex gap-2">
+                    <input
+                      v-model="theme.coffeeVerde"
+                      type="color"
+                      class="h-10 w-20 rounded-lg border border-[var(--brand-border)] cursor-pointer"
+                    />
+                    <UInput
+                      v-model="theme.coffeeVerde"
+                      placeholder="#22c55e"
+                      class="flex-1"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- Separador -->
+              <div class="pt-6 border-t border-[var(--brand-border)]">
+                <h4 class="text-sm font-semibold text-[var(--brand-text)] mb-4">
+                  Colores de Estados
+                </h4>
+              </div>
+
+              <!-- Estado Pendiente y Pagado -->
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label class="block text-sm font-medium text-[var(--brand-text)] mb-2">
+                    Estado Pendiente
+                  </label>
+                  <div class="flex gap-2">
+                    <input
+                      v-model="theme.statusPendiente"
+                      type="color"
+                      class="h-10 w-20 rounded-lg border border-[var(--brand-border)] cursor-pointer"
+                    />
+                    <UInput
+                      v-model="theme.statusPendiente"
+                      placeholder="#f59e0b"
+                      class="flex-1"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label class="block text-sm font-medium text-[var(--brand-text)] mb-2">
+                    Estado Pagado
+                  </label>
+                  <div class="flex gap-2">
+                    <input
+                      v-model="theme.statusPagado"
+                      type="color"
+                      class="h-10 w-20 rounded-lg border border-[var(--brand-border)] cursor-pointer"
+                    />
+                    <UInput
+                      v-model="theme.statusPagado"
+                      placeholder="#10b981"
+                      class="flex-1"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- Estado Anulado -->
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label class="block text-sm font-medium text-[var(--brand-text)] mb-2">
+                    Estado Anulado
+                  </label>
+                  <div class="flex gap-2">
+                    <input
+                      v-model="theme.statusAnulado"
+                      type="color"
+                      class="h-10 w-20 rounded-lg border border-[var(--brand-border)] cursor-pointer"
+                    />
+                    <UInput
+                      v-model="theme.statusAnulado"
+                      placeholder="#6b7280"
+                      class="flex-1"
+                    />
+                  </div>
+                </div>
+              </div>
+
               <!-- Acciones -->
               <div class="space-y-3 pt-4 border-t border-[var(--brand-border)]">
                 <!-- Botones principales -->