Theming doesn't support latest color notation format

[Th3S4mur41]

Using the CSS Color Module 4 notation format for HSL in some fields (not all?!) a custom theme like the following example leads to errors

export default create({
	base: 'dark',

	colorPrimary: 'hsl(205.2 100% 51%)',
	colorSecondary: 'hsl(205.2 100% 51%)',

	// UI
	appBg: 'hsl(0 0% 5.9%)',
	appContentBg: 'hsl(0 0% 5.9%)',
	appBorderColor: 'grey',
	appBorderRadius: 4,

	// Text colors
	textColor: 'hsl(0 0% 100%)',
	textInverseColor: 'hsl(0 0% 100%)',

});

[josh-degraw]

Currently running into this issue as well. Looks like source of the issue is that polished doesn't know how to parse that syntax correctly (see this issue). I have a minimal repro with storybook here. Would love to have this fixed, whether by polished or by storybook.

[josh-degraw]

Updating to add that this has been fixed in polished v4.2.1

[bhough]

v4.2.2 is the better fix, we introduced some edge case regressions in 4.2.1 that have since been addressed.

[shilman]

Son of a gun!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.60 containing PR #17913 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.