define theme with css variables

[herzaso]

Summary

I have a theme file in which I defined colors using hex and rgb but I now moved to defining the colors using CSS variables (in the form of rgb(var(--text-primary)) where --text-primary: 51 51 51) and I get the following error:
Uncaught Error: Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation..

Am I doing it wrong? Is it not supported?

Additional information

No response

Create a reproduction

No response

[ShaunEvening]

Hey @herzaso 👋

Can you provide more context on where this error is thrown? If you can create a quick reproduction through https://storybook.new I can see what's happening

[herzaso]

Sure, here is the reproduction - https://stackblitz.com/edit/github-zrpecs?file=.storybook%2FYourTheme.ts
The only change there is the addition of the theme file from here.

If you switch the colorSecondary from the hex value to the CSS variable you'll see the following error in your console:

Uncaught Error: Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.


    at parseToRgb (chunk-IQUMAILS.js:188:8129)
    at transparentize (chunk-IQUMAILS.js:188:13420)
    at chunk-IQUMAILS.js:188:12566
    at chunk-IQUMAILS.js:190:4281
    at chunk-IQUMAILS.js:190:4413
    at handleInterpolation (chunk-AMRE34KO.js:294:3191)
    at serializeStyles (chunk-AMRE34KO.js:299:1657)
    at chunk-AMRE34KO.js:304:1379
    at chunk-AMRE34KO.js:299:2937
    at renderWithHooks (chunk-AMRE34KO.js:92:907)
    ```

[ShaunEvening]

Awesome! Thank you so much for taking the time to put that together for me.

Ah! Now I see what you mean.

We're currently using polished to parse and validate colors from the given object. Unfortunately polished has a separate function to support css variables or a default which means it would mean a change in the logic of our theming package.

The good news though is that we're actively looking to move the manager theme customization over to purely use css variables which would sidestep this whole problem. However, this won't happen until Storybook 8, which we've just started working on.

Let me take a quick peek at our open issues that we could link this thread to. If not I'll convert this into an issue for us to add to our backlog.

[panzacoder]

@ShaunEvening Did this wind up landing in Storybook 8? I'm using css-variables to define my theme in a SB8 project now and am hitting the same error.

Oddly, I am able to specify a variable for the appContentBg variable, but not the textColor or several others.

[clukhei]

@ShaunEvening I am in need of the support for css variable for theme customisation too in storybook 8. Any updates on the status ?

[sipkoepp]

Same here ...