Proceso

Changelog

Registro de cambios al sistema de diseño — orden cronológico inverso, lo más reciente primero.

Anota acá cualquier cambio que afecte la experiencia del equipo: nuevos tokens, fundamentos, componentes documentados, decisiones cromáticas o tipográficas, breaking changes. No hace falta documentar fixes menores ni ajustes de copy.

2026-04-28

  • Pivot a estrategia shadcn — el design system deja de mantener primitives bespoke y pasa a publicar un theme.css único que cualquier consumer importa. Cada proyecto instala shadcn localmente vía npx shadcn add <nombre> y los componentes heredan la marca automáticamente. Borrado el Button bespoke y todas las páginas de Componentes — Producto / Admin que estaban en plan.
  • public/theme.css publicado — un solo archivo con tokens de marca + mapeo shadcn (light + dark) + bridge @theme inline. Mientras se configura design.seimseim.com, los consumers importan vía GitHub raw URL.
  • Página de Componentes — shadcn — registro vivo: índice con instrucciones de import, mapeo de variables, y página dedicada por componente estático (alert, badge, button, checkbox, input, label, spinner, switch, table, tabs, textarea). Cada página muestra Variantes + Familias de marca + estados específicos del componente, todo con previews HTML reales que aplican theme.css.
  • Escala de radios alineada a shadcn — --radius-md baja de 8 a 6 px, --radius-lg de 16 a 8 px, --radius-xl de 24 a 12 px. La escala (--radius-sm se mantiene en 4 px) ahora coincide con los componentes shadcn out-of-the-box.
  • --destructive desambiguado — mapeado a aji-700 (rojo oscuro) en lugar de aji-500 para distinguir botones destructive de primary.
  • Página 404 migrada a HTML plano — los CTAs ya no dependen del Button bespoke; usan anchors con tokens de marca + ring de foco mantel.
  • Nuevos componentes Phosphor en uso — ph-info, ph-warning-octagon, ph-clock-counter-clockwise, ph-check-circle, ph-fire, ph-arrow-right, ph-shopping-cart, etc. en los previews del catálogo shadcn.

2026-04-27

  • Fundamentos completos — agregadas las páginas de Espaciado, Iconografía y Sombras y radios. Con esto cierra la fase de fundamentos (6 páginas: Logos, Colores, Tipografía, Espaciado, Iconografía, Sombras).
  • Iconografía oficial: Phosphor + set custom — adoptado Phosphor Icons (MIT) como librería para UI funcional. Se documenta cómo y cuándo usar regular, bold, fill y duotone. En paralelo, set custom propio para íconos de marca (tigre, chile, mano-tagine, sombrilla, olla-vapor, limonaria) marcados como próximo.
  • Espaciado: escala extendida a 14 pasos — añadidos 0.5 (medio paso, 2 px) más 5, 10, 20, 24 y 32 a la escala base de 4 px. Tokens nuevos: --spacing-ds-0_5, -5, -10, -20, -24, -32.
  • Tipografía Inter para el DS site — el chrome del propio sitio de docs ahora usa Inter Variable para mejorar legibilidad en títulos y subtítulos. Las fuentes de marca (Rainier, PicNic, Ostia Antica, Pend Oreille) se mantienen documentadas y siguen siendo las del producto.
  • Headers con kicker numerado — los H2 del cuerpo de doc llevan el contador 01, 02… y los H3 un sub-contador 01.1, 01.2… que se actualiza solo via CSS counters.
  • 404 personalizada — cualquier ruta inexistente devuelve una página dentro del shell del DS, con CTA al inicio y a fundamentos.
  • Ring de “color base” en <ColorTokens /> — cada familia destaca su tono base con un outline tinta-900 de 3 px y outline-offset de 2 px.
  • Layout estabilizado — el <aside> de la TOC siempre reserva su ancho (220 px) aunque la página no tenga H2s, evitando que la home y otras páginas con poca jerarquía se “corran” hacia la derecha.

2026-04-24

  • Bootstrap del design-system — proyecto Astro independiente bajo design-system/, deploy planificado a design.seimseim.com detrás de Cloudflare Access.
  • Sistema de color v2 — 10 familias (tinta, piedra, aji, toldo, asiento, tai, tigre, sol, mantel, veranera) × 9 tonos cada una. Aliases semánticos: --ss-color-brand, --ss-color-bg-base, --ss-color-text-primary, etc. Los tokens viejos (--color-seim-cream/red/dark) coexisten temporalmente.
  • Sistema tipográfico v2 — 5 roles (display, heading, lead, subtitle, body) sobre 4 familias (Rainier, PicNic, Ostia Antica, Pend Oreille). Escala de 18 pasos desde caption (12 px) hasta display-2xl (88 px).
  • Componentes de presentación — TokenSwatch, ColorTokens, FontTokens, SpacingTokens, ShadowTokens, IconGrid, Callout, CopyButton, PropsTable, ComponentPreview.
  • Layout editorial — DocPage con sidebar, TOC sticky con scrollspy, tipografía estilo magazine (counters numerados, separadores, generous whitespace).
  • Primer fundamento — Logos — 28 variantes SVG documentadas con orientaciones, tagline y paleta cromática.