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

Fix: Mapear variables UI de Nuxt a variables brand dinámicas
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 48s
Details

Browse Source 
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-*
This commit is contained in:
josedario87
2025-10-30 16:56:26 -06:00
parent 0a754958ae
commit 8dee464a54
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

@@ -27,18 +27,19 @@
--brand-text: #fef9f0; --brand-text: #fef9f0;
--brand-text-muted: #d8c7a6; --brand-text-muted: #d8c7a6;
/* Mapear variables UI neutral a coffee para que Nuxt UI use el tema café */ /* Mapear variables UI neutral a nuestras variables dinámicas --brand-*
--ui-color-neutral-50: var(--color-coffee-50); Esto permite que los componentes de Nuxt UI respondan a cambios de tema */
--ui-color-neutral-100: var(--color-coffee-100); --ui-color-neutral-50: var(--brand-bg);
--ui-color-neutral-200: var(--color-coffee-200); --ui-color-neutral-100: var(--brand-bg);
--ui-color-neutral-300: var(--color-coffee-300); --ui-color-neutral-200: var(--brand-surface);
--ui-color-neutral-400: var(--color-coffee-400); --ui-color-neutral-300: var(--brand-border);
--ui-color-neutral-500: var(--color-coffee-500); --ui-color-neutral-400: var(--brand-border);
--ui-color-neutral-600: var(--color-coffee-600); --ui-color-neutral-500: var(--brand-primary-strong);
--ui-color-neutral-700: var(--color-coffee-700); --ui-color-neutral-600: var(--brand-primary);
--ui-color-neutral-800: var(--color-coffee-800); --ui-color-neutral-700: var(--brand-primary);
--ui-color-neutral-900: var(--color-coffee-900); --ui-color-neutral-800: var(--brand-text-muted);
--ui-color-neutral-950: var(--color-coffee-950); --ui-color-neutral-900: var(--brand-text);
--ui-color-neutral-950: var(--brand-text);
} }
/* Critical: Prevent white flash on load */ /* Critical: Prevent white flash on load */