Fix lightness overflow

This commit is contained in:
Attila Greguss
2024-10-10 12:26:17 +01:00
parent 680f108a1f
commit d68bfc006e
2 changed files with 50 additions and 44 deletions

View File

@ -3,12 +3,18 @@ const colors = require('tailwindcss/colors')
const makePrimaryColor =
l =>
({ opacityValue }) => {
// we convert the passed in lightness value to be relative to 50% (full saturation)
let finalLightness = (l - 50);
return (
`hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) ${finalLightness > 0 ? "+" : "-"} ${Math.abs(finalLightness)}%)` +
(opacityValue ? ` / ${opacityValue})` : ')')
)
let result = "hsl(var(--primary-hue) var(--primary-saturation) ";
if (l <= 50) {
// Interpolate between lower values
result+= `calc(calc(var(--primary-lightness) / 50) * ${l})`;
}
else {
// Interpolate between higher values
result+= `calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * ${l - 50})`;
}
result += (opacityValue ? ` / ${opacityValue})` : ')');
return result;
}
/** @type {import('tailwindcss').Config} */