Tokens et variables de style
Les tokens sont des valeurs réutilisables qui définissent les fondations visuelles de votre application (couleurs, tailles, espacements, polices, etc.). Ils garantissent la cohérence des styles et permettent de modifier l'apparence globale sans avoir à éditer chaque composant individuellement.
Par exemple, si vous modifiez le token primary-color, toutes les zones qui l'utilisent seront mises à jour instantanément.
Utiliser un token de design
- Passez la souris sur la valeur que vous souhaitez modifier.
- Cliquez sur l'icône pour activer le mode de sélection de token.
- Sélectionnez le token de design que vous souhaitez utiliser.
Note: Les tokens remplacent les valeurs en dur et servent de base à la personnalisation globale du style.
Variables de style
Les variables de style permettent de rendre vos composants dynamiques : une couleur, une taille ou une propriété peut changer en fonction de l'état ou des données de votre application.
Contrairement aux tokens, qui sont statiques et globaux, les variables sont contextuelles et réactives. Elles servent à adapter visuellement les composants selon la logique de votre application (ex. : si loggedIn = true, alors couleur = success-color).
Utiliser une variable de style
- Passez la souris sur la valeur que vous souhaitez lier à une variable.
- Cliquez sur l'icône pour passer en mode de sélection de variable.
- Sélectionnez la variable que vous souhaitez utiliser.
Note : Seules les variables compatibles avec le type de propriété apparaîtront dans la liste. Par exemple, une variable numérique ne sera disponible que pour une propriété de type nombre.