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
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 48s
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:
@@ -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 */
|
||||
|
||||
Reference in New Issue
Block a user