- Reemplazados colores RGB hardcodeados en .brand-card con color-mix()
- Actualizado .brand-shell para usar var(--brand-accent) y var(--brand-primary-strong)
- Actualizado .brand-divider para usar var(--brand-primary)
- Actualizado .brand-chip para usar var(--brand-accent)
- Actualizado .brand-pill para usar var(--brand-primary)
- Actualizado .brand-table para usar var(--brand-surface) y var(--brand-bg)
- Actualizado background de html/body para usar var(--brand-bg)
Ahora todas las cards y contenedores grandes responden a cambios de tema
- Agregadas nuevas variables CSS --brand-cosecha-2, --brand-cosecha-3, --brand-cosecha-4 para gráficas
- Reemplazado --brand-bg-secondary (no existía) por --brand-surface en todos los componentes
- Actualizados arrays de colores en componentes de comparativa de cosechas
- Eliminados colores RGB/hex hardcodeados en tooltips y badges
- Todos los componentes ahora respetan el sistema de temas dinámico
Mapear --ui-color-success-* a --brand-success para que color="success"
en componentes de Nuxt UI use los colores del tema personalizado.
Antes:
- text-success buscaba --ui-color-success-* (no definidas)
- El color no se conectaba con --brand-success del tema
Después:
- Paleta completa de success (50-950) generada con color-mix
- success-500 apunta directamente a --brand-success
- Variaciones más claras/oscuras con mezclas de white/black
- NavigationMenu con color="success" ahora usa el color del tema
Flujo de colores:
color="success" → text-success (Tailwind) → --color-success-500
→ --ui-color-success-500 → --brand-success (tema personalizado)
Esto completa la integración del sistema de temas con los colores
semánticos de Nuxt UI v4.
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
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
El problema era que Nuxt UI usa la escala neutral de forma invertida:
- neutral-50 se usa para texto claro
- neutral-900/950 se usa para fondos oscuros
Esto causaba que los labels tuvieran el mismo color que el fondo de las cards.
Cambios:
- Invertir el mapeo de --ui-color-neutral-*
- neutral-50/100 ahora mapean a --brand-text/--brand-text-muted
- neutral-900/950 ahora mapean a --brand-bg
PROBLEMA: Los componentes de Nuxt UI (UCard, UButton, etc.) usaban
colores fijos de --color-coffee-* que no respondían a cambios de tema.
SOLUCIÓN: Mapear --ui-color-neutral-* a variables --brand-* dinámicas:
- neutral-50/100 → --brand-bg (fondos más oscuros)
- neutral-200 → --brand-surface (fondos elevados)
- neutral-300/400 → --brand-border (bordes)
- neutral-500/600/700 → --brand-primary/primary-strong (interactivos)
- neutral-800/900/950 → --brand-text/text-muted (textos)
RESULTADO: Ahora los UCard y otros componentes de Nuxt UI cambian
correctamente cuando se selecciona un tema predefinido.
Archivos modificados:
- app/assets/css/main.css: Remapeo de variables --ui-color-neutral-*
- Corregir prop :ui de 'wrapper' a 'root' en UDashboardSidebar
- Agregar mapeo explícito de variables --ui-color-neutral-* a coffee
- Esto fuerza a Nuxt UI a usar la paleta café en lugar de slate/azul
- Soluciona el problema de fondo azul en todos los navegadores
Los shades estaban configurados para light mode (50=claro, 950=oscuro).
En dark mode, Nuxt UI espera la escala invertida (50=oscuro, 950=claro).
Cambios:
- 50: #1b1209 (más oscuro)
- 500: #c08040 (medio - café principal)
- 950: #fef9f0 (más claro)
Esto asegura que en dark mode se vean los colores café/dorado correctamente.
Implementa la configuración correcta de colores según Nuxt UI 4:
- Define color 'coffee' con shades 50-950 usando @theme en CSS
- Configura aliases primary y neutral a 'coffee' en app.config.ts
- Esto permite que todos los componentes de Nuxt UI usen el tema café/dorado
- Reemplaza los colores azules y verdes por defecto globalmente
