Token primitivo

Qué es un token primitivo

Es el primer escalón de la arquitectura de tokens: un valor con nombre, sin opinión sobre dónde usarlo. blue.500, space.4, font-size.300. El nombre describe el valor, no la función.

{
  "color": {
    "blue": {
      "500": { "$value": "#2563EB", "$type": "color" }
    }
  }
}

La regla que define a un primitivo: nunca lo consume directamente un componente. Si un Button referencia blue.500, el sistema acaba de perder su capa de traducción. El primitivo existe para que el token semántico (color.action.primary) lo referencie, y sea ese alias el que llegue al componente.

Por qué la capa primitiva importa

1. Cambio de paleta sin tocar componentes. Si la marca pasa del azul al verde, cambias la referencia del semántico (color.action.primary: {color.green.500}) y nada más. Sin capa primitiva, el cambio recorre cada componente del sistema.

2. Multi-marca y theming. Cada marca o tema define su propio set de primitivos; los semánticos mantienen los mismos nombres. El componente no sabe que cambió de marca.

3. Para agentes: el primitivo es el inventario. Un agente que consulta el sistema necesita saber qué valores existen (primitivos) y cuáles puede usar para cada intención (semánticos). Mezclar las dos capas le quita al agente la posibilidad de razonar la diferencia entre “este azul existe” y “este azul se usa para acciones”.

El error más frecuente

Saltarse la capa: tokens con nombre semántico y valor directo, sin primitivo debajo. Funciona hasta el primer rebrand o el primer tema oscuro. La señal de alarma en una auditoría: buscar cuántos componentes referencian valores con nombre de color (blue, red, gray) en lugar de nombres de intención.

Ver también

• Token semántico
• Token W3C DTCG
• Style Dictionary

La arquitectura completa de capas se construye desde cero en la mini-formación de tokens W3C DTCG.