fix(color): correct LCH hue range and HSLA alpha formatting - #3955
fix(color): correct LCH hue range and HSLA alpha formatting#3955pouyashahrdami wants to merge 1 commit into
Conversation
✅ Deploy Preview for fakerjs ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
The LCH hue component was generated with max 230 (sharing the chroma bound) instead of 360, cutting off ~36% of the hue circle. The HSLA CSS output passed the alpha value through toPercentage(), producing e.g. 75 instead of 0.75.
618f5ed to
2be752d
Compare
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## next #3955 +/- ##
==========================================
- Coverage 98.91% 98.85% -0.07%
==========================================
Files 923 923
Lines 3223 3221 -2
Branches 567 585 +18
==========================================
- Hits 3188 3184 -4
- Misses 31 33 +2
Partials 4 4
🚀 New features to boost your workflow:
|
ST-DDT
added
c: bug
There was a problem hiding this comment.
Pull request overview
This pull request fixes two correctness issues in the color module’s formatting and value generation: it expands LCH hue generation to cover the full 0–360° range, and corrects HSLA CSS alpha output to remain a 0–1 value (rather than being incorrectly scaled to 0–100).
Changes:
- Fix HSLA CSS formatting by outputting alpha as-is instead of converting it to a percentage.
- Fix
lch()generation to cap chroma at 230 while allowing hue up to 360 (instead of incorrectly capping both at 230). - Update LCH tests and seeded snapshots to reflect the corrected hue range.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
src/modules/color/module.ts |
Corrects HSLA CSS alpha formatting and fixes LCH hue generation bounds. |
test/modules/color.spec.ts |
Updates LCH decimal-format assertions to validate per-component bounds (including hue ≤ 360). |
test/modules/__snapshots__/color.spec.ts.snap |
Refreshes seeded LCH snapshots to reflect newly reachable hue values. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| 0.37454, | ||
| 218.7, | ||
| 168.4, | ||
| 263.5, |
There was a problem hiding this comment.
I wonder why hsla doesnt show up as changed.
There was a problem hiding this comment.
Please add test for hsla format.
|
This fixes two unrelated bugs in two unrelated methods. For ease of review+changelog, please only fix related bugs within the same PR. |
Summary
LCH hue capped at 230 instead of 360: The
lch()method used a loop to generate both chroma and hue withmax: 230. Chroma's upper bound of 230 is correct (as documented), but hue is an angle in degrees and should range 0–360. This meant ~36% of the hue circle (blues, purples, magentas above 230°) could never be generated.HSLA CSS alpha scaled incorrectly: The
toCSS()helper passed the HSLA alpha value throughtoPercentage(), which multiplies by 100. An alpha of0.75was output as75instead of0.75in the CSS string. The JSDoc example shows the correct format (hsl(0deg 100% 50% / 0.5)) but the code producedhsl(0deg 100% 50% / 50). Compare with RGBA (line 127) which correctly passes alpha through as-is.Test plan