Changelog · Design System

Historial de cambios

Registro de releases del design system de Goyo — primitivos React, tokens CSS, Layout y portal público. Formato basado en Keep a Changelog 1.1. Semver se aplica a partir de 1.0.0; en pre-1.0 (estado actual: 0.x) pueden existir cambios breaking sin bump de major — se documentan en la entrada correspondiente.

Próximo
En progreso

Lo que viene

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

↑ En progreso
  • Planeado
    Extensión móvil · primitivos RN restantes. Dropdown, Popover, Tooltip y Radio en React Native — el resto del set web ya tiene equivalente móvil.
  • Planeado
    Catálogo con demos interactivos. Controles en vivo por componente (mini playground) — derivado del schema del primitivo.
0.2.0
Minor 22 · Abr · 2026

Feedback, primitivos adicionales y portal alineado

10 primitivos nuevos: la categoría Feedback (Alert, Progress, Skeleton), 3 de formulario (Label, Textarea, Switch) y 4 de layout (Separator, Avatar, Tabs, Collapsible). El portal pasa a consumir tokens y fuentes del propio sistema — sin duplicar valores ni cargar fuentes desde CDNs externos.

Agregado · Feedback (nuevo)
  • 3 primitivos de feedback: Alert (banner inline persistente — distinto de Toast transitorio — con 4 variantes e icon default por variante, onDismiss opcional), Progress (barra determinada con role="progressbar" + ARIA values, 4 variantes semánticas, 2 tamaños) y Skeleton (placeholder con animación shimmer, text/rectangle/circle, count para listas, respeta prefers-reduced-motion).
Agregado · Forms
  • 3 primitivos adicionales: Label (standalone con required visible + SR), Textarea (multi-línea con contador visible y tintes de aviso al acercarse al maxLength) y Switch (toggle on/off con role="switch").
Agregado · Layout
  • 4 primitivos adicionales: Separator (divisor horizontal o vertical, decorativo o semántico), Avatar (imagen circular con fallback a iniciales o icono genérico, 3 tamaños, onError recovery), Tabs (segmented con paneles asociados, patrón WAI-ARIA APG tablist + arrow nav + Home/End) y Collapsible (disclosure widget con aria-expanded/aria-controls, controlled o uncontrolled).
Cambiado · Portal
  • El portal ahora consume el DS directamente. Los tokens @goyo/ui/tokens.css se importan en vez de redeclararse — el portal ya no duplica fonts, primary, ink, neutrals, surface, semánticos, spacing, radii, shadows ni motion. Sigue habiendo algunos tokens locales del portal (como el fondo del playground o el ancho máximo del grid) declarados explícitamente en el shell.
  • Fuentes self-hosted via Fontsource. Instrument Sans + JetBrains Mono + Inter + Instrument Serif viajan ahora desde el mismo dominio que la app — sin llamadas a fonts.googleapis.com o fonts.gstatic.com. Tokens nuevos --font-body y --font-serif expuestos en el sistema.
  • Índice del catálogo en móvil pasó de ser una barra horizontal sticky a un índice colapsable al inicio de la página — sin colisiones con la barra de navegación y con todos los primitivos enumerados por sección.
  • Smoke tests. Las 3 páginas responden 200, el catálogo expone al menos 17 anclas de componente y el portal no carga fuentes desde CDNs externos. Cubren el hueco de "se rompió una página sin que nadie lo notara".
Corregido
  • Overlays con fondo apenas distinto del fondo de página. Dialog, Toast, Dropdown y Popover ahora usan --color-surface-2 (blanco puro) en light mode en vez de una mezcla ~99% cream — la elevación visual ahora es clara.
  • Checkbox no mostraba el check mark por un weight de icono faltante. Resuelto.
  • Scroll a componentes desde el índice en móvil quedaba tapado por la nav sticky — ahora el anchor respeta la altura real de la nav.
Decisiones técnicas
  • Versión: 0.2.0 — minor bump por primitivos nuevos aditivos. Sin breaking changes respecto a 0.1.0.
0.1.0
Inicial 21 · Abr · 2026

Primer release del design system

17 primitivos reusables en 4 categorías — Foundations, Overlays, Forms y Layout — más 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
  • 4 primitivos base: Button (4 variantes, 4 tamaños, estados loading/disabled/iconOnly), Input (label, helper text, prefix/suffix, leadingIcon, estados de error), Card (Header/Body/Footer, variantes default/muted/elevated, modo interactivo) y Badge (5 intents — success/warning/danger/info/neutral — con 3 variantes soft/outline/solid y modos dot/count).
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), Dropdown (menú portaled con keyboard nav, typeahead y submenu), Popover (non-modal, render prop, trapFocus opt-in) y Tooltip (portal, flip a 4 lados, delay configurable).
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 soportadas).
Agregado · Layout
  • 5 primitivos reusables del chrome: IconPill (toolbar translúcido agrupado), ScrollTabs (segmented control con overflow horizontal y fades en los bordes), Breadcrumb (navegación jerárquica minimal), EmptyState (4 intents — estructural, filtrado, onboarding y error) y PageHeader (encabezado de ruta con slots para título, meta pill, actions y tabs).
Agregado · Portal
  • Tres páginas: landing con playground de theming light/dark y selector de marca (4 presets + color custom) que recolorea todos los primitivos en runtime; catálogo con inventario por categoría; changelog (esta página).
  • Shell compartido: nav sticky con brand picker, toggle light/dark persistido en localStorage, footer con 4 columnas. Layout base unificado entre las tres páginas.
Agregado · Sistema de tokens
  • Color: primary y surface tokenizables por marca; ink y neutrales warm en OKLCH; semánticos success/warning/danger/info.
  • Tipografía modular (ratio 1.125), spacing base 4px (--space-1 a --space-24), radii derivados de --radius (sm/md/lg/xl/full), sombras, motion y z-index.
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, Dropdown, Popover, Dialog): el sistema es el renderer, el consumidor maneja data y state. Coherente con el patrón de Radix y shadcn.
  • Versión: 0.1.0 — primer release.