Design Tokens

Les design tokens sont des propriétés personnalisées CSS nommées (valeurs de couleur, tailles, tout ce qu'une feuille de style peut consommer) stockées dans la base de données et transformées en déclarations :root sur chaque page construite. Changez la valeur du token dans l'admin, reconstruisez, et chaque règle de feuille de style qui référence cette variable se met à jour sur tout le site. Pas d'édition de template, pas de code.

Cette page explique l'écran Design Tokens, comment les tokens atteignent les pages construites, et comment bien nommer les choses.

L'écran Design Tokens

Sous Design Tokens dans la sidebar (Administrators et utilisateurs dont les permitted content types incluent les design tokens) :

• La liste montre chaque token trié par son Group optionnel puis par nom, chaque ligne portant le nom, la valeur courante, le label de groupe et la date de dernière mise à jour.
• + New Token démarre une entrée neuve.

Créer ou éditer un token

Trois champs :

• Name: l'identifiant de la variable CSS sans les tirets de tête. Il doit commencer par une lettre et ne contenir que des lettres, chiffres, tirets et underscores (les règles CSS rejettent tout autre chose, y compris un tiret de tête). Exemple : accent-color.
• Value: exactement ce que la variable CSS doit être : une couleur (#FAF7F2), un espacement (1.25rem), ou même une référence à une autre variable.
• Group: un label organisationnel optionnel (colors, affiché comme placeholder) ; il trie la liste, mais il est purement organisationnel et n'a aucun effet sur le CSS construit.

Règles appliquées par le formulaire :

• Les noms doivent commencer par une lettre.
• Les noms sont uniques sur tout le site: deux tokens avec le même identifiant est une erreur ; éditez plutôt l'existant.
• Les valeurs existantes restent exactement telles quelles tant que vous ne les changez pas (le formulaire pré-remplit).

Ce que devient un token sur le site construit

Au moment du build, chaque token est transformé en propriété personnalisée CSS. Un token nommé accent-color avec la valeur #AA2266 devient :

:root {
  --accent-color: #AA2266;
}

et apparaît dans le <head> de chaque page construite (un seul block style est ajouté seulement quand au moins un token existe). La feuille de style de votre thème, ou celle du thème intégré, la référence comme var(--accent-color) partout où ces valeurs sont utilisées.

Cela signifie :

• Recolorer un theme sans toucher ses templates : créez des tokens matchant les noms de variables que sa feuille de style utilise déjà ; vous changez les valeurs de propriétés personnalisées sous-jacentes au design, pas les règles du design.
• La sortie est pleinement expansée : les valeurs sont des chaînes CSS complètes, aucune validation, aucune coercition de type ; un token utilisé comme couleur ne se comporte comme couleur que là où la feuille de style attend une couleur.
• Noms et valeurs sont tous deux HTML-échappés dans la feuille de style émise, donc il n'y a pas de voie d'injection.

Changer un token

Éditez la valeur du token et enregistrez, mais le site ne se reconstruit pas tout seul : les tokens ne sont pas liés aux rebuilds automatiques. Déclenchez un build (dashboard ou programmé) et la passe suivante écrit la nouvelle valeur dans chaque page. Les endpoints de preview partagent la même requête de tokens : les previews reflètent les valeurs mises à jour même quand le site vivant n'a pas encore été reconstruit.

Supprimer un token

La suppression est immédiate : pas de phase corbeille, pas de restauration. Au prochain build la propriété personnalisée cesse simplement d'être émise. Les règles de feuille de style qui la référençaient retombent sur leurs propres défauts, puisque la variable n'existe plus aux endroits où elle était utilisée. Si le but était un changement de couleur, il est généralement mieux de mettre à jour la valeur du token existant que de supprimer et recréer.

La distinction et ce qu'il ne faut pas confondre

• Noms de tokens → noms de variables CSS: sans le tiret de tête au point de définition ; le builder ajoute le préfixe CSS --.
• Les labels de groupe sont pour vous, pas pour la feuille de style : ils aident à trier la liste, et ne changent pas le CSS.
• Les tokens ne peuvent pas faire de l'ombre aux types de site. Vous ne pouvez pas faire qu'un token qui n'est pas une couleur ou une longueur se comporte comme telle ; les tokens sont des paires nom → valeur, rien de plus que des références CSS.

La version courte

Posez un nom (une variable CSS, sans les tirets) et une valeur dans l'écran Design Tokens ; le build écrit un block :root avec tous les tokens sur chaque page, et les feuilles de style du thème répondent aux références de variables comme couleurs, espacements, ou n'importe quoi d'autre sans révision de template.