Skip to content

Conversation

lukasoppermann
Copy link
Collaborator

@lukasoppermann lukasoppermann commented Jul 7, 2025

This fixes https://github.com/github/primer/issues/4846 and https://github.com/github/primer/issues/4667

Latest changes

localhost_6006_iframe html_globals=theme_all id=color-functional-roles--all viewMode=story

Previous changes

After change

Default
CleanShot 2025-07-07 at 12 59 15@2x

Tritanopia (simulation)
CleanShot 2025-07-07 at 13 03 25@2x

Protanopia (simulation)
CleanShot 2025-07-07 at 13 03 03@2x

Deuteranopia (simulation)
CleanShot 2025-07-07 at 13 03 48@2x

Before change (current)

Default
CleanShot 2025-07-07 at 13 15 12@2x

Tritanopia (simulation)
CleanShot 2025-07-07 at 13 17 16@2x

Protanopia (simulation)
CleanShot 2025-07-07 at 13 16 57@2x

Deuteranopia (simulation)
CleanShot 2025-07-07 at 13 16 39@2x

List of notable changes:

  • updated bgColor.open.[...], borderColor.open.[...] and fgColor.open to use blue instead of red / orange in tritanopia, deuteranopia and protanopia.
  • draft token is always gray
  • in colorblind modes, the color for open is darker, to better contrast with the other colors

Next steps

  • run as feature flag internally for 2 weeks
  • if no comments or issues, run as GA feature flag for 2 weeks
  • if no comments or issues, merge and release

Copy link

changeset-bot bot commented Jul 7, 2025

🦋 Changeset detected

Latest commit: 0024a1f

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

This PR includes changesets to release 1 package
Name Type
@primer/primitives 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

Copy link
Contributor

github-actions bot commented Jul 7, 2025

Design Token Diff (CSS)

The message is too long to be displayed here. For more details, please check the job summary.

Copy link
Contributor

github-actions bot commented Jul 7, 2025

Design Token Diff (StyleLint)

The message is too long to be displayed here. For more details, please check the job summary.

Copy link
Contributor

github-actions bot commented Jul 7, 2025

Design Token Diff (Figma)

The message is too long to be displayed here. For more details, please check the job summary.

@github-actions github-actions bot temporarily deployed to Preview (Storybook) July 7, 2025 11:16 Inactive
@lukasoppermann lukasoppermann added the update snapshots Update visual regression test snapshots label Jul 7, 2025
@github-actions github-actions bot removed the update snapshots Update visual regression test snapshots label Jul 7, 2025
@primer primer bot temporarily deployed to github-pages July 7, 2025 12:20 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) July 7, 2025 12:20 Inactive
@lukasoppermann lukasoppermann marked this pull request as ready for review July 7, 2025 12:43
@Copilot Copilot AI review requested due to automatic review settings July 7, 2025 12:43
@lukasoppermann lukasoppermann requested review from a team as code owners July 7, 2025 12:43
@lukasoppermann lukasoppermann requested a review from jonrohan July 7, 2025 12:43
@lukasoppermann lukasoppermann marked this pull request as draft July 7, 2025 12:43
Copy link
Contributor

@Copilot 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 “open” token colors (foreground, border, background) for colorblind and tritanopia simulations, switching from red/orange to blue shades.

  • Removed old orange/red overrides for colorblind themes in fgColor, borderColor, and bgColor.
  • Introduced (via placeholder) new blue-based overrides (to be implemented).
  • Added a changeset for the patch release.

Reviewed Changes

Copilot reviewed 4 out of 34 changed files in this pull request and generated 5 comments.

File Description
src/tokens/functional/color/fgColor.json5 Cleared old colorblind overrides for open fgColor tokens.
src/tokens/functional/color/borderColor.json5 Cleared old colorblind overrides for open borders.
src/tokens/functional/color/bgColor.json5 Cleared old colorblind overrides for open backgrounds.
.changeset/modern-items-notice.md Added patch release note about switching to blue overrides.
Comments suppressed due to low confidence (1)

src/tokens/functional/color/fgColor.json5:229

  • [nitpick] Consider adding automated or visual regression tests to verify the new blue overrides render correctly in tritanopia, protanopia, and deuteranopia simulations.
        'org.primer.overrides': {

@lukasoppermann
Copy link
Collaborator Author

lukasoppermann commented Jul 14, 2025

From slack

:wave-dog: I noticed that the light colorblind theme changed where it isn't fully changing the color appearance it used to, i.e. Closed issues still show purple from the Light Default theme. Just wanted to see if anything changed?

Open issues used to also be orange and are now blue - just a tad difficult to discern blue/purple for an accessible theme

Result: We need to update closed to set it to gray.
After investigating I noticed that this is because the done token is used for closed issues. This means we need to adjust this token as well.

@lukasoppermann
Copy link
Collaborator Author

lukasoppermann commented Jul 22, 2025

The above has an issue where closed and done don't contrast well enough.

A new approach here is the following:

This is the default light theme:
CleanShot 2025-07-22 at 10 03 06@2x

Tritanopia light theme:
CleanShot 2025-07-22 at 10 07 00@2x

Protanopia Deuteranopia light theme:
CleanShot 2025-07-22 at 10 07 42@2x

Alternative new approach:

Tritanopia light theme:
CleanShot 2025-07-22 at 10 13 08@2x

Protanopia Deuteranopia light theme:
CleanShot 2025-07-22 at 10 14 45@2x

@github-actions github-actions bot temporarily deployed to Preview (Storybook) September 10, 2025 20:42 Inactive
@lukasoppermann lukasoppermann added the update snapshots Update visual regression test snapshots label Sep 11, 2025
@github-actions github-actions bot removed the update snapshots Update visual regression test snapshots label Sep 11, 2025
@github-actions github-actions bot temporarily deployed to Preview (Storybook) September 11, 2025 09:02 Inactive
@lukasoppermann
Copy link
Collaborator Author

Light
CleanShot 2025-09-11 at 13 02 42@2x

Dark
CleanShot 2025-09-11 at 13 03 03@2x

@lukasoppermann lukasoppermann added the update snapshots Update visual regression test snapshots label Sep 11, 2025
@github-actions github-actions bot removed the update snapshots Update visual regression test snapshots label Sep 11, 2025
@github-actions github-actions bot temporarily deployed to Preview (Storybook) October 7, 2025 07:34 Inactive
@lukasoppermann lukasoppermann added the update snapshots Update visual regression test snapshots label Oct 7, 2025
@github-actions github-actions bot removed the update snapshots Update visual regression test snapshots label Oct 7, 2025
@primer primer bot temporarily deployed to github-pages October 7, 2025 08:43 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) October 7, 2025 08:43 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants