ADR-06 · Un sistema de tokens compartido

Estado: aceptada · Impacto: alto

Contexto

Dos aplicaciones —React web y React Native— tienen que verse como el mismo producto. Sin un mecanismo, divergen en semanas.

Decisión

Un paquete de tokens en tres niveles que compila a artefactos para las dos plataformas. Ver Los tres niveles.

Por qué no una guía de estilos

Una guía de estilos es un documento que se desactualiza. Un sistema de tokens es código que se compila: si alguien cambia el verde de marca, la web y la app cambian en el mismo commit, y no pueden desincronizarse porque ninguna de las dos tiene el color escrito.

El truco que hace posible la paridad

Los colores se emiten como canales RGB sueltos (--crm-primary: 21 125 77) y el preset los envuelve en rgb(var(--crm-primary) / <alpha-value>). Eso hace que bg-primary, bg-primary/40 o text-fg-muted existan y signifiquen lo mismo en Tailwind y en NativeWind, con soporte de tema oscuro por la misma clase .dark.

Prueba de que funciona

Al construir la app móvil se verificó la paridad midiendo el estilo calculado de cada badge y comparándolo con tokens.json. Coinciden exactamente en claro y en oscuro.

Y una prueba indirecta más convincente: cuando lucide 1.x retiró los iconos de marca y Facebook dejó de existir, bastó cambiarlo en el token para que las dos plataformas sustituyeran igual. Sin el sistema, cada una habría elegido un icono distinto.

Relacionado: Los tres niveles · Paridad entre web y móvil