¿Qué son los design tokens?
Un design token es un valor con nombre, como el color de la marca o el espaciado estándar, que se define una vez y se usa en todas partes en lugar de repetir el valor tal cual.
Tokens en CSS#
En la web, los tokens son propiedades personalizadas de CSS, normalmente definidas en :root:
--color-accent: #2b59ff;define un tokencolor: var(--color-accent);lo usa
Cambia la definición y todos los lugares que lo usan se actualizan. Un color que aparece en cuarenta reglas pasa a ser una sola línea que cambiar.
Dos niveles: qué es un valor y para qué sirve#
Los buenos sistemas de tokens tienen dos capas. Los tokens primitivos dan nombre a la paleta en bruto (--blue-600). Los tokens semánticos dan nombre a una función y apuntan a un primitivo (--color-accent: var(--blue-600)). Las páginas y los componentes usan solo los semánticos, así que un modo oscuro no es más que un segundo conjunto de valores semánticos, y un cambio de marca modifica unas pocas líneas.
Tokens en Weblooks#
El panel Variables del modo Diseño del editor lista tus tokens, los agrupa y muestra dónde se usa cada uno. El análisis de contraste lee los colores escritos como tokens, en modo claro y en modo oscuro, así que un sitio con tokens se comprueba correctamente. Las plantillas de inicio incluyen un conjunto de tokens de dos niveles y un modo oscuro.