search

amzn / style-dictionary

A build system for creating cross-platform styles.
https://styledictionary.com
Apache License 2.0
3.86k stars 543 forks source link

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

Open Fjellman opened 2 years ago

Fjellman commented 2 years ago

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.

dbanksdesign commented 2 years ago

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

Fjellman commented 2 years ago

Thank you, we'll definitely look into that 👍