How to use the same color variable in both Storybook palette and component?
P粉670107661
2023-08-29 21:24:33
<p>I created a UI component library and used Storybook to provide documentation and examples for it. </p>
<p>My goal is to declare a color palette in the SCSS file and use it in the component and storybook palette. </p>
<p>Storybook Palette is a built-in storybook component that can create documentation for your color palette. </p>
<p>So, I expect that if the colors of the design system change, I can just change the SCSS variable value and both the color palette and the component will be updated with the new color value. </p>
<p>Unfortunately, the storybook documentation is poor in this section, and the examples only contain hardcoded colors. The color palette page is an MDX file, so I don't know how to import and use SCSS variables there. </p>
<p>Is there a way to achieve my goal? </p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Came across this tonight while looking up the same issue I had. After some googling I also found this: https://dev.to/benrobertson/color-swatches-in-storybook-4aa9. I haven't tried it yet but wanted to share it with you if you want to give it a try. I plan to test it out over the weekend.