Tokens y distribución

Todo el lenguaje visual vive en un solo archivo: theme/tokens.ts. De ahí se generan los artefactos que consumen la app, otros proyectos y los LLMs. Nunca se editan a mano los archivos generados.

Artefactos generados

Archivo	Para qué	Consumidor
/tokens.json	Tokens en crudo (color, radios, tipografía, sombras)	Herramientas, LLMs, scripts
/tokens.css	Variables CSS --lg-* (claro y oscuro)	Cualquier proyecto web
theme/generated-tokens.css	Variables + override del tema HeroUI	Esta guía en runtime
/llms.txt · /llms-full.txt	Documentación legible por máquinas	Agentes / LLMs

Cómo usarlo hoy (Fase 1)

En cualquier proyecto de Legalty, importa las variables y úsalas directamente:

@import "https://<host>/tokens.css";

.boton-primario {
  background: var(--lg-accent-solid);
  border-radius: var(--lg-radius-md);
  font-family: var(--lg-font-sans);
}

Hacia dónde va (Fase 2)

Los tokens y el tema HeroUI se extraerán a paquetes versionados —@legalty/tokens y @legalty/theme— que las apps instalarán vía npm. La estructura actual (todo derivado de theme/tokens.ts) hace esa extracción mecánica, sin reescribir nada.

Grupos de tokens

• Color — neutros, acento de marca y semánticos, en claro y oscuro.
• Radios — escala rounded expresivo (--lg-radius-xs … --lg-radius-pill).
• Espaciado — base 4px (--lg-sp-1 … --lg-sp-16).
• Tipografía — familias display / sans / mono y escala.
• Sombras — --lg-shadow-sm|md|lg.