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