Issue with Managing Theme Switching

[senigius]

I am currently using the storybook-design-token package version 3.0.0 in my project. I am trying to handle theme switching using the @etchteam/storybook-addon-css-variables-theme@2.0.6 package. I have two CSS variable files: default-light.css and default-dark.css. Currently, both files are being pulled in using the DESIGNTOKENGLOB variable, but I would like to only load one file based on the selected theme.

I have not tried other versions of storybook-design-token, so I am unsure if reverting to an earlier version would solve this issue. In previous versions, there was a mechanism with the 'files':

const tokenContext = require.context(
  '!!raw-loader!../src',
  true,
  /.\.(css|less|scss|svg)$/
);

const tokenFiles = tokenContext.keys().map(function (filename) {
  return { filename: filename, content: tokenContext(filename).default };
});

export const parameters = {
  designToken: {
    defaultTab: 'Colors',
    files: tokenFiles
  }
};

I would appreciate any guidance or suggestions on how to handle this situation in version 3.0.0. Thank you for your help.

[senigius]

Screen.Recording.2024-02-19.at.15.33.18-1.mov

[JamesIves]

I'm also experiencing odd behavior when used in conjunction with this addon. I think an ideal state for me would be anytime a theme is switched, the list of tokens are updated and reflected with what is currently loaded as opposed to building a list of both.

I filed a separate issue in #207 which may be caused by a similar thing as the storybook-design-token addon doesn't seem to update values after they are initially set, which seems to be what is happening here too.