Types de jetons
Les couches de jetons décrivent la distance entre une valeur et une primitive de design brute ou une décision d’interface précise.
Chaque entrée source utilise les champs DTCG $value et $type. Les champs de gouvernance du site kind et visibility s’y ajoutent : kind décrit la couche et visibility détermine si le jeton fait partie de l’API publique de rédaction.
Couches actuelles#
| Couche | Rôle | État actuel |
|---|---|---|
| Primitive | Valeurs réutilisables brutes avec peu de contexte | Existe pour les valeurs de palette, les polices, l’échelle typographique, l’espacement et la mise en page |
| Échelle | Valeurs ordonnées qui établissent le rythme ou la hiérarchie | Existe pour les pas typographiques et l’espacement |
| Sémantique | Valeurs nommées selon leur rôle plutôt que leur apparence | Active; les couleurs d’interface se résolvent vers les primitives nommées color.palette.* |
| Composant | Valeurs propres à un composant ou à un élément | Pas encore créé |
Les jetons primitifs et les jetons d’échelle gardent les fondations cohérentes. Les jetons sémantiques facilitent la création de thèmes, parce que le nom décrit le rôle plutôt que la valeur littérale. Les jetons de composant devraient apparaître seulement lorsqu’un composant possède un contrat de style réutilisable qui ne peut pas être exprimé par un jeton de fondation ou un jeton sémantique existant.
Résolution actuelle des alias#
Les jetons nommés color.palette.* possèdent les littéraux de couleur. Les jetons sémantiques comme color.ink, color.accent et color.neutral.500 les référencent avec la syntaxe Style Dictionary : "{color.palette.near-black}" ou "{color.palette.neutral.500}".
outputReferences: true préserve cette relation dans le CSS généré : --color-ink se résout par --color-palette-near-black sans répéter son littéral. Les cartes de couleur générées résolvent les références avant de calculer le contraste, afin que leurs valeurs WCAG restent fiables.
Les littéraux de palette utilisent visibility: internal : les alias générés peuvent en dépendre, mais les auteurs utilisent le jeton sémantique dans CSS et Tailwind. Le tableau de référence par catégorie montre seulement les jetons publics et affiche la valeur résolue de chaque alias pour vérification.
Couches futures#
Un thème devrait devenir une collection de valeurs de jetons seulement lorsque le site a vraiment besoin de plus d’un mode visuel ou d’une expression de marque. N’ajoutez pas une nouvelle couche de jetons parce qu’un autre système de design l’a fait; ajoutez-la lorsque le site actuel a une décision répétable qui a besoin de cette couche.