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

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

[realwitt]

Ran into this as well.
Tailwindcss v4 using native css variables makes the reality of pulling all colors from one central spot agonizingly close too. I couldn't use the OKLCH definitions of my color variables either, I had to convert them to hex. ☹️