Chaîne
La chaîne de jetons est active pour les variables CSS de fondation. Elle prouve que les jetons se génèrent depuis la source et que la feuille de style de production consomme la sortie générée.
Source et sortie#
| Élément | Chemin ou commande | Rôle |
|---|---|---|
| Jetons sources | tokens/core.tokens.json | Source DTCG révisée à la main, avec $value et $type |
| Configuration de génération | style-dictionary.config.mjs | Configuration Style Dictionary et transformation de nom personnalisée |
| CSS généré | assets/css/generated/tokens.css | Propriétés personnalisées générées, regroupées avant le CSS du site |
| Collections de thèmes | tokens/themes/{light,dark}.tokens.json | Remplacements de couleurs sémantiques ciblés par sélecteur |
| CSS de thèmes généré | assets/css/generated/themes.css | Sortie des collections claire et sombre |
| Données générées | data/brand/tokens.yml | Données Hugo générées pour les tableaux de référence des jetons |
| Pont Tailwind généré | tailwind.tokens.cjs | Valeurs du thème Tailwind générées depuis les jetons |
| Exports de diagrammes | tokens/exports/diagram.json, static/tokens/diagram.json | Valeurs résolues pour les diagrammes du dépôt et publiés |
| Commande de génération | npm run tokens:build | Régénère le CSS des jetons |
| Commande de données | npm run tokens:data | Régénère les données Hugo des jetons |
| Commande Tailwind | npm run tokens:tailwind | Régénère le pont de thème Tailwind |
| Commande de thèmes | npm run tokens:themes | Régénère le CSS des collections de thèmes ciblées par sélecteur |
| Commande de diagrammes | npm run tokens:diagrams | Régénère les exports des jetons de diagrammes |
| Commande de test | npm run tokens:test | Valide la résolution des alias et le contraste des couleurs |
| Commande de mise à jour | npm run tokens:update | Régénère et vérifie toute la sortie générée des jetons |
| Commande de vérification | npm run tokens:check | Vérifie la sortie générée et les références CSS |
Hugo regroupe le CSS généré avant la feuille de style traitée du site, donc assets/css/site.css peut consommer des variables comme --color-accent, --font-serif et --space-s-m sans posséder leurs valeurs. outputReferences: true garde visible la chaîne d’alias de couleur active dans le CSS généré : les variables sémantiques d’interface se résolvent par leurs primitives --color-palette-*. La documentation rend les tableaux de catégories depuis data/brand/tokens.yml, qui est généré depuis les mêmes métadonnées de jetons.
Utilisez Architecture des jetons pour la limite de la source, la sélection des thèmes, le modèle des consommateurs et la routine complète de changement.
Règles de génération#
npm run tokens:builddoit se terminer sans avertissement.npm run tokens:updatedoit régénérer le CSS principal, les données, les valeurs Tailwind, le CSS des thèmes et les exports de diagrammes avant qu’un changement de jetons soit validé.npm run tokens:checkdoit passer sans modifier le worktree.- La sortie générée devrait être validée seulement lorsqu’elle est déterministe.
- Les changements aux jetons sources et à la sortie générée devraient arriver dans le même commit.
visibility: internals’applique aux primitives d’implémentation d’appoint. Elles restent disponibles pour les alias CSS générés, mais ne paraissent pas dans le tableau public des jetons ni dans le pont Tailwind.- Le CSS ne devrait pas référencer un jeton généré absent de la sortie.
- Le CSS du site ne doit pas contenir de littéral de couleur hexadécimal brut. Ajoutez plutôt un jeton sémantique, puis consommez sa variable CSS générée.
- Le CSS du site ne doit pas utiliser un utilitaire de palette Tailwind non gouverné. Les utilitaires de couleur Tailwind approuvés se résolvent par les variables générées des jetons.
- Le CSS du site ne doit pas utiliser d’utilitaire arbitraire brut de graisse, taille ou approche typographique. Ajoutez ou réutilisez plutôt un jeton typographique et son utilitaire soutenu par un jeton.
- Les avertissements sont traités comme du travail, selon la politique de dépendances et d’avertissements de l’ADR 0004.
Inspiration#
Red Hat Design System utilise les jetons comme une bibliothèque de design system, avec des consignes d’installation, des catégories générées et des notes d’utilisation pour les développeurs. C’est une inspiration utile, mais ce site garde une chaîne plus petite : jetons sources, CSS généré, données Hugo générées et pages de catégories rendues depuis ces données.