storybook: CSS Custom Properties (var(--foo)) in theme secondary colour causes fatal error

Describe the bug Using CSS variables in theme breaks storybook.

To Reproduce Use this theme:

import { create } from '@storybook/theming';

export default create({
  base: 'light',

  colorSecondary: 'var(--my-var, red)',

})

Expected behavior I expect the styles to be applied.

Code snippets

The above error occurred in the <Context.Consumer> component:
    in Styled(a) (created by Link)
    in Link (created by KnobPanel)
    in div (created by Context.Consumer)
    in Styled(div) (created by Placeholder)
    in div (created by Context.Consumer)
    in Styled(div) (created by Placeholder)
    in Placeholder (created by KnobPanel)
    in KnobPanel
    in div (created by Context.Consumer)
    in Styled(div)
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown
    in Unknown
    in Unknown (created by Context.Consumer)
    in _default (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Panel)
    in Panel (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in Main (created by Layout)
    in Layout (created by Context.Consumer)
    in WithTheme(Layout)
    in Unknown
    in Unknown (created by ResizeDetector)
    in ChildWrapper (created by ResizeDetector)
    in ResizeDetector
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown (created by Manager)
    in ThemeProvider (created by Manager)
    in Manager (created by Context.Consumer)
    in Location (created by QueryLocation)
    in QueryLocation (created by Root)
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root

React will try to recreate this component tree from scratch using the error boundary you provided, LocationProvider. vendors~main.5bfe49427a0ecbcae866.bundle.js:155228:5
The above error occurred in the <LocationProvider> component:
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries. vendors~main.5bfe49427a0ecbcae866.bundle.js:155228:5
Error: Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.

vendors~main.5bfe49427a0ecbcae866.bundle.js:19244:14
Error: Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.

System:

• OS: MacOS
• Device: Macbook Pro 2018
• Browser: Firefox, Chrome
• Framework: Web Components
• Addons: theming
• Version: 5.1.0-alpha.7

Additional context You can try this yourself just by setting the secondary color prop in react dev tools under ThemeProvider