readableColor not returning the correct accessible value
dgattoni opened this issue · 3 comments
polishedversion: 4.0.4JSS-in_CSSlibrary and version: styled-components 5.2.1- Any relevant JS library and version: React 17.0.0
Mixin/Helper/Shorthand Usage
readableColor("purple", "pink", "navy", true);What You Are Seeing
The Problem
on readableColor unit tests, the it block on line 13 "should return custom light background when passed dark color" is being tested passing a dark colour as the 2nd argument and light color as the 3rd argument, however, the function input signature expects a light colour as the 2nd param and dark colour as the 3rd parameter.
What You Expected To See
As specified on the documentation:
Returns black or white (or optional light and dark return colors) for best contrast depending on the luminosity of the given color.
So, following the current function input signature, if I pass the following values:
// purple as my given color
// pink as my optional light color, 2nd arg
// navy as my optional dark color, 3rd arg
readableColor("purple", "pink", "navy", true);I expect the returning value to be my optional light color "pink", as it has no contrast issues with "purple", (the "given color") but instead, I got "white" as the defaultLightReturnColor.
Reproduction
@dgattoni This is working as intended, albeit with slightly confusing parameter names. lightReturnColor is the color you want to be returned for light backgrounds and vice versa for dark. We can update to be more explicit (lightComparisonReturnColor possibly). The way to reason about it is we can't guarantee you are actually passing a light color so we are naming it after the comparison color vs the color you are passing. You are seeing white correctly because of strict mode kicking it when you place pink on a light background in your example.
Docs and signature updated in v4.0.5.