Feature request: Can we get HSL color parsing?

I use hsl(…) colors extensively in my theming but doing so means that they are currently not properly calculated as being “dark”.

Expected Behavior

I would expect that if I have a global.colors.text of { light: "black", dark: "white" } and a primary button background color of hsl(100, 3%, 18%), that it would have white text.

Actual Behavior

It has black text because there is currently no way for getRGBArray to parse it, so that function just returns the same value it got – the string "hsl(100, 3%, 34%)" – which is not what the colorIsDark function is expecting to deal with.

URL, screen shot, or Codepen exhibiting the issue

Codesandbox

Steps to Reproduce

Use hsl(…) based colors in your theme, particularly for button colors.

Your Environment

• Grommet version: 2.6.5
• Browser Name and version: irrelevant
• Operating System and version (desktop or mobile): irrelevant

[dallas]

Awesome! Thank you, @ericsoderberghp! 😄

[oorestisime]

@ericsoderberghp @alansouzati would love your input here as well.