chromatic

Chromatic est un outil de gestion de systèmes de design qui génère des fichiers spécifiques à chaque plateforme à partir d'un fichier source décrivant des design tokens. Le README le décrit comme un système de build pour les systèmes de design multiplateformes utilisant des design tokens. Les fichiers de tokens peuvent contenir des expressions riches dans une syntaxe naturelle. Les exemples incluent des opérations arithmétiques telles que 18pt + 5px, des unités comme 12px, des fonctions telles que rgb(), mix(), et saturate(), ainsi que des références à d'autres tokens. Un token nommé primary-hue peut être défini à 210deg, primary peut être défini comme hsl({primary-hue}, 100%, 40%), et primary-dark peut référencer primary avec une transformation darken. Cela permet aux définitions de tokens de rester compactes tout en exprimant les relations entre les valeurs. Chromatic supporte les thèmes. Chaque token peut avoir une variante de thème, comme dark et light, ou des mises en page compact et cozy. Les artefacts de sortie nécessaires sont générés automatiquement. Par exemple, un token cta-button-background peut définir des valeurs distinctes pour les thèmes dark et light. Le support des thèmes est également illustré par les imports : un fichier de thème dark peut être importé dans un fichier de tokens de base afin que la sortie générée contienne à la fois les valeurs par défaut et les valeurs thématiques. L'outil vise à être zero-conf. Un simple fichier de tokens écrit en YAML ou JSON suffit pour commencer. Chromatic est également personnalisable si nécessaire : les utilisateurs peuvent écrire ou modifier le format des fichiers de sortie pour répondre à leurs besoins. Il est en outre disponible sous forme d'API pouvant être invoquée depuis un système de build. Chromatic est multiplateforme. À partir d'un seul fichier de tokens, il peut générer des artefacts spécifiques aux plateformes : Sass et CSS pour le web, formats JSON et plist pour iOS, et XML pour Android. Il peut également générer un guide de style sous forme de fichier HTML. Les instructions de démarrage dans le README couvrent l'installation globale du package avec npm install -g @arnog/chromatic, la création d'un répertoire d'exemple avec chromatic example ./test, et l'exécution de chromatic ./test -o tokens.scss ou chromatic ./test -o tokens.html. Les utilisateurs peuvent également écrire leur propre fichier de tokens. Un fichier tokens.yaml avec des valeurs background et body-color peut être converti avec chromatic tokens.yaml -o tokens.scss, produisant des variables Sass avec des flags par défaut. Un fichier de thème dark peut définir theme: dark et des tokens tels que background et body-color, puis être importé dans le fichier de tokens principal. La sortie CSS générée inclut des propriétés personnalisées au niveau root et un sélecteur de thème dark avec des propriétés personnalisées data-theme='dark'.