Importing components with storybook-addon-css-variables-theme

[HiddeRpl]

Describe the bug Hi! My team decided to try out your trial version but we encountered some issue. We are using storybook with storybook-addon-css-variables-theme. We have configured everything successfully but when we import components in figma it is imported only in default theme. We have tried importing exact url like "/storybook/?path=/story/allcomponents--all-components&globals=cssVariables:WT+Theme" or make redirects at backend from "/storybook" to "/storybook/?path=/story/allcomponents--all-components&globals=cssVariables:WT+Theme/"

Is there any option to configure that in import configurations? Looking at add-on documentation "cssVariables" is a storybook global... https://github.com/etchteam/storybook-addon-css-variables-theme/blob/main/src/index.ts

Greetings!

[georges-gomes]

Hi! To deal with themes it's recommended to have storybook globals. It's described a little bit here: https://story.to.design/docs/multi-theme When you import a component, story.to.design should show you your globals and you can select which one you want. If it's not clear, book a call with me on https://calendly.com/gg_ and we have a look together. Cheers!

[HiddeRpl]

According to code of storybook-addon-css-variables there is globals:

  const selected = globals.cssVariables || theme || id;
  const setSelected = (value: string | null) => {
    updateGlobals({
      cssVariables: value,
    });
  };

During the import in figma it seems to story.to.design ignores it

[georges-gomes]

I haven't try the storybook yet but I think you need to have a globalTypes definition in preview.ts. Described here: https://storybook.js.org/docs/essentials/toolbars-and-globals

You can try the storybook https://castor.vercel.app that has a globalTypes definition and story.to.design will propose the global. (code here: https://github.com/onfido/castor/blob/main/.storybook/preview.ts)

I hope this helps

[HiddeRpl]

I managed the problem by passing proper cookie for iframe linking so i close the issue

Cheers!