drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-07-07 05:47:20 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add support for setting lightness for primary color

Browse Source
This commit is contained in:
Attila Greguss
2024-10-10 10:53:07 +01:00
parent 94624bcac6
commit 875ccc58c2
3 changed files with 50 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
tailwind.config.js
View File

@ -3,8 +3,15 @@ const colors = require('tailwindcss/colors')
const makePrimaryColor =
l =>
({ opacityValue }) => {
// the `l` we get is the lightness value we want adjust. 0% is black, 100% is white, 50% is the midpoint
// So we need to convert it to a percentage that is relative to 50% lightness
// e.g if we get 45 that means we want to make the color 5% darker
// if we get 55 that means we want to make the color 5% lighter
// etc.
let finalLightness = Math.round((1 + ((l - 50) / 100)) * 1000) / 1000;
return (
`hsl(var(--primary-hue) var(--primary-saturation) ${l}%` +
`hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) * ${finalLightness})` +
(opacityValue ? ` / ${opacityValue})` : ')')
)
}