search

UX-and-I / storybook-design-token

Display design token documentation generated from your stylesheets and icon files. Preview design token changes in the browser. Add your design tokens to your Storybook Docs pages using the custom Doc Blocks.
https://dev.to/psqrrl/managing-design-tokens-using-storybook-5975
MIT License
647 stars 123 forks source link

Tokens reset once the tab is re-selected #208

Open JamesIves opened 8 months ago

JamesIves commented 8 months ago

I have setup the following that appears within a tab named Scale.

  /**
  * @tokens Scale
  * @presenter Spacing
  */
  --density-modifier: 1;
  --font-default-scale: 1;
  --font-accent-scale: 1;

If I modify these values, the changes are correctly reflected in Storybook. If I select a different tab, make changes, and then re-select the Scale tab the values are reset back to their default settings.

Is there a way to preserve the values across the different tabs until the Design Tokens tab is closed? I was under the impression that this is what options: {preserveCSSVars: true} does but it doesn't seem to do the trick.