feat: add customizable primary lightness support (#470)
Some checks are pending
Deploy Hugo site to Pages / build (push) Waiting to run
Deploy Hugo site to Pages / deploy (push) Blocked by required conditions

* Add support for setting lightness for primary color

* Add comment

* change multiplier to just adding percentages

* amend comment

* add to docs

* Fix lightness overflow
This commit is contained in:
Attila Greguss
2024-10-14 23:11:37 +01:00
committed by GitHub
parent 2565f372d1
commit 37089d237a
4 changed files with 56 additions and 43 deletions

View File

@ -3,10 +3,18 @@ const colors = require('tailwindcss/colors')
const makePrimaryColor =
l =>
({ opacityValue }) => {
return (
`hsl(var(--primary-hue) var(--primary-saturation) ${l}%` +
(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} */