fix(staged): align badge hue slider track with OKLCH badge colors#870
Merged
Conversation
The hue slider track in repo settings was drawn with an HSL gradient, but badge colors are computed in OKLCH. HSL hue angles don't line up with OKLCH hue angles (sRGB red sits near 29 in OKLCH, blue near 264), so the color under the thumb didn't match the badge the selected hue produced, and the track's lightness/intensity didn't match either. Generate the track gradient from the same badgeFg() OKLCH values used to render badges, sampled every 15 degrees, and apply it as a theme-aware inline style so it also adapts to dark mode. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Signed-off-by: Matt Toohey <contact@matttoohey.com>
The track sampled badgeFg (L=0.45 in light mode), which looked much darker than the pale badge backgrounds it selects. Sample a dedicated mid-lightness stop instead — oklch(0.80 0.10 h) light, oklch(0.55 0.10 h) dark — sitting between badgeBg (too pale to tell hues apart) and badgeFg (too dark to read as the badge tint), and add a subtle border so the pastel track stays crisp against the panel. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Signed-off-by: Matt Toohey <contact@matttoohey.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The badge hue slider in the actions settings panel used a hardcoded HSL gradient for its track, but the badge colors themselves are computed in OKLCH. HSL and OKLCH hue angles don't line up, so the color shown under the slider thumb didn't match the badge color the selected hue actually produced.
hueSliderGradient()tobadgeColors.ts, which builds the track gradient from OKLCH stops sampled every 15° so the track matches the real badge colors0.55lightness in dark mode,0.80in light) so hues stay distinguishable — badge background stops were too pale and foreground stops too darkdarkModestore, replacing the static CSS gradient🤖 Generated with Claude Code