nucleo000/analiticaNucleo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Corregir mapeo invertido de variables UI neutral
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 48s
Details

Browse Source 
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
This commit is contained in:
josedario87
2025-10-30 17:09:25 -06:00
parent 8dee464a54
commit 4a837fbbb0
1 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
nuxt4-app/app/assets/css/main.css
View File

@@ -28,18 +28,19 @@
--brand-text-muted: #d8c7a6; --brand-text-muted: #d8c7a6;
/* Mapear variables UI neutral a nuestras variables dinámicas --brand-* /* Mapear variables UI neutral a nuestras variables dinámicas --brand-*
Esto permite que los componentes de Nuxt UI respondan a cambios de tema */ Esto permite que los componentes de Nuxt UI respondan a cambios de tema
--ui-color-neutral-50: var(--brand-bg); IMPORTANTE: Nuxt UI usa neutral-50 para fondos oscuros y neutral-950 para texto claro en dark mode */
--ui-color-neutral-100: var(--brand-bg); --ui-color-neutral-50: var(--brand-text);
--ui-color-neutral-200: var(--brand-surface); --ui-color-neutral-100: var(--brand-text-muted);
--ui-color-neutral-300: var(--brand-border); --ui-color-neutral-200: var(--brand-primary);
--ui-color-neutral-400: var(--brand-border); --ui-color-neutral-300: var(--brand-primary);
--ui-color-neutral-500: var(--brand-primary-strong); --ui-color-neutral-400: var(--brand-primary-strong);
--ui-color-neutral-600: var(--brand-primary); --ui-color-neutral-500: var(--brand-border);
--ui-color-neutral-700: var(--brand-primary); --ui-color-neutral-600: var(--brand-border);
--ui-color-neutral-800: var(--brand-text-muted); --ui-color-neutral-700: var(--brand-surface);
--ui-color-neutral-900: var(--brand-text); --ui-color-neutral-800: var(--brand-surface);
--ui-color-neutral-950: var(--brand-text); --ui-color-neutral-900: var(--brand-bg);
--ui-color-neutral-950: var(--brand-bg);
} }
/* Critical: Prevent white flash on load */ /* Critical: Prevent white flash on load */