fix(IssueLabelToken): Fix lightness-switch formula for label text contrast#7747
fix(IssueLabelToken): Fix lightness-switch formula for label text contrast#7747
Conversation
…trast Apply the same fix from github/github-ui#13332: change the --lightness-switch formula from multiplication-based `(perceived-lightness - threshold) * -1000` to division-based `1/(threshold - perceived-lightness)` which properly produces a binary 0 or 1 switch value for selecting black vs white text on colored labels. Agent-Logs-Url: https://github.com/primer/react/sessions/59e25e14-ec03-4d41-9fde-aa14b3bccb18 Co-authored-by: jonrohan <54012+jonrohan@users.noreply.github.com>
🦋 Changeset detectedLatest commit: 8d5836d The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
There was a problem hiding this comment.
Pull request overview
This PR updates the CSS logic used by IssueLabelToken to compute a binary light/dark text switch based on perceived lightness, fixing incorrect contrast selection for some label colors in light theme.
Changes:
- Replace the multiplication-based
--lightness-switchformula with a division-based formula that clamps cleanly to 0/1. - Add a patch changeset for
@primer/reactdocumenting the fix.
Show a summary per file
| File | Description |
|---|---|
| packages/react/src/Token/IssueLabelToken.module.css | Updates --lightness-switch calculation to reliably clamp to a binary value for text color selection. |
| .changeset/fix-issue-label-token-contrast.md | Adds a patch changeset entry describing the contrast fix for IssueLabelToken. |
Copilot's findings
- Files reviewed: 2/2 changed files
- Comments generated: 0
Ports the
--lightness-switchformula fix from github/github-ui#13332 toIssueLabelToken.The multiplication-based formula
(perceived-lightness - threshold) * -1000does not reliably produce a binary 0/1 switch for all color inputs — certain label colors near the threshold get intermediate values, causing incorrect text contrast in light theme. The division-based formula1 / (threshold - perceived-lightness)produces ±infinity, whichmax(0, min(..., 1))correctly clamps to a clean 0 or 1.Changelog
New
N/A
Changed
IssueLabelToken: Updated--lightness-switchCSS formula to use division-based approach for correct black/white text selection on colored labelsRemoved
N/A
Rollout strategy
Testing & Reviewing
Compare
IssueLabelTokenrendering with light-colored fill values (e.g.#e8e356,#bfd4f2) in light theme — text should be dark. This is a pure CSS change with no API surface change.Merge checklist