Skip to content

fix(IssueLabelToken): Fix lightness-switch formula for label text contrast#7747

Merged
jonrohan merged 1 commit intomainfrom
copilot/fix-token-component-issue
Apr 10, 2026
Merged

fix(IssueLabelToken): Fix lightness-switch formula for label text contrast#7747
jonrohan merged 1 commit intomainfrom
copilot/fix-token-component-issue

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Apr 10, 2026

Ports the --lightness-switch formula fix from github/github-ui#13332 to IssueLabelToken.

The multiplication-based formula (perceived-lightness - threshold) * -1000 does 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 formula 1 / (threshold - perceived-lightness) produces ±infinity, which max(0, min(..., 1)) correctly clamps to a clean 0 or 1.

/* Before */
--lightness-switch: max(0, min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000), 1));

/* After */
--lightness-switch: max(0, min(calc(1 / (var(--lightness-threshold) - var(--perceived-lightness))), 1));

Changelog

New

N/A

Changed

  • IssueLabelToken: Updated --lightness-switch CSS formula to use division-based approach for correct black/white text selection on colored labels

Removed

N/A

Rollout strategy

  • Patch release
  • Minor release
  • Major release; if selected, include a written rollout or migration plan
  • None; if selected, include a brief description as to why

Testing & Reviewing

Compare IssueLabelToken rendering 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

…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-bot
Copy link
Copy Markdown

changeset-bot bot commented Apr 10, 2026

🦋 Changeset detected

Latest commit: 8d5836d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/react Patch

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

@jonrohan jonrohan requested a review from francinelucca April 10, 2026 21:45
@jonrohan jonrohan marked this pull request as ready for review April 10, 2026 21:46
@jonrohan jonrohan requested a review from a team as a code owner April 10, 2026 21:46
Copilot AI review requested due to automatic review settings April 10, 2026 21:46
@github-actions github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Apr 10, 2026
@github-actions
Copy link
Copy Markdown
Contributor

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

To publish a canary release for integration testing, apply the Canary Release label to this PR.

@jonrohan jonrohan added the integration-tests: skipped manually Changes in this PR do not require an integration test label Apr 10, 2026
@jonrohan jonrohan enabled auto-merge April 10, 2026 21:48
Copy link
Copy Markdown
Member

@francinelucca francinelucca left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:shipit:

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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-switch formula with a division-based formula that clamps cleanly to 0/1.
  • Add a patch changeset for @primer/react documenting 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

@jonrohan jonrohan added this pull request to the merge queue Apr 10, 2026
Merged via the queue into main with commit b7dfb78 Apr 10, 2026
65 checks passed
@jonrohan jonrohan deleted the copilot/fix-token-component-issue branch April 10, 2026 22:06
@primer primer bot mentioned this pull request Apr 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm integration-tests: skipped manually Changes in this PR do not require an integration test

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants