From 009c6a18217186f345654f93bacac5dc7a8d6e56 Mon Sep 17 00:00:00 2001 From: josedario87 Date: Sat, 18 Oct 2025 02:31:31 -0600 Subject: [PATCH] =?UTF-8?q?Fix:=20Redise=C3=B1ar=20toasts=20completamente?= =?UTF-8?q?=20para=20acoplarse=20al=20sistema=20de=20cataci=C3=B3n?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit PROBLEMA: Toasts usaban estilos por defecto de Nuxt UI que no se acoplaban al diseño outline/terminal SOLUCIÓN: - Cambiar app.config.ts para usar clases CSS personalizadas en lugar de sintaxis arbitraria de Tailwind - Agregar estilos CSS completos en main.css usando variables del sistema (--cata-bg, --cata-fg, --cata-primary) - Implementar todas las variantes (primary, success, error, warning, info, neutral) ESTILOS APLICADOS: - Fondo: var(--cata-bg) en claro, negro 95% opaco en oscuro - Bordes: outline usando var(--cata-primary) con opacidades - Texto: fuente monospace en modo oscuro con text-shadow - Iconos: colores específicos por tipo con drop-shadow en oscuro - Efectos glow: sombras sutiles en modo oscuro según tipo - IMPORTANTE: Usar !important para sobrescribir estilos de Nuxt UI --- nuxt4/app.config.ts | 80 +++------------ nuxt4/app/assets/css/main.css | 188 ++++++++++++++++++++++++++++++++++ 2 files changed, 203 insertions(+), 65 deletions(-) diff --git a/nuxt4/app.config.ts b/nuxt4/app.config.ts index 39ae990..e149d6d 100644 --- a/nuxt4/app.config.ts +++ b/nuxt4/app.config.ts @@ -162,88 +162,38 @@ export default defineAppConfig({ }, }, - // Notifications (Toast): Estilo outline/terminal del sistema de catación + // Notifications (Toast): Usar clases personalizadas definidas en main.css notification: { slots: { - root: [ - 'bg-[var(--cata-bg)] border border-[var(--cata-primary)]', - 'dark:bg-black/95 dark:border-[var(--cata-primary)]', - 'rounded-md p-4', - ], - wrapper: 'w-full flex gap-3', - title: [ - 'text-[var(--cata-fg)] font-semibold text-sm', - 'dark:font-mono dark:font-light', - 'dark:[text-shadow:0_0_2px_currentColor]', - ], - description: [ - 'text-[var(--cata-fg)] opacity-75 text-xs', - 'dark:font-mono dark:font-light', - 'dark:[text-shadow:0_0_1px_currentColor]', - ], - icon: [ - 'shrink-0 w-5 h-5', - 'text-[var(--cata-fg)]', - 'dark:[filter:drop-shadow(0_0_2px_currentColor)]', - ], + root: 'cata-toast-root', + wrapper: 'cata-toast-wrapper', + title: 'cata-toast-title', + description: 'cata-toast-description', + icon: 'cata-toast-icon', avatar: 'shrink-0', - actions: 'flex gap-1.5 shrink-0 mt-2', - close: [ - 'shrink-0', - 'text-[var(--cata-fg)]', - 'hover:opacity-80', - ], - progress: 'absolute inset-x-0 bottom-0 h-0.5 bg-[var(--cata-primary)] opacity-50', + actions: 'cata-toast-actions', + close: 'cata-toast-close', + progress: 'cata-toast-progress', }, variants: { color: { primary: { - root: [ - 'border-[var(--cata-primary)]/50', - 'dark:border-[var(--cata-primary)]', - 'dark:shadow-[0_0_12px_rgba(0,255,0,0.2)]', - ], - icon: 'text-[var(--cata-primary)]', + root: 'cata-toast-primary', }, success: { - root: [ - 'border-green-600/50 dark:border-green-500', - 'dark:shadow-[0_0_12px_rgba(0,255,0,0.25)]', - ], - icon: 'text-green-600 dark:text-green-500', - progress: 'bg-green-600 dark:bg-green-500', + root: 'cata-toast-success', }, error: { - root: [ - 'border-red-600/50 dark:border-red-500', - 'dark:shadow-[0_0_12px_rgba(255,0,0,0.25)]', - ], - icon: 'text-red-600 dark:text-red-500', - progress: 'bg-red-600 dark:bg-red-500', + root: 'cata-toast-error', }, warning: { - root: [ - 'border-yellow-600/50 dark:border-yellow-500', - 'dark:shadow-[0_0_12px_rgba(255,255,0,0.25)]', - ], - icon: 'text-yellow-600 dark:text-yellow-500', - progress: 'bg-yellow-600 dark:bg-yellow-500', + root: 'cata-toast-warning', }, info: { - root: [ - 'border-blue-600/50 dark:border-blue-500', - 'dark:shadow-[0_0_12px_rgba(70,130,180,0.25)]', - ], - icon: 'text-blue-600 dark:text-blue-500', - progress: 'bg-blue-600 dark:bg-blue-500', + root: 'cata-toast-info', }, neutral: { - root: [ - 'border-gray-500/50 dark:border-gray-500', - 'dark:shadow-[0_0_12px_rgba(128,128,128,0.2)]', - ], - icon: 'text-gray-600 dark:text-gray-400', - progress: 'bg-gray-600 dark:bg-gray-500', + root: 'cata-toast-neutral', }, }, }, diff --git a/nuxt4/app/assets/css/main.css b/nuxt4/app/assets/css/main.css index 56f3e38..60cdb49 100644 --- a/nuxt4/app/assets/css/main.css +++ b/nuxt4/app/assets/css/main.css @@ -358,3 +358,191 @@ font-weight: 400; } } + +/* -------------------------------------------------------------------------- */ +/* TOASTS / NOTIFICACIONES */ +/* -------------------------------------------------------------------------- */ + +/* Root container del toast */ +.cata-toast-root { + background-color: var(--cata-bg) !important; + border: var(--cata-border-width) solid var(--cata-primary) !important; + border-radius: 0.375rem; + padding: 1rem; +} + +.dark .cata-toast-root { + background-color: rgba(0, 0, 0, 0.95) !important; + border-color: var(--cata-primary) !important; +} + +/* Wrapper del contenido */ +.cata-toast-wrapper { + display: flex; + gap: 0.75rem; + width: 100%; +} + +/* Título del toast */ +.cata-toast-title { + color: var(--cata-fg) !important; + font-family: var(--cata-font-family); + font-size: 0.875rem; + font-weight: 600; +} + +.dark .cata-toast-title { + font-family: 'Courier New', Courier, 'Lucida Console', Monaco, monospace; + font-weight: 300; + text-shadow: 0 0 2px currentColor; +} + +/* Descripción del toast */ +.cata-toast-description { + color: var(--cata-fg) !important; + font-family: var(--cata-font-family); + font-size: 0.75rem; + opacity: 0.75; +} + +.dark .cata-toast-description { + font-family: 'Courier New', Courier, 'Lucida Console', Monaco, monospace; + font-weight: 300; + text-shadow: 0 0 1px currentColor; +} + +/* Icono del toast */ +.cata-toast-icon { + flex-shrink: 0; + width: 1.25rem; + height: 1.25rem; + color: var(--cata-fg); +} + +.dark .cata-toast-icon { + filter: drop-shadow(0 0 2px currentColor); +} + +/* Botones de acción */ +.cata-toast-actions { + display: flex; + gap: 0.375rem; + flex-shrink: 0; + margin-top: 0.5rem; +} + +/* Botón de cerrar */ +.cata-toast-close { + flex-shrink: 0; + color: var(--cata-fg); +} + +.cata-toast-close:hover { + opacity: 0.8; +} + +/* Barra de progreso */ +.cata-toast-progress { + position: absolute; + inset-inline-start: 0; + inset-inline-end: 0; + bottom: 0; + height: 0.125rem; + background-color: var(--cata-primary); + opacity: 0.5; +} + +/* Variantes de color */ +.cata-toast-primary { + border-color: color-mix(in srgb, var(--cata-primary) 50%, transparent) !important; +} + +.dark .cata-toast-primary { + border-color: var(--cata-primary) !important; + box-shadow: 0 0 12px rgba(0, 255, 0, 0.2); +} + +.cata-toast-success { + border-color: rgba(22, 163, 74, 0.5) !important; +} + +.dark .cata-toast-success { + border-color: rgb(34, 197, 94) !important; + box-shadow: 0 0 12px rgba(0, 255, 0, 0.25); +} + +.cata-toast-success .cata-toast-icon { + color: rgb(22, 163, 74); +} + +.dark .cata-toast-success .cata-toast-icon { + color: rgb(34, 197, 94); +} + +.cata-toast-error { + border-color: rgba(220, 38, 38, 0.5) !important; +} + +.dark .cata-toast-error { + border-color: rgb(239, 68, 68) !important; + box-shadow: 0 0 12px rgba(255, 0, 0, 0.25); +} + +.cata-toast-error .cata-toast-icon { + color: rgb(220, 38, 38); +} + +.dark .cata-toast-error .cata-toast-icon { + color: rgb(239, 68, 68); +} + +.cata-toast-warning { + border-color: rgba(202, 138, 4, 0.5) !important; +} + +.dark .cata-toast-warning { + border-color: rgb(234, 179, 8) !important; + box-shadow: 0 0 12px rgba(255, 255, 0, 0.25); +} + +.cata-toast-warning .cata-toast-icon { + color: rgb(202, 138, 4); +} + +.dark .cata-toast-warning .cata-toast-icon { + color: rgb(234, 179, 8); +} + +.cata-toast-info { + border-color: rgba(37, 99, 235, 0.5) !important; +} + +.dark .cata-toast-info { + border-color: rgb(59, 130, 246) !important; + box-shadow: 0 0 12px rgba(70, 130, 180, 0.25); +} + +.cata-toast-info .cata-toast-icon { + color: rgb(37, 99, 235); +} + +.dark .cata-toast-info .cata-toast-icon { + color: rgb(59, 130, 246); +} + +.cata-toast-neutral { + border-color: rgba(107, 114, 128, 0.5) !important; +} + +.dark .cata-toast-neutral { + border-color: rgb(107, 114, 128) !important; + box-shadow: 0 0 12px rgba(128, 128, 128, 0.2); +} + +.cata-toast-neutral .cata-toast-icon { + color: rgb(75, 85, 99); +} + +.dark .cata-toast-neutral .cata-toast-icon { + color: rgb(156, 163, 175); +}