unable to lighten a color > 100%
The ui-toolkit's lighten
function imposes a limit of 100% for lightening colors, but the underlying Color.lighten
function from the color
package allows > 100% lightening. Color.lighten
uses a simple multiplicative approach, whereby a factor is applied to the color's value. So for example #333333
lightened by 100% would be #666666
, or lightened by 300% would be #CCCCCC
. The most ui-toolkit lets you lighten it to is #666666
.
The normalizePercent
function treats any num
> 100 as a straightforward factor, rather than a percentage, making it impossible to specify a factor > 1.0 and <= 100. Pass 101
as the number and it is interpreted as 10100%. I recommend removing the upper bound check on num
so that e.g. 101
is treated as 101%.
For some purposes, lighten
may not be ideal anyway. E.g., to turn a supplied branding color into a background-color, you may want to lighten it to ensure there is sufficient contrast against the text; but without knowing what color you are lightening you won't know whether the result will be light (perhaps even clipping to white) or dark. Black is not changed at all by lighten
! I find the following more useful:
function lightenTowardWhite(color, ratio) {
const lightness = color.lightness();
return color.lightness(lightness + (100 - lightness) * ratio);
}
Not sure of the best naming, but this ensures that e.g. lightening by 50% will give a color at least as light as mid-gray, but not clipped to white. This is really a separate issue, but I mention it here as related.