Historial de cambios — Design System de Goyo

0.1.0

Inicial 21 · Abr · 2026

Primer release público del design system

Consolida cuatro iteraciones de diseño (Foundations, Overlays, Forms, App Shell) más la capa de composites conversacionales y el portal público con playground de theming. Multi-marca en runtime desde el primer release — los mismos componentes se recoloran cambiando tokens CSS en :root, sin rebuild.

Agregado · Foundations

5 primitivos base: Button (5 variantes, 4 tamaños, estado loading), Input (label, helper text, prefix/suffix, estados de error), Card (Header/Body/Footer, 4 variantes, modo interactivo), Badge (3 variantes × 5 intents, dot/count/removable) y Tooltip (portal, flip a 4 lados, delay configurable). PR #69
Sistema de tokens canónico: color (primary + surface tokenizables por marca; ink + neutrales warm en OKLCH hue 60°; semánticos success/warning/danger/info), tipografía modular (ratio 1.125), spacing base 4px (--space-1 a --space-24), radii (sm/md/lg/xl/full derivados de --radius), sombras, motion y z-index.
Fuentes self-hosted vía Fontsource: Instrument Sans Variable (display) y JetBrains Mono Variable (cifras tabulares). Sin llamadas a fonts.googleapis.com desde el producto.
Scaffold packages/ui y apps/ui: package TypeScript + React 19, vitrina Astro pública, tests con Vitest. PR #42 · PR #48
ThemeProvider + schemas Zod: wrapper con override por [data-app="<slug>"] para preparar multi-app theming. Tipado compatible con JSONB per-tenant (la inyección real del dato llega en fases posteriores). PR #45

Agregado · Overlays

5 primitivos sobre Radix Portal: Dialog (modal con focus trap, cierre con Esc, variante danger para acciones irreversibles), Toast (Provider + hook useToast, auto-dismiss, top-right por default), Dropdown (menú portaled con keyboard nav, typeahead y submenu), Popover (non-modal, render prop, trapFocus opt-in) y refuerzo de Tooltip. PR #74

Agregado · Forms

3 primitivos de formulario: Select (searchable con typeahead, listbox portaled con flip, bottom sheet en móvil para catálogos grandes), Checkbox (tri-state con indeterminate, hit target WCAG 2.5.5 ≥32px, aria-checked="mixed") y RadioGroup (patrón WAI-ARIA APG con roving tabindex, flechas navegan y seleccionan, Home/End). PR #88

Agregado · App Shell

10 primitivos del shell flotante: Breadcrumb, EmptyState (4 intents), IconPill y IconPillBtn, ScrollTabs (overflow horizontal con fade indicators), Sidebar (icon rail 52px con hover-expand a 200px como overlay, no reflowa el main), BottomTabBar (móvil con FAB central), PageHeader (slots composables en el content, no en el shell), FloatingPanel (chrome compartido), Spotlight (command palette ⌘K), NotifPanel, HelpPanel y AIFabDesktop. PR #103
Liquid tokens: surface-translucent, variantes de chrome, hairline, blur (sm/md/lg), shadow-floating (sm/md/lg/xl), overlay-dim, dimensiones del rail y easing-liquid (cubic-bezier(0.16, 1, 0.3, 1)). Dark mode con overrides explícitos — sin auto-inversión, para mantener scrims en negro puro cuando --color-ink se invierte.

Agregado · Composites y navegación

6 composites conversacionales + modelo de navegación: AppDialog (chrome compartido para los dialogs de producto), SearchDialog (⌘K con grid 3×2 de quick actions), HelpDialog (⌘/ con shortcuts + search), NotificationsDialog (filtros por tipo + search), GoyoAIPanel (popover en desktop / full-sheet en mobile) y AppShell (wrapper slot-based responsive). PR #103
NAV_MODEL con 8 módulos top-level: Inicio, Ventas, Compras, Finanzas, Contabilidad, RRHH, Nómina y Configuración. Helpers findModule, findSubmodule y defaultRouteFor con fallbacks. El modelo acepta overrides custom para multi-tenant.

Agregado · Portal ui.goyo.mx

Tres páginas: landing narrativa (/) con playground de theming light/dark y selector de marca (Goyo, Retail, Panadera, SuperMX, Custom) que recolorea todos los primitivos en runtime; catálogo (/catalogo) con inventario de primitivos; changelog (/changelog, esta página). PR #103
Shell compartido: nav sticky con brand picker (4 presets + color custom), toggle light/dark persistido en localStorage, footer con 4 columnas. Layout base (Base.astro) unificado entre las tres páginas.
Infraestructura de deploy: módulo Terraform static-site (S3 + CloudFront + ACM) y workflow deploy-ui.yml con OIDC a AWS — sin llaves long-lived. PR #92

Decisiones técnicas

Multi-marca en runtime vía CSS custom properties. Cambiar --color-primary y --color-surface en :root recolorea todos los primitivos sin rebuild. Los derivados (-tint, -hover, -deep) se calculan con color-mix(in oklch, …), sin hardcodear.
Controlled-first en primitivos con estado complejo (Select, Spotlight, NotifPanel, HelpPanel, GoyoAIPanel, dialogs): el DS es el renderer, el consumidor maneja data y state. Coherente con el patrón de Radix y shadcn.
Prohibido number de JavaScript para montos. Toda aritmética de dinero usa dinero.js sobre columnas Postgres NUMERIC(18,6) con sufijo _amount. Los primitivos fiscales (CurrencyInput, AmountDisplay) llegan en la siguiente versión.
Versión del paquete: @goyo/ui pasa de 0.0.0 (scaffold) a 0.1.0 (primer release consumible).

En progreso

Lo que viene

Trabajo en curso, sin fechas comprometidas. Cada ítem entrará al changelog cuando haya release asociado.

↑ En progreso

En curso
Adopción de tokens en apps/www. La landing de marketing migra de paletas locales a los tokens oficiales del DS.
En diseño
Extensión móvil del DS. Equivalentes React Native de los primitivos y ThemeProvider para móvil, con tokens compartidos desde un único source of truth en TypeScript.
Planeado
Visual regression con Playwright. Screenshots automáticos por primitivo y tema (light/dark × 4 marcas) como gate de PR.
Planeado
Catálogo poblado con ejemplos vivos del inventario publicado en 0.1.0 — cada primitivo con demo interactivo, props table y snippet copiable.