Differentiate fgColor.done from upsell in dark protanopia & deuteranopia#1402
Merged
Merged
Conversation
…eranopia theme In the dark-protanopia-deuteranopia theme, fgColor.done and fgColor.upsell both resolved to base.color.purple.4 (#AB7DF8), making 'done' state indicators visually indistinguishable from 'in progress' / upsell-styled indicators when adjacent. Under deutan/protan simulation, purple also collapses toward the same hue as fgColor.open, fgColor.success, and fgColor.attention, so no chromatic slot is perceptually safe. This change moves fgColor.done to a brighter neutral (base.color.neutral.10 / #B7BDC8) that: - Differentiates from fgColor.upsell (kept as purple via a new override) - Differentiates from fgColor.closed / fgColor.muted (neutral.9) by lightness rather than hue - Stays dimmer than default body text (neutral.12) - Passes WCAG AA contrast against dark-pd backgrounds The HC variant of this theme is unchanged in this PR; available neutral scale slots in HC are already occupied (closed, draft, body text) and need a separate scoping pass. Closes user-reported regression in github/accessibility-external#926. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
🦋 Changeset detectedLatest commit: 9761d87 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 |
Contributor
There was a problem hiding this comment.
Pull request overview
Updates the dark-protanopia-deuteranopia functional foreground tokens so completed (“done”) indicators are visually distinct from upsell/promotional purple in that specific colorblind theme.
Changes:
- Override
fgColor.doneindark-protanopia-deuteranopiatobase.color.neutral.10to avoid collisions with upsell/open/success/attention under deutan/protan simulation. - Pin
fgColor.upsellindark-protanopia-deuteranopiatobase.color.purple.4so upsell stays purple even thoughfgColor.doneno longer is. - Add a Changesets entry to publish the token change.
Show a summary per file
| File | Description |
|---|---|
| src/tokens/functional/color/fgColor.json5 | Adjusts theme-specific overrides so done becomes neutral while upsell remains purple in dark protanopia/deuteranopia. |
| .changeset/dark-pd-done-differentiation.md | Records the release note/version bump for the token behavior change. |
Copilot's findings
Tip
Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Files reviewed: 2/2 changed files
- Comments generated: 0
janmaarten-a11y
temporarily deployed
to
github-pages
GitHub Actions
Inactive
Contributor
Design Token Diff (CSS)
|
Contributor
Design Token Diff (StyleLint)
|
Contributor
Design Token Diff (Figma)
|
liuliu-dev
approved these changes
Jun 12, 2026
github-actions
Bot
removed
the
update snapshots
lukasoppermann
added a commit
that referenced
this pull request
Jun 15, 2026
The merge conflict resolution kept purple.4 from main (accessibility fix PR #1402), but this PR expands the scale from 0-9 to 0-11, shifting the step values. In the new scale purple.4 = #553098 (~27% lightness) which fails contrast on dark backgrounds. The PR's calibrated value was purple.7 = #AB7DF8 (~73% lightness) which passes 4.5:1 contrast on dark backgrounds. Structural additions from main are kept: - dark-protanopia-deuteranopia: neutral.10 for fgColor.done - fgColor.upsell dark-protanopia-deuteranopia override (updated to purple.7) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.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
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
In the
dark-protanopia-deuteranopiatheme,fgColor.doneandfgColor.upsellboth resolved tobase.color.purple.4(#AB7DF8), making "done" state indicators visually indistinguishable from "in progress" / upsell-styled indicators when adjacent. This was the regression reported in github/accessibility-external#926 and community discussion #149256.Why a neutral, not another hue
Under deutan/protan simulation (Vienot 1999),
purple.4collapses toward the same hue asfgColor.success,fgColor.open, andfgColor.attention, so no remaining chromatic slot is perceptually safe fordone. Pink collapses to gray and collides withclosed. Blue collides withsuccess/open. Yellow collides withattention. A neutral with a different lightness fromclosed/mutedis the only collision-free option.Changes
fgColor.done→base.color.neutral.10(#B7BDC8) indark-protanopia-deuteranopiafgColor.closed/fgColor.muted(neutral.9/#9198A1) — distinguishable by lightnessneutral.12)fgColor.upsellpinned tobase.color.purple.4indark-protanopia-deuteranopiafgColor.done; pinned so promotional content keeps its purple independent of thedonechangeScope notes
darktheme is intentionally unchanged. This is a colorblind-theme-only fix per the original ticket scope.closed(n10),draft(n11), and body text (n12), so a clean slot fordonedoesn't exist there without a broader rework. Flagging for a follow-up.Verification
npm run lint && npm run format && npm run test && npm run buildall passdist/css/functional/themes/dark-colorblind.cssshows the expected diff:dist/css/functional/themes/dark-colorblind-high-contrast.cssis byte-identical:--fgColor-done: #d3abffstill.Background
See github/accessibility-external#926 for the full investigation, including: why no recent dependency bump caused the user's perceived regression, why the experimental primitives package isn't the culprit, and why a token-level fix here is the right layer.