mirror of
https://github.com/imfing/hextra.git
synced 2025-07-01 11:57:24 -04:00
feat: add customizable primary lightness support (#470)
* 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:
@ -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} */
|
||||
|
Reference in New Issue
Block a user