Architecture
Librairie de design tokens agnostique de tout framework, au format DTCG
($value / $type / $description). Ce repo ne contient
que les tokens — pas de composants UI.
1Primitivesle catalogue#9500ee
.danger.hover
→
2Brandle projet choisitprimary → violet
→
3Sémantiquele contrat de rôlerole.danger.main
→
4Composantl'usagebutton.outlined.danger.hover
Les deux couches du milieu portent tout le système.
Brand rend un projet rebrandable en éditant une ligne.
Sémantique impose un contrat uniforme : les 6 rôles exposent les mêmes 9 slots,
mappés sur les mêmes crans — c'est ce qui rend
<Button color="danger">
aussi lisible que <Button color="primary">, sans le vérifier à la main.
Les 3 règles de layering
- Un token de composant référence un rôle sémantique, jamais une couche plus basse.
- Un rôle sémantique de couleur référence la couche brand, jamais un primitive.
- Un token brand référence un primitive, jamais une valeur brute.
Elles sont mécaniquement vérifiables : un grep suffit à prouver qu'aucun
composant ne pointe sur une palette.
La chaîne de résolution
C'est la chose à comprendre. Un token de composant ne connaît ni les palettes ni les hex : il ne connaît qu'un rôle. Chaque cran descend d'une couche.
-
component
color.button.filled.primary.default.background -
semantic
color.role.primary.main -
brand
color.brand.primary.600 -
primitive
color.violet.600#9500ee
Ce que le build produit
| Fichier | Contenu |
|---|---|
dist/tokens.css | Custom properties : :root + [data-theme="dark"] + media query mobile. Les blocs de surcharge ne réémettent que les tokens qui changent réellement. |
dist/tokens.json | Le dictionnaire à plat, valeurs résolues, pour inspection. |
docs/ | Cette documentation — générée depuis les tokens, stylée avec les tokens. |