Las variables CSS

Con la exportación completada, una herramienta de traducción convierte los archivos DTCG en variables CSS. Es la primera de las dos capas del código, y la que cualquier proyecto web puede usar, con o sin Tailwind CSS. En esta lección verás qué le pasa a cada token al llegar al CSS.

En esta página

• La herramienta de traducción
• Qué le pasa a cada token
• El nombre
• Los valores
• Los alias
• Los modos
• Lo que te llevas

La herramienta de traducción

Una herramienta de traducción lee archivos DTCG y escribe código para una plataforma. El Format Module pone dos ejemplos: Style Dictionary y Terrazzo (Format Module: Translation tool).

Lo que dicen las fuentes:

• Style Dictionary declara que todavía no soporta por completo la versión 2025.10 de DTCG: es un trabajo en curso de su versión 5 (Style Dictionary: DTCG).
• Terrazzo soporta el Resolver Module de 2025.10, el que une los modos (Terrazzo: Resolvers).

Lo que comprobamos con la exportación normalizada de DesignToken101 (octubre de 2026, Style Dictionary 5.5.5 y Terrazzo 2.7.1): las dos escriben bien los colores, las unidades y los alias con var(). Las diferencias estaban en los modos y en una conversión:

• Style Dictionary no tiene el concepto de modo: hay que generar cada combinación por separado. Terrazzo genera un solo archivo con un bloque por modo, a partir del Resolver.
• La conversión de píxeles a rem de Style Dictionary ignora la unidad del valor: convirtió el breakpoint, 64rem, en 4rem.

Qué le pasa a cada token

Esta tabla resume lo que verás en el resto de la lección. Cada fila es un token real y la línea que genera en src/styles/tokens.css:

El nombre

El nombre de cada variable es --t101- más la ruta del token con guiones. Es exactamente lo que dice el code syntax Web de la variable de Figma, sin el var(): var(--t101-space-400) en Figma, --t101-space-400 en el CSS (Una sola fuente de verdad).

El nombre no se lee del code syntax: se calcula a partir de la ruta. Por eso hace falta comprobar que los dos coinciden (Comprobar y actualizar). Por qué el prefijo --t101- lo verás en la capa siguiente, donde hace falta (El tema de Tailwind CSS).

Los valores

Cada tipo DTCG se escribe con la sintaxis CSS que le corresponde:

• Color en hexadecimal. Es el mismo valor sRGB que guarda Figma, sin conversión ni redondeo (Espacio de color). La herramienta abrevia cuando puede: #33CC99 se escribe #3c9, que en CSS es el mismo color. Con opacidad, el hexadecimal lleva ocho cifras: #00000080 es el negro al 50 %.
• Tamaños en rem, con base 16: el valor en píxeles entre 16. space/400, 16 px, pasa a 1rem. Las fracciones se escriben enteras: border-width/100, 1 px, es 0.0625rem.
• Familia entre comillas: "Inter".
• Peso, interlineado, duración y curva, tal cual: 600, 1.5, 200ms, cubic-bezier(0.2, 0, 0, 1).

Un caso curioso: radius/full vale 9999 px en Figma, el número que se usa para redondear del todo. En CSS queda 624.9375rem. Es el mismo valor dividido entre 16; parece raro, pero funciona igual.

Los alias

Un token con referencia se escribe con var() a la variable del token de destino:

--t101-radius-control: var(--t101-radius-200);

La conversión a rem se aplica a los valores, no a los alias: radius/control sigue apuntando a radius/200, y es radius/200 el que vale 0.5rem. Así, en el CSS, la relación de Figma se mantiene: cambiar el primitivo cambia todos los semánticos que apuntan a él.

Los modos

Cada modo es un bloque de CSS que redefine las mismas variables, con todos los tokens de su colección. Lo viste en Los modos en código. El archivo generado tiene cuatro bloques:

Además, cada variable con $description lleva su descripción como comentario encima. Quien lee el CSS sabe para qué sirve el token, con las palabras que escribiste en Figma:

/* Fondo de tarjetas y bloques de código */
--t101-color-background-neutral-subtle: var(--t101-color-neutral-50);

import { defineConfig } from '@terrazzo/cli';
import css from '@terrazzo/plugin-css';

const REM_BASE = 16;
const variableName = (token) => `--t101-${token.id.replace(/\./g, '-')}`;
const THEME_TOKENS = ['color.background.**', 'color.text.**', 'color.border.**'];

export default defineConfig({
  tokens: ['./tokens/tokens101.resolver.json'],
  outDir: './src/styles/',
  plugins: [
    css({
      filename: 'tokens.css',
      variableName,
      legacyHex: true,
      transform: (token) =>
        token.$type === 'dimension' && !token.aliasOf && token.$value.unit === 'px'
          ? `${token.$value.value / REM_BASE}rem`
          : undefined,
      permutations: [
        {
          input: { theme: 'light', layout: 'mobile' },
          prepare: (contents) => `:root {\n  color-scheme: light;\n  ${contents}\n}`,
        },
        {
          input: { theme: 'dark', layout: 'mobile' },
          include: THEME_TOKENS,
          prepare: (contents) => `[data-theme="dark"] {\n  color-scheme: dark;\n  ${contents}\n}`,
        },
        // … el bloque de prefers-color-scheme y el de Desktop
      ],
    }),
  ],
});

Fuentes

• Design Tokens Format Module 2025.10: Translation tool
• Design Tokens Format Module 2025.10: Dimension
• Design Tokens Format Module 2025.10: JSON Pointer syntax
• Style Dictionary: DTCG
• Terrazzo: Resolvers
• Terrazzo: CSS