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

Fix: Agregar mapeo de variables success para conectar con sistema de temas
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 47s
Details

Browse Source 
Mapear --ui-color-success-* a --brand-success para que color="success"
en componentes de Nuxt UI use los colores del tema personalizado.

Antes:
- text-success buscaba --ui-color-success-* (no definidas)
- El color no se conectaba con --brand-success del tema

Después:
- Paleta completa de success (50-950) generada con color-mix
- success-500 apunta directamente a --brand-success
- Variaciones más claras/oscuras con mezclas de white/black
- NavigationMenu con color="success" ahora usa el color del tema

Flujo de colores:
color="success" → text-success (Tailwind) → --color-success-500
→ --ui-color-success-500 → --brand-success (tema personalizado)

Esto completa la integración del sistema de temas con los colores
semánticos de Nuxt UI v4.
This commit is contained in:
josedario87
2025-10-31 10:34:20 -06:00
parent 16175b7fd4
commit b4ba9eaa80
1 changed files with 14 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -54,6 +54,20 @@
--ui-color-neutral-800: var(--brand-surface); --ui-color-neutral-800: var(--brand-surface);
--ui-color-neutral-900: var(--brand-bg); --ui-color-neutral-900: var(--brand-bg);
--ui-color-neutral-950: var(--brand-bg); --ui-color-neutral-950: var(--brand-bg);
/* Mapear variables UI success a nuestro color de éxito del tema
Esto permite que color="success" en componentes use --brand-success */
--ui-color-success-50: color-mix(in srgb, var(--brand-success) 5%, white);
--ui-color-success-100: color-mix(in srgb, var(--brand-success) 10%, white);
--ui-color-success-200: color-mix(in srgb, var(--brand-success) 20%, white);
--ui-color-success-300: color-mix(in srgb, var(--brand-success) 40%, white);
--ui-color-success-400: color-mix(in srgb, var(--brand-success) 60%, white);
--ui-color-success-500: var(--brand-success);
--ui-color-success-600: color-mix(in srgb, var(--brand-success) 80%, black);
--ui-color-success-700: color-mix(in srgb, var(--brand-success) 60%, black);
--ui-color-success-800: color-mix(in srgb, var(--brand-success) 40%, black);
--ui-color-success-900: color-mix(in srgb, var(--brand-success) 20%, black);
--ui-color-success-950: color-mix(in srgb, var(--brand-success) 10%, black);
} }
/* Critical: Prevent white flash on load */ /* Critical: Prevent white flash on load */