search

Home  >  Q&A  >  body text

How to use the same color variable in both Storybook palette and component?

<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>
P粉670107661P粉670107661486 days ago672

reply all(1)I'll reply

  • P粉076987386

    P粉0769873862023-08-30 10:05:40

    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.

    reply
    0
  • Cancelreply