From b4ba9eaa809bbf43dd828159f7501d63fa8e3a5b Mon Sep 17 00:00:00 2001 From: josedario87 Date: Fri, 31 Oct 2025 10:34:20 -0600 Subject: [PATCH] Fix: Agregar mapeo de variables success para conectar con sistema de temas MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- nuxt4-app/app/assets/css/main.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/nuxt4-app/app/assets/css/main.css b/nuxt4-app/app/assets/css/main.css index 6bbaa67..cf48ae2 100644 --- a/nuxt4-app/app/assets/css/main.css +++ b/nuxt4-app/app/assets/css/main.css @@ -54,6 +54,20 @@ --ui-color-neutral-800: var(--brand-surface); --ui-color-neutral-900: 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 */