style-dictionary icon indicating copy to clipboard operation
style-dictionary copied to clipboard

BUG: color/hsl transform do not output lightness with decimals

Open Fjellman opened this issue 3 years ago • 2 comments

The output of color/hsl transform of hex values #f00000 and #ee0000 is the same: hsl(0, 100%, 47%).

The correct value for #f00000 is hsl(0,100%,47.1%) and the correct value for #ee0000 is hsl(0,100%,46.7%).

We came across this bug when trying to fix a WCAG color contrast fail of the first color, #f00000, with a new darker color, #ee0000. This should have fixed it, but we discovered that it still failed due to the bug described above.

This means we cannot use hsl.

Fjellman avatar May 09 '22 13:05 Fjellman

Thank you for bringing up this issue! We are using the tinycolor2 package for color transformations and for the 'color/hsl' transform we are calling the .toHslString() method. The fix would need to come at that package. Digging into it a bit more, that package hasn't been updated in 2 years so we might want to change our that dependency for something newer. It looks like the chromajs package does have support for decimals in their HSL transformer: https://gka.github.io/chroma.js/#color-css

As a quick workaround, you could create a custom transform using chromajs

dbanksdesign avatar May 10 '22 21:05 dbanksdesign

Thank you, we'll definitely look into that 👍

Fjellman avatar May 11 '22 04:05 Fjellman