Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Theme colors broken when viewing in Storybook, from 0.5.x up #1793

jorisw opened this issue Jun 2, 2021 · 3 comments

Theme colors broken when viewing in Storybook, from 0.5.x up #1793

jorisw opened this issue Jun 2, 2021 · 3 comments


Copy link

jorisw commented Jun 2, 2021

Describe the bug
When using Storybook, for some reason the colors in my theme.ts are not translated from blues.1000 for example to color: var(--theme-ui-colors-blues-1000, #12193F);.

If I use the same component in my Next/React app directly, the problem goes away.

If I downgrade ThemeUI all the way to 0.4.0-rc.14, the problem also goes away and it works in both Next/React and Storybook. I've tried ThemeUI version 0.9.1, and kept downgrading the minor version until I hit 0.4.0-rc.14, in which it worked.

To Reproduce
Steps to reproduce the behavior:

  1. Use a color value like 'blues.1000' to give fill or border to a React component with SxStyleProps / ThemeUIStyleObject, corresponding to some blues.1000 defined color in your theme.ts
  2. Use the component in Storybook.js (using version 6.2.9, the problem was also present with 6.0.21)
  3. Notice that the color is not translated, and the CSS literally lists blues.1000 for the color when inspected in the browser
  4. Downgrade ThemeUI to anything below 0.5.0
  5. Restart Storybook
  6. Notice the color translation works again.

Expected behavior
Would expect any version of ThemeUI to do correct color (or any token) resolving from its theme file, when loaded in Storybook.

Copy link

hasparus commented Jun 3, 2021

Both Theme UI and Storybook use Emotion, but they use different versions of it. (11 and 10, respectively). The problem occurs because since 0.5, Theme UI uses new Emotion, while Storybook still uses the old one. You can work around it by as described in #1530 (comment).

Copy link

I had the same issue but solved it by passing all variant to sx props instead of using variant props of component.

Copy link

Our switch to having Emotion as a peer dependency should resolve the majority of cases of this! Please flag if you're still running into this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet

No branches or pull requests

4 participants