diff --git a/nuxt4-app/app/pages/settings.vue b/nuxt4-app/app/pages/settings.vue index 1a2b3a7..55ce2a4 100644 --- a/nuxt4-app/app/pages/settings.vue +++ b/nuxt4-app/app/pages/settings.vue @@ -777,7 +777,7 @@ watch(() => theme.value, (newTheme) => {

Fondo Secundario (Surface)

-

Usado en cards, modales y elementos elevados

+

Usado en cards grandes, modales, tooltips y elementos elevados

@@ -904,6 +904,12 @@ watch(() => theme.value, (newTheme) => { Resetear: Si no te gusta el resultado, usa "Restaurar por defecto" para volver al tema Café original

+
+ +

+ Cards grandes: Las cards de "Filtros", "Panorama" y otras ahora responden completamente al tema gracias a color-mix() con variables CSS +

+
@@ -917,11 +923,22 @@ watch(() => theme.value, (newTheme) => {

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. + menús, tablas, cards grandes (Filtros, Panorama, etc.), gráficas de comparativa de cosechas, + botones, inputs, tooltips y más. +

+

+ Clases CSS que responden: + .brand-card, + .brand-shell, + .brand-table, + .brand-chip 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 visual.

diff --git a/nuxt4-app/docs/THEME_SYSTEM.md b/nuxt4-app/docs/THEME_SYSTEM.md index 96898e6..7a7981d 100644 --- a/nuxt4-app/docs/THEME_SYSTEM.md +++ b/nuxt4-app/docs/THEME_SYSTEM.md @@ -1,7 +1,7 @@ # Sistema de Temas - Analítica Núcleo > **Documentación definitiva del sistema de temas personalizable** -> Versión: 2.0 | Última actualización: 2025-10-30 +> Versión: 2.1 | Última actualización: 2025-10-31 ## Índice @@ -75,6 +75,18 @@ Estas variables controlan la apariencia general de la aplicación: | `--brand-text` | Texto principal (alta legibilidad) | `#fef9f0` | | `--brand-text-muted` | Texto secundario, descripciones | `#d8c7a6` | +### Variables Intermedias para Gráficas (`--brand-cosecha-*`) + +Estas variables se usan en las gráficas de comparativa de cosechas para diferenciar visualmente múltiples series: + +| Variable | Uso | Ejemplo de valor | +|----------|-----|------------------| +| `--brand-cosecha-2` | Tono intermedio 1 para gráficas de cosechas | `#8b6f47` | +| `--brand-cosecha-3` | Tono intermedio 2 para gráficas de cosechas | `#a0826e` | +| `--brand-cosecha-4` | Tono intermedio 3 para gráficas de cosechas | `#b89968` | + +> **Nota:** Estas variables se ajustan automáticamente cuando cambias el tema, manteniendo la armonía visual con los colores primarios. + ### Variables de Tipos de Café (`--coffee-*`) Estas variables se usan para identificar visualmente los tipos de café en gráficas y tablas: @@ -179,8 +191,10 @@ Estas variables se usan para indicar estados de pago en tablas y badges: ## Clases Utilitarias +⚠️ **IMPORTANTE:** Todas las clases utilitarias ahora usan `color-mix()` y variables CSS dinámicas. Esto significa que **todas** responden automáticamente a los cambios de tema. + ### `.brand-shell` -Contenedor principal con gradiente radial. +Contenedor principal con gradiente radial dinámico. ```vue
@@ -188,8 +202,19 @@ Contenedor principal con gradiente radial.
``` +**Implementación CSS:** +```css +.brand-shell { + background: radial-gradient(circle at 20% 20%, + color-mix(in srgb, var(--brand-accent) 8%, transparent), transparent 55%), + radial-gradient(circle at 80% 10%, + color-mix(in srgb, var(--brand-primary-strong) 8%, transparent), transparent 45%), + var(--brand-bg); +} +``` + ### `.brand-card` -Tarjetas con estilos consistentes (gradiente, borde, sombra). +Tarjetas con estilos consistentes (gradiente, borde, sombra). **Ahora completamente dinámicas.** ```vue
@@ -198,6 +223,17 @@ Tarjetas con estilos consistentes (gradiente, borde, sombra).
``` +**Implementación CSS:** +```css +.brand-card { + background: linear-gradient(145deg, + color-mix(in srgb, var(--brand-bg) 95%, transparent), + color-mix(in srgb, var(--brand-surface) 85%, transparent)); + border: 1px solid color-mix(in srgb, var(--brand-primary) 12%, transparent); + box-shadow: 0 12px 40px color-mix(in srgb, var(--brand-bg) 55%, transparent); +} +``` + ### `.brand-divider` Divisor horizontal decorativo. @@ -205,6 +241,13 @@ Divisor horizontal decorativo.
``` +**Implementación CSS:** +```css +.brand-divider { + border-top: 1px solid color-mix(in srgb, var(--brand-primary) 16%, transparent); +} +``` + ### `.brand-section-title` Títulos de sección con color primario. @@ -213,13 +256,28 @@ Títulos de sección con color primario. ``` ### `.brand-chip` / `.brand-pill` -Tags o badges pequeños. +Tags o badges pequeños con estilos dinámicos. ```vue Estado Badge ``` +**Implementación CSS:** +```css +.brand-chip { + background: color-mix(in srgb, var(--brand-accent) 8%, transparent); + border: 1px solid color-mix(in srgb, var(--brand-accent) 18%, transparent); + color: var(--brand-accent); +} + +.brand-pill { + background: color-mix(in srgb, var(--brand-primary) 14%, transparent); + border: 1px solid color-mix(in srgb, var(--brand-primary) 28%, transparent); + color: var(--brand-primary); +} +``` + ### `.brand-badge` Badge con fondo primario sólido. @@ -228,7 +286,7 @@ Badge con fondo primario sólido. ``` ### `.brand-table` -Estilos para tablas. +Estilos para tablas con hover dinámico. ```vue @@ -237,6 +295,19 @@ Estilos para tablas.
``` +**Implementación CSS:** +```css +.brand-table thead { + background: linear-gradient(90deg, + color-mix(in srgb, var(--brand-surface) 95%, transparent), + color-mix(in srgb, var(--brand-bg) 95%, transparent)); +} + +.brand-table tbody tr:hover { + background: color-mix(in srgb, var(--brand-accent) 6%, transparent); +} +``` + --- ## Composable useTheme() @@ -778,8 +849,25 @@ text-[var(--status-anulado)] - **Usa el composable** `useTheme()` para manipulación programática - **Consulta este documento** ante cualquier duda sobre colores +## Mejoras Recientes (v2.1) + +✅ **Todas las clases CSS ahora son completamente dinámicas** +- Las cards grandes (`.brand-card`) responden a cambios de tema +- Los gradientes de fondo (`.brand-shell`) se ajustan automáticamente +- Todas las clases utilitarias usan `color-mix()` con variables CSS + +✅ **Nuevas variables para gráficas** +- `--brand-cosecha-2`, `--brand-cosecha-3`, `--brand-cosecha-4` +- Colores intermedios que mantienen armonía con el tema activo +- Usadas en gráficas de comparativa de cosechas + +✅ **Eliminación de colores hardcodeados** +- Ya no existe `--brand-bg-secondary` (ahora usa `--brand-surface`) +- Todos los colores RGB/hex hardcodeados fueron reemplazados +- El background de `html/body` ahora usa `var(--brand-bg)` + --- **Mantenido por:** Claude Code para Núcleo Río Frío -**Versión del sistema:** 2.0 -**Última revisión:** 2025-10-30 +**Versión del sistema:** 2.1 +**Última revisión:** 2025-10-31