Design tokens

Les design tokens centralisent les propriétés de design (couleurs, polices, etc.) sous forme de variables réutilisables, pour une cohérence visuelle et technique dans tous les projets du DSA.

Développeurs

Les design tokens provenant de Figma sont disponibles en CSS via le fichier dsa-theme du package @ds-autonomie/assets (voir la Mise en place).

 

Les noms des designs tokens sont adaptés lors de la création des variables CSS associées :

  • utilisation de kebab-case
  • ajout d’un préfixe dsa-{type}-

Par exemple :

  • le design token Figma pour la couleur Callout/Background/Default est disponible via la variable CSS --dsa-color-callout-background-default
  • le design token Figma pour le style de texte 3x large/bold est disponible via la variable CSS --dsa-font-3x-large-bold

/