Design System: bootstrap tokens + paleta brand El Día #13
Reference in New Issue
Block a user
Delete Branch "chore/design-system-tokens"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Summary
Bootstrap del Design System antes de empezar el trabajo de UI/UX/responsive.
index.cssreescrito:#008fbe(logo El Día) abrand-50..950--success,--warning,--destructiveneutral-950(no pure black) — menos cansancio visual@theme inline→bg-brand-500,text-brand-700, etc.--ring= brand-500 (light) / brand-400 (dark)::selectioncon brand-200/800useTheme()ya lo soporta).atl/skill-registry.md: agregada sección "Design System (frontend)" con compact rules para auto-inyección en sub-agents.Documentación completa (en Obsidian, gitignored localmente):
02-ARQUITECTURA-y-TECH-STACK/2.14 🎨 Design System.md— tabla completa de OKLCH shades, principios, patrones (forms, tables, toasts), workflow de cambios, referencias.Engram: topic_key
sig-cm2/design-systemcon TL;DR y reglas no negociables para recall rápido en futuras sesiones.Pointer en
INSTRUCCIONES_IA.md: nueva sección "Regla de Diseño Visual" obliga a leer 2.14 antes de cualquier cambio frontend.Test plan
cd src/web && npx vitest run— 136/136 verdenpm run dev): verificar contraste botones primary, hover sidebar con brand tint, focus rings, dark mode togglePróximos pasos (post-merge)
table+ TanStack Table,select,combobox,popover,tooltip,pagination,breadcrumb,alert-dialogCambios: - Nuevo hook useSidebar() con persistencia en localStorage ('sidebar-collapsed' = '1'/'0'). - SidebarNav refactorizado: - Width controlled internamente (w-60 expanded, w-[68px] collapsed) - Toggle button al pie con PanelLeftClose/Open icon - Brand mark con gradient brand+violet (consistencia con login) - Active indicator: barra vertical sutil a la izquierda cuando expanded, bg accent cuando collapsed - SectionLabel se reemplaza por divider sutil cuando collapsed - Custom SidebarTooltip puro CSS (sin radix dep nuevo) que aparece a la derecha del item con animacion fade + slide al hover. Funciona con group-hover/item y group-hover/toggle (Tailwind named groups). - Items disabled muestran badge 'Próx.' chico (era 'Próximamente' largo) y en tooltip cuando collapsed: 'Label · Próximamente'. - Fix scroll horizontal: overflow-x-hidden en nav, truncate en spans, shrink-0 en iconos y badges. Layout robusto a labels largos. - ProtectedLayout deja de hardcodear lg:w-60 — sidebar controla su width. - AppHeader Sheet (mobile) usa <SidebarNav forceExpanded /> para que en mobile siempre se vea expanded sin importar el state desktop. Tests 136/136 verde.Cambios: - Instalado @radix-ui/react-tooltip 1.2.8 (componente faltante de shadcn/ui que faltaba en el set inicial). - Nuevo src/web/src/components/ui/tooltip.tsx (shadcn pattern): TooltipProvider, Tooltip, TooltipTrigger, TooltipContent con animaciones data-state (fade + zoom + slide direccional). - App.tsx: TooltipProvider envuelve toda la app con delayDuration 150ms. - AppSidebar refactorizado: - Toggle button MOVIDO al header (top), al lado izquierdo del nombre 'SIG-CM 2.0'. Eliminado boton bottom (era redundante). - Cuando collapsed: solo el toggle visible centrado (68px width). - Cuando expanded: [Toggle] [SIG-CM 2.0] aligned left. - Quitado overflow-hidden del aside (era lo que impedia que los tooltips fueran visibles — los clipping containers padres tampoco importan ahora porque Radix portalea el tooltip a body). - Tooltips en TODOS los items collapsed (incluido el toggle) y en items disabled muestra 'Label · Próximamente'. - Eliminado el componente CSS-only SidebarTooltip (reemplazado por Radix que se renderiza fuera del DOM tree con Portal). El bug original era que tanto el aside con overflow-hidden como el ProtectedLayout con overflow-hidden clipean cualquier elemento que intente escapar via absolute positioning. Radix Portal soluciona eso renderizando el tooltip en document.body. Tests 136/136 verde.shadcn MCP server registrado globalmente (claude mcp add -s user shadcn -- npx -y shadcn@latest mcp). Disponible en cualquier sesion/proyecto. 8 componentes shadcn nuevos via CLI (cd src/web && npx shadcn@latest add ...): - table, select, popover, pagination, breadcrumb, alert-dialog - command, dialog (deps de combobox y alert-dialog) Total instalados ahora: 22 Fix gotcha shadcn CLI: agregado compilerOptions.paths al root tsconfig.json (sino crea folder literal '@/' en lugar de resolver el alias). Antes solo estaba en tsconfig.app.json que el CLI no lee. @tanstack/react-table 8.21 instalado. Nuevo componente <DataTable> generico (src/web/src/components/ui/data-table.tsx): - Wrapper sobre TanStack Table - Priority columns: meta { priority: 'high' | 'medium' | 'low' } → hidden md:table-cell / hidden lg:table-cell automatico - Tap-to-expand row mobile (chevron auto-aparece cuando hay cols hidden, click despliega panel con hidden cells como dl/dt/dd) - Loading state con DataTableSkeleton - Empty state customizable - onRowClick callback con stop-propagation correcto en chevron - 14 tests cubriendo todas las features Refactor UsersTable a DataTable como dogfood (mismo output visual, columnas con priority alta/media/baja). 150 tests frontend totales verde. Doc Obsidian 2.14 v2.4 actualizado con seccion DataTable completa, componentes ampliados a 22, MCP global, y gotcha del tsconfig. Engram sig-cm2/design-system actualizado a v2.4. Skill registry actualizado con compact rules de DataTable y MCP.