baraka-tokens

Reprise depuis Tokens séparés https://github.com/arthur-loto/tokens-separes/tree/dev

Dépendances :

• Style-dictionary version
• Token-Transformer (mais peut aussi être chargé via commande npx)

Dernières nouveautés, répertoire 'sets' :

Désormais on a des fichiers séparés venant de Figma qui sont tous le répertoire 'sets' Certains fichiers comme $metadata.json ou $themes.json servent uniquement pour Figma, donc pas besoin de les manipuler

Les autres fichiers sont nécessaires pour consturire les jeux de tokens css / scss / iOS / Android

Pour que style dictionary fonctionne correctement, il faut toujours avoir le options.json dans le processus de création des fichiers json (pour n'importe quelle marque) Cette info ne sert que pour la génération des fichiers, style-dictionary étant configuré (via le build.js) pour éliminer ensuite les tokens d'options.

Mode d'emploi :

Avant d'utiliser Token Transformer et Style Dictionary, il y a un pre-script à exécuter.

node pretransform.js

Ce script vient copier l'ensemble du dossier ./sets dans ./pretransformer Puis il vient modifier toutes les valeurs sous la clé "brk-opt-size-ratio" pour y ajouter l'unité em

C'est fait comme ça parce que Figma ne supporte pas les unités em, alors on fait uniquement une multiplication du font-size pour l'affichage dans Figma. Et pour pouvoir utiliser ça correctement dans le CSS, il faut ajouter l'unité.

Commande complètes pour Token transformer

https://www.npmjs.com/package/token-transformer

npx token-transformer source destination fichiers,a,inclure fichiers,a,exclure --autres_parametres

Exemple de création de decisions-jel et decisions-lq en utilisant tous les jeux tokens disponibles et utiles spécifiquement pour ces marques avec expandTypography.

npx token-transformer pretransformer transformer-output/options.json options global --expandTypography=true

npx token-transformer pretransformer transformer-output/decisions-jel.json options,actions-jel,collections-jel,resources-jel,templates-jel global --expandTypography=true

npx token-transformer pretransformer transformer-output/decisions-lq.json options,actions-lq,collections-lq,resources-lq,templates-lq global --expandTypography=true

Au fur et à mesure que d'autres sets s'ajouteront il faudra compléter la liste.

Dans nos projets la(les) commande(s) npx token-transformer se font normalement dans le CI/CD. Mais on peut les executer localement à des fins de tests.

Création des CSS via Style Dictionary

On exécute ensuite le fichier build.js via la commande node build.js

Toute la configuration liée à Style Dictionary se trouve dans le fichier build.js