Nommage

Les noms de jetons doivent décrire le rôle d’une valeur, pas sa décoration actuelle. Préférez des noms qui peuvent survivre à une refonte visuelle.

Règles#

• Utilisez des noms sémantiques lorsqu’une valeur exprime un rôle : color.accent est préférable à color.orange.
• Utilisez des noms d’échelle lorsqu’une valeur appartient à un système ordonné : space.s-m et step.2 décrivent une position dans une échelle.
• Évitez les jetons ponctuels sauf s’ils représentent une décision réutilisable qui apparaîtra dans plus d’un composant ou d’une mise en page.
• Allez du général au précis : la catégorie d’abord, puis le rôle ou la position dans l’échelle.
• Préservez les noms CSS générés lorsque l’activation briserait autrement les composants existants.

Convention actuelle#

Les jetons sources utilisent des chemins avec points dans tokens/core.tokens.json : color.accent, font.serif, space.s-m. Style Dictionary transforme ces chemins en propriétés personnalisées CSS comme --color-accent, --font-serif et --space-s-m.

Les pas typographiques négatifs deviennent volontairement des noms CSS à double trait d’union : step.-1 génère --step--1, ce qui correspond aux variables CSS manuelles déjà utilisées par le site.

À éviter#

Ne nommez pas un jeton selon une seule page, une expérimentation de composant ou une couleur littérale, sauf si la valeur littérale est la décision. Si une valeur peut changer pendant que son rôle reste stable, nommez le rôle.