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

[jorisw]

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.

[hasparus]

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).

[lorenzoalfieri]

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

[lachlanjc]

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.