GitLab

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.