Add support for high contrast themes to ProgressBar

[langermank]

Closes https://github.com/github/primer/issues/5587

Note: this isn't a foolproof solution but I think covers most contrast issues. Unfortunately the existing API is very open-ended, meaning you can really pass in any color you want for the item. I tried to find a solution that only touches the track bg/border as to not manipulate item colors, but again, not foolproof.

Changelog

New

• Adds a border and background color to the ProgressBar track to try and add contrast for high contrast themes (default themes are unchanged)
• Removes old snapshot tests
• Adds new color VRT tests + general tests to replace snapshots
• Attempts to correct the insanely open-ended bg prop to always find an emphasis color

Changed

Removed

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

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: ebd9480

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

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	90.28 KB (+0.15% 🔺)
packages/react/dist/browser.umd.js	90.44 KB (+0.11% 🔺)

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[primer-integration]

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/396331

[primer-integration]

🟢 golden-jobs completed with status success.

[Copilot]

Pull Request Overview

This PR adds support for high contrast themes to the ProgressBar component by implementing better color tokens and improving the existing color API. The main focus is on increasing visual contrast for accessibility without breaking existing functionality.

Key changes:

• Introduces new CSS tokens for track background and border colors to support high contrast themes
• Improves the bg prop handling to automatically default to 'emphasis' variants when not specified
• Replaces snapshot tests with more comprehensive color-focused unit tests and visual regression tests

Reviewed Changes

Copilot reviewed 10 out of 44 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
ProgressBar.module.css	Updates CSS to use new color tokens with border outline for high contrast support
ProgressBar.tsx	Enhances bg prop logic to default to 'emphasis' variant and fixes prop passing
ProgressBar.test.tsx	Removes snapshot test and adds comprehensive bg prop testing
ProgressBar.stories.tsx	Updates styling approach from sx to style prop
ProgressBar.features.stories.tsx	Replaces single color story with comprehensive AllColors story and updates prop usage
ProgressBar.dev.stories.tsx	Removes dev stories file entirely
e2e/components/ProgressBar.test.ts	Updates test references to match new story names
.changeset/lovely-vans-burn.md	Documents the patch release changes

---

_{You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.}

[Copilot]

The bg prop is being destructured and passed to the Box component, but it's also being used in the logic below via rest.bg. This creates a conflict where rest.bg will be undefined since bg was already extracted from rest. Either use bg consistently throughout or don't destructure it from the props.

Suggested change

	bg,
	bg, // Note: bg is used only for local style computation and is not passed down

[Copilot]

The bg prop value should be 'sponsor.emphasis' not 'sponsors.emphasis' based on the pattern used in other color variants.

Suggested change

	<ProgressBar.Item progress={8} aria-label="Music Usage" bg="sponsors.emphasis" />
	<ProgressBar.Item progress={8} aria-label="Music Usage" bg="sponsor.emphasis" />

[pksjce]

Does the bg prop need to be documented?

[langermank]

@pksjce that prop is already documented in our docs if that's what you're referring to! I didn't add it here, I just fixed it slightly.