From 4a837fbbb0ddb72a8d21ef56ce052b56cf44859d Mon Sep 17 00:00:00 2001 From: josedario87 Date: Thu, 30 Oct 2025 17:09:25 -0600 Subject: [PATCH] Fix: Corregir mapeo invertido de variables UI neutral 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 --- 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 2129d9b..8f4b927 100644 --- a/nuxt4-app/app/assets/css/main.css +++ b/nuxt4-app/app/assets/css/main.css @@ -28,18 +28,19 @@ --brand-text-muted: #d8c7a6; /* 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); + 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 */ + --ui-color-neutral-50: var(--brand-text); + --ui-color-neutral-100: var(--brand-text-muted); + --ui-color-neutral-200: var(--brand-primary); + --ui-color-neutral-300: var(--brand-primary); + --ui-color-neutral-400: var(--brand-primary-strong); + --ui-color-neutral-500: var(--brand-border); + --ui-color-neutral-600: var(--brand-border); + --ui-color-neutral-700: var(--brand-surface); + --ui-color-neutral-800: var(--brand-surface); + --ui-color-neutral-900: var(--brand-bg); + --ui-color-neutral-950: var(--brand-bg); } /* Critical: Prevent white flash on load */