Jetons sémantiques et jetons primitifs
Un jeton sémantique est un jeton de design nommé d'après son rôle plutôt que d'après la valeur qu'il contient, comme --color-text-danger plutôt que --color-red-600. Il référence généralement un jeton primitif, ce qui permet de changer la valeur sous-jacente sans renommer ce qui l'utilise.
Les deux couches
La plupart des systèmes de jetons matures comportent au moins deux niveaux.
Les jetons primitifs (aussi appelés bruts, globaux ou de base) portent les valeurs réelles. Ils sont nommés de façon descriptive :
--red-600: #DC2626;
--blue-500: #2563EB;
--space-4: 16px;Les jetons sémantiques portent les décisions sur l'endroit où ces valeurs servent. Ils sont nommés par rôle :
--color-text-danger: var(--red-600);
--color-action-primary: var(--blue-500);
--space-card-padding: var(--space-4);Les composants référencent la couche sémantique. Presque rien ne devrait référencer un primitif directement.
Pourquoi l'indirection vaut son coût
Changer de marque cesse d'être une réécriture. Changez ce que vise --color-action-primary et tous les boutons suivent. Si les composants référençaient --blue-500, il faudrait éditer chaque composant, et ceux qui utilisaient du bleu pour une raison sans rapport avec les actions casseraient.
Les thèmes deviennent possibles. Le mode sombre, ce sont les mêmes noms sémantiques pointant vers d'autres primitifs. Sans couche sémantique, il n'y a rien à réorienter.
Le code dit ce qu'il veut dire. --color-text-danger explique à qui lit pourquoi cette valeur est là. --red-600 ne dit rien, ce qui pèse surtout quand quelqu'un doit décider s'il est prudent de la modifier.
L'erreur habituelle
Les équipes sautent la couche sémantique parce qu'au premier jour elle ressemble à de la bureaucratie : il y a onze couleurs et tout le monde se souvient de leur usage.
Le coût apparaît au premier changement de marque, au premier mode sombre ou à la première passe d'accessibilité — et à ce moment-là les primitifs sont référencés à des centaines d'endroits. Rétrofitter une couche sémantique est un travail mécanique mais fastidieux que personne ne planifie.
Un troisième niveau
Les grands systèmes ajoutent des jetons au niveau du composant : --button-primary-background pointant vers --color-action-primary pointant vers --blue-500.
C'est utile quand un composant doit réellement diverger, et cela coûte de l'indirection quand ce n'est pas le cas. Deux niveaux est le bon réglage par défaut ; ajoutez le troisième quand un cas réel se présente, pas par anticipation.
Ce que Flash DSM apporte ici
Les systèmes générés arrivent avec les deux niveaux déjà en place : des échelles primitives, et des rôles sémantiques pour le texte, le fond, la bordure et les états qui les référencent, en clair comme en sombre.