Que sont les design tokens ?
Un design token est une valeur nommée, comme la couleur de la marque ou l’espacement standard, définie une fois et utilisée partout au lieu de répéter la valeur brute.
Les tokens en CSS#
Sur le web, les tokens sont des propriétés personnalisées CSS, généralement définies sur :root :
--color-accent: #2b59ff;définit un tokencolor: var(--color-accent);l’utilise
Modifiez la définition et tous les endroits qui l’utilisent suivent. Une couleur qui apparaît dans quarante règles devient une seule ligne à modifier.
Deux niveaux : ce qu’est une valeur, et à quoi elle sert#
Les bons systèmes de tokens ont deux couches. Les tokens primitifs nomment la palette brute (--blue-600). Les tokens sémantiques nomment un rôle et pointent vers un primitif (--color-accent: var(--blue-600)). Les pages et les composants n’utilisent que les tokens sémantiques : un mode sombre n’est alors qu’un second jeu de valeurs sémantiques, et une refonte ne modifie qu’une poignée de lignes.
Les tokens dans Weblooks#
Le panneau Variables du mode Design de l’éditeur liste vos tokens, les regroupe et montre où chacun est utilisé. L’analyse de contraste lit les couleurs écrites sous forme de tokens, en mode clair comme en mode sombre : un site à base de tokens est donc vérifié correctement. Les modèles de départ incluent un jeu de tokens à deux niveaux et un mode sombre.