Component tokens
Couche haute d'un système de tokens 3 niveaux : scope composant-spécifique. Exemples : `button-primary-bg-default`, `button-primary-bg-hover`, `card-padding-md`. Référencent les semantic tokens (jamais les primitives directement) et incarnent l'API visuelle d'un composant donné. Spec DTCG + cours Subatomic (Brad & Ian Frost) en font la couche supérieure canonique.
Forces
- Encapsule les variants composant, le DS contrôle entièrement l'expression visuelle
- Permet de re-skinner un composant sans toucher la couche semantic
- Spec DTCG : exemple type via `$type: 'color'` + `$value: '{color.action.primary}'`
Limites
- Explosion combinatoire si mal cadré, `button-primary-bg-default-hover-disabled` etc.
- Surcoût de maintenance pour DS petit, règle empirique : ne pas en créer avant 30 composants
Pour qui
- DS avec >100 composants ou multi-marques nécessitant des variants composant
- Équipes qui doivent re-skinner régulièrement (saisons, partenariats, sub-brands)