From 8dee464a54f48ffb7422f017c40b855920f9e69f Mon Sep 17 00:00:00 2001 From: josedario87 Date: Thu, 30 Oct 2025 16:56:26 -0600 Subject: [PATCH] =?UTF-8?q?Fix:=20Mapear=20variables=20UI=20de=20Nuxt=20a?= =?UTF-8?q?=20variables=20brand=20din=C3=A1micas?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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-* --- nuxt4-app/app/assets/css/main.css | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/nuxt4-app/app/assets/css/main.css b/nuxt4-app/app/assets/css/main.css index 5369d4f..2129d9b 100644 --- a/nuxt4-app/app/assets/css/main.css +++ b/nuxt4-app/app/assets/css/main.css @@ -27,18 +27,19 @@ --brand-text: #fef9f0; --brand-text-muted: #d8c7a6; - /* Mapear variables UI neutral a coffee para que Nuxt UI use el tema café */ - --ui-color-neutral-50: var(--color-coffee-50); - --ui-color-neutral-100: var(--color-coffee-100); - --ui-color-neutral-200: var(--color-coffee-200); - --ui-color-neutral-300: var(--color-coffee-300); - --ui-color-neutral-400: var(--color-coffee-400); - --ui-color-neutral-500: var(--color-coffee-500); - --ui-color-neutral-600: var(--color-coffee-600); - --ui-color-neutral-700: var(--color-coffee-700); - --ui-color-neutral-800: var(--color-coffee-800); - --ui-color-neutral-900: var(--color-coffee-900); - --ui-color-neutral-950: var(--color-coffee-950); + /* Mapear variables UI neutral a nuestras variables dinámicas --brand-* + Esto permite que los componentes de Nuxt UI respondan a cambios de tema */ + --ui-color-neutral-50: var(--brand-bg); + --ui-color-neutral-100: var(--brand-bg); + --ui-color-neutral-200: var(--brand-surface); + --ui-color-neutral-300: var(--brand-border); + --ui-color-neutral-400: var(--brand-border); + --ui-color-neutral-500: var(--brand-primary-strong); + --ui-color-neutral-600: var(--brand-primary); + --ui-color-neutral-700: var(--brand-primary); + --ui-color-neutral-800: var(--brand-text-muted); + --ui-color-neutral-900: var(--brand-text); + --ui-color-neutral-950: var(--brand-text); } /* Critical: Prevent white flash on load */