Leçon 1 : Design Tokens — des valeurs codées en dur à un système de tokens
Chaque écran peut choisir seul une couleur, un espacement et une police qui « ont l'air bien » — mais après des dizaines d'écrans, ces petites différences s'accumulent : un bleu légèrement différent ici, un espacement légèrement différent là, jusqu'à ce que tout le produit paraisse incohérent. Puis
Un token, c'est comme une fiche recette pour une couleur en laboratoire : tu écris une fois « violet de marque = ce mélange », et ensuite tout le monde qui a besoin de la couleur consulte la fiche au lieu de redeviner le mélange.
- design token
- Une décision de design nommée — une couleur, un espacement ou un rayon — stockée à un seul endroit et référencée partout, au lieu d'une valeur codée en dur répétée à la main.
- Tailwind theme
- L'objet `theme` dans `tailwind.config.ts` où tu définis les tokens du projet — Tailwind en génère les classes utilitaires.
- semantic color
- Un token nommé selon son rôle plutôt que sa teinte — `brand` ou `danger` plutôt que `purple-500` — pour que changer la teinte n'oblige jamais à renommer quoi que ce soit dans le code.
- arbitrary value
- Une syntaxe Tailwind comme `bg-[#6c5ce7]` qui contourne le theme et injecte une valeur codée en dur directement dans une classe — le raccourci qui te ramène tout droit au problème que les tokens résolvent.
