From cac84adc7d059ac6eaeb54b741cdf34d441ca9cd Mon Sep 17 00:00:00 2001 From: josedario87 Date: Thu, 30 Oct 2025 17:31:50 -0600 Subject: [PATCH] =?UTF-8?q?Feat:=20Extender=20sistema=20de=20temas=20con?= =?UTF-8?q?=20colores=20de=20caf=C3=A9=20y=20estados?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Cambios: - Agregar documentación completa del sistema de temas en /settings - Extender ThemeColors con 7 nuevas variables: * coffeeUva, coffeeOreado, coffeeMojado, coffeeVerde * statusPendiente, statusPagado, statusAnulado - Actualizar useTheme.ts para aplicar nuevas variables CSS - Actualizar main.css con definiciones de nuevas variables - Actualizar temas predefinidos (azul, verde, carbón) - Mantener colores de café y estados consistentes en todos los temas Las nuevas variables permiten personalizar: - Colores de identificación de tipos de café en gráficas - Colores de estados de pago en tablas y badges --- nuxt4-app/app/assets/css/main.css | 12 ++ nuxt4-app/app/composables/useTheme.ts | 42 ++++- nuxt4-app/app/pages/settings.vue | 245 +++++++++++++++++++++++++- 3 files changed, 294 insertions(+), 5 deletions(-) diff --git a/nuxt4-app/app/assets/css/main.css b/nuxt4-app/app/assets/css/main.css index 8f4b927..e21c4ee 100644 --- a/nuxt4-app/app/assets/css/main.css +++ b/nuxt4-app/app/assets/css/main.css @@ -18,6 +18,7 @@ } :root { + /* Colores base del tema */ --brand-bg: #14100b; --brand-surface: #1f180f; --brand-border: #3a2a16; @@ -27,6 +28,17 @@ --brand-text: #fef9f0; --brand-text-muted: #d8c7a6; + /* Colores para tipos de café */ + --coffee-uva: #a855f7; /* Purple - Café Uva */ + --coffee-oreado: #f97316; /* Orange - Café Oreado */ + --coffee-mojado: #06b6d4; /* Cyan - Café Mojado */ + --coffee-verde: #22c55e; /* Green - Café Verde */ + + /* Colores para estados */ + --status-pendiente: #f59e0b; /* Amber - Pendiente de pago */ + --status-pagado: #10b981; /* Emerald - Pagado */ + --status-anulado: #6b7280; /* Gray - Anulado */ + /* Mapear variables UI neutral a nuestras variables dinámicas --brand-* Esto permite que los componentes de Nuxt UI respondan a cambios de tema IMPORTANTE: Nuxt UI usa neutral-50 para fondos oscuros y neutral-950 para texto claro en dark mode */ diff --git a/nuxt4-app/app/composables/useTheme.ts b/nuxt4-app/app/composables/useTheme.ts index 9e68939..3d51658 100644 --- a/nuxt4-app/app/composables/useTheme.ts +++ b/nuxt4-app/app/composables/useTheme.ts @@ -19,6 +19,7 @@ */ export interface ThemeColors { + // Colores base bg: string surface: string border: string @@ -27,12 +28,24 @@ export interface ThemeColors { accent: string text: string textMuted: string + + // Colores para tipos de café + coffeeUva: string // Purple - Café Uva + coffeeOreado: string // Orange - Café Oreado + coffeeMojado: string // Cyan - Café Mojado + coffeeVerde: string // Green - Café Verde + + // Colores para estados + statusPendiente: string // Amarillo/naranja - Pendiente de pago + statusPagado: string // Verde - Pagado + statusAnulado: string // Rojo/gris - Anulado } /** * Tema por defecto - Café */ export const defaultTheme: ThemeColors = { + // Colores base bg: '#14100b', surface: '#1f180f', border: '#3a2a16', @@ -40,7 +53,18 @@ export const defaultTheme: ThemeColors = { primaryStrong: '#c08040', accent: '#ffe0a0', text: '#fef9f0', - textMuted: '#d8c7a6' + textMuted: '#d8c7a6', + + // Colores para tipos de café + coffeeUva: '#a855f7', // Purple + coffeeOreado: '#f97316', // Orange + coffeeMojado: '#06b6d4', // Cyan + coffeeVerde: '#22c55e', // Green + + // Colores para estados + statusPendiente: '#f59e0b', // Amber + statusPagado: '#10b981', // Emerald + statusAnulado: '#6b7280' // Gray } /** @@ -64,6 +88,7 @@ export const useTheme = () => { const colors = themeColors || theme.value const root = document.documentElement + // Colores base root.style.setProperty('--brand-bg', colors.bg) root.style.setProperty('--brand-surface', colors.surface) root.style.setProperty('--brand-border', colors.border) @@ -72,6 +97,17 @@ export const useTheme = () => { root.style.setProperty('--brand-accent', colors.accent) root.style.setProperty('--brand-text', colors.text) root.style.setProperty('--brand-text-muted', colors.textMuted) + + // Colores para tipos de café + root.style.setProperty('--coffee-uva', colors.coffeeUva) + root.style.setProperty('--coffee-oreado', colors.coffeeOreado) + root.style.setProperty('--coffee-mojado', colors.coffeeMojado) + root.style.setProperty('--coffee-verde', colors.coffeeVerde) + + // Colores para estados + root.style.setProperty('--status-pendiente', colors.statusPendiente) + root.style.setProperty('--status-pagado', colors.statusPagado) + root.style.setProperty('--status-anulado', colors.statusAnulado) } } @@ -167,7 +203,9 @@ export const useTheme = () => { // Validar que tenga todas las propiedades requeridas const requiredKeys: (keyof ThemeColors)[] = [ 'bg', 'surface', 'border', 'primary', - 'primaryStrong', 'accent', 'text', 'textMuted' + 'primaryStrong', 'accent', 'text', 'textMuted', + 'coffeeUva', 'coffeeOreado', 'coffeeMojado', 'coffeeVerde', + 'statusPendiente', 'statusPagado', 'statusAnulado' ] for (const key of requiredKeys) { diff --git a/nuxt4-app/app/pages/settings.vue b/nuxt4-app/app/pages/settings.vue index 599d0ca..cf3c7f3 100644 --- a/nuxt4-app/app/pages/settings.vue +++ b/nuxt4-app/app/pages/settings.vue @@ -29,7 +29,16 @@ const presetThemes: Record = { primaryStrong: '#3b82f6', accent: '#93c5fd', text: '#f0f4f8', - textMuted: '#cbd5e1' + textMuted: '#cbd5e1', + // Colores de café (mantener consistentes) + coffeeUva: '#a855f7', + coffeeOreado: '#f97316', + coffeeMojado: '#06b6d4', + coffeeVerde: '#22c55e', + // Colores de estados (mantener consistentes) + statusPendiente: '#f59e0b', + statusPagado: '#10b981', + statusAnulado: '#6b7280' }, verde: { bg: '#0f1a14', @@ -39,7 +48,16 @@ const presetThemes: Record = { primaryStrong: '#4ade80', accent: '#bbf7d0', text: '#f0fdf4', - textMuted: '#d1fae5' + textMuted: '#d1fae5', + // Colores de café (mantener consistentes) + coffeeUva: '#a855f7', + coffeeOreado: '#f97316', + coffeeMojado: '#06b6d4', + coffeeVerde: '#22c55e', + // Colores de estados (mantener consistentes) + statusPendiente: '#f59e0b', + statusPagado: '#10b981', + statusAnulado: '#6b7280' }, carbon: { bg: '#0f0f0f', @@ -49,7 +67,16 @@ const presetThemes: Record = { primaryStrong: '#737373', accent: '#d4d4d4', text: '#fafafa', - textMuted: '#d4d4d4' + textMuted: '#d4d4d4', + // Colores de café (mantener consistentes) + coffeeUva: '#a855f7', + coffeeOreado: '#f97316', + coffeeMojado: '#06b6d4', + coffeeVerde: '#22c55e', + // Colores de estados (mantener consistentes) + statusPendiente: '#f59e0b', + statusPagado: '#10b981', + statusAnulado: '#6b7280' } } @@ -507,6 +534,218 @@ watch(() => theme.value, (newTheme) => { + + + + +
+ +
+

+ ¿Qué es el Sistema de Temas? +

+

+ El sistema de temas te permite personalizar completamente la apariencia de Analítica Núcleo. + Cada color que cambies se aplicará instantáneamente en + toda la aplicación: menús, tablas, gráficas, botones y más. +

+
+ +
+ + +
+

+ Variables de Color +

+
+ +
+
+
+

Fondo Principal

+

Color de fondo base de toda la aplicación

+
+
+ + +
+
+
+

Fondo Secundario (Surface)

+

Usado en cards, modales y elementos elevados

+
+
+ + +
+
+
+

Color de Bordes

+

Bordes de todos los elementos y separadores

+
+
+ + +
+
+
+

Color Primario

+

Enlaces, títulos destacados y elementos interactivos

+
+
+ + +
+
+
+

Color Primario Fuerte

+

Variante más intensa para hover y énfasis

+
+
+ + +
+
+
+

Color de Acento

+

Highlights, badges y elementos de énfasis

+
+
+ + +
+
+
+

Color de Texto

+

Texto principal con alta legibilidad

+
+
+ + +
+
+
+

Color de Texto Secundario

+

Descripciones, subtítulos y texto menos prominente

+
+
+
+
+ +
+ + +
+

+ Cómo Personalizar +

+
+
+ +

+ Temas Predefinidos: Haz clic en uno de los botones (Café, Azul, Verde, Carbón) para aplicar un tema completo +

+
+
+ +

+ Personalización Individual: Usa los selectores de color para ajustar cada variable a tu gusto +

+
+
+ +

+ Vista Previa en Vivo: Los cambios se aplican instantáneamente para que veas el resultado +

+
+
+ +

+ Guardar Cambios: No olvides hacer clic en "Guardar cambios" para que tu tema persista +

+
+
+
+ +
+ + +
+

+ Consejos y Mejores Prácticas +

+
+
+ +

+ Contraste: Asegúrate de que el texto tenga buen contraste con el fondo para facilitar la lectura +

+
+
+ +

+ Armonía: El "Color Primario Fuerte" debería ser una versión más intensa del "Color Primario" +

+
+
+ +

+ Exportar: Usa "Exportar tema" para hacer backup de tu configuración o compartirla +

+
+
+ +

+ Resetear: Si no te gusta el resultado, usa "Restaurar por defecto" para volver al tema Café original +

+
+
+
+ +
+ + +
+
+ +
+

+ Alcance del Sistema de Temas +

+

+ El tema se aplica a toda la aplicación: sidebar, + menús, tablas, cards, gráficas, botones, inputs y más. Los únicos colores que NO cambian son + los semánticos (estados de éxito/error/advertencia) y los identificadores de tipos de café + (Uva/Oreado/Mojado/Verde) que mantienen sus colores específicos para mejor identificación. +

+
+
+
+
+ +