Comment utiliser la même variable de couleur dans la palette et le composant Storybook ?

Question

J'ai créé une bibliothèque de composants d'interface utilisateur et utilisé Storybook pour fournir de la documentation et des exemples.

Mon objectif est de déclarer une palette de couleurs dans le fichier SCSS et de l'utiliser dans la palette de composants et de livre d'histoires.

Storybook Palette est un composant de livre d'histoires intégré qui peut créer une documentation pour votre palette de couleurs.

Donc, je m'attends à ce que si les couleurs du système de conception changent, je peux simplement modifier la valeur de la variable SCSS et la palette de couleurs et le composant seront mis à jour avec la nouvelle valeur de couleur.

Malheureusement, la documentation du livre d'histoires est médiocre dans cette section et les exemples ne contiennent que des couleurs codées en dur. La page de la palette de couleurs est un fichier MDX, donc je ne sais pas comment y importer et utiliser des variables SCSS.

Y a-t-il un moyen d’atteindre mon objectif ?

Answer 1

Je suis tombé sur cela ce soir en recherchant le même problème que moi. Après quelques recherches sur Google, j'ai aussi trouvé ceci : https://dev.to/benrobertson/color-swatches-in-storybook-4aa9. Je ne l'ai pas encore essayé mais je voulais le partager avec vous si vous souhaitez l'essayer. Je compte le tester ce week-end.