Format des ADR

01 août 2023

TL;DR

Utiliser les design tokens spécifiques aux composants

Contributeurs

Suxue Li, Julie Brunetto, Guillaume Moizan, Gauthier Fiorentino, Dorian De Rosa

Statut

Pending

Contexte

Dans les fichiers CSS, les variables sont utilisées directement. Lorsque nous avons plusieurs occurrences de la même variable, lors de la réfacto de cette variable, nous devons repasser sur chacune de ces occurrences dans le fichier. Cela est douloureux (Cf GAFI), et nous fait perdre du temps au moment de l'évolution de l'UI.

Il existe une méthodologie pour répondre à cette douleur : https://spectrum.adobe.com/page/design-tokens/

Décision

Application du design token par ajout du niveau 'Component-specific token', sachant que nous avions déjà en place le niveau 'Alias token'.

Conséquences

Tous les nouveaux fichiers et fichiers sur lesquels on repasse à l'occasion d'une feature/fix/tech etc. doivent utiliser le design token. Toutes les variables sont déclarées au début du fichier, il ne devrait plus y avoir d'utilisation de utilities.$color-primary par exemple. Mais plutôt :

@use "@styles/utilities";

$icon-color: utilities.$color-primary

...
  
 & .icon {
    color: $icon-color;
}

Et bien-sûr, deux couleurs qui ne sont pas prévues pour évoluer ensemble doivent avoir deux variables différentes même si la couleur est la même.

Faire attention à bien nommer les variables, pas hésiter à être précis par rapport au contexte d'utilisation.

Autres pistes explorées

• Application partielle du principe (en fonction de la complexité du cas: CSS long et beaucoup de redondances VS petit CSS) mais cela rend le CSS moins homogène.
• Ne pas ajouter de niveau, car le processus de l'ajout semble également fastidieux / douloureux.