fix: replace deprecated CSS custom properties with new names + old as fallback by Copilot · Pull Request #7758 · primer/react

Copilot · 2026-04-15T07:06:55Z

Updates usages of three deprecated CSS custom properties to use the new token names while keeping the old names as fallbacks for backwards compatibility.

Replacements

Old	New
`var(--outline-focus-offset)`	`var(--focus-outline-offset, var(--outline-focus-offset))`
`var(--focus-outlineColor)`	`var(--focus-outline-color, var(--focus-outlineColor))`

Files changed

packages/mcp/src/primitives.ts — golden example CSS snippet and inline rule description (2× --outline-focus-offset)
packages/postcss-preset-primer/src/mixins/focusOutline.css — mixin default param $outlineColor
packages/postcss-preset-primer/src/mixins/focusOutlineOnEmphasis.css — same
packages/react/src/ToggleSwitch/ToggleSwitch.module.css — :focus-visible outline
packages/react/src/SelectPanel/SelectPanel.examples.stories.module.css — drops the hard-coded --color-accent-emphasis fallback in favour of the chained old token

Snapshot for postcss-preset-primer updated to reflect compiled mixin output:

outline: 2px solid var(--focus-outline-color, var(--focus-outlineColor, var(--color-accent-fg)))

Changelog

New

Changed

CSS usages of --outline-focus-offset and --focus-outlineColor now reference the new token names (--focus-outline-offset, --focus-outline-color) with the deprecated names retained as fallbacks.

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

postcss-preset-primer unit tests cover the mixin output and pass with the updated snapshots. No visual or behavioural changes — fallback chain ensures the old tokens continue to resolve correctly until removed.

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-ui (Learn more about how to run integration tests)

Original prompt

Goal

Replace deprecated CSS custom property names with their new equivalents, using the old name as a fallback for backwards compatibility.

Replacements to make

Old	New (with fallback)
`var(--outline-focus-offset)`	`var(--focus-outline-offset, var(--outline-focus-offset))`
`var(--outline-focus-width)`	`var(--focus-outline-width, var(--outline-focus-width))`
`var(--focus-outlineColor)`	`var(--focus-outline-color, var(--focus-outlineColor))`

Files to update

The following files have been identified as needing changes:

packages/mcp/src/primitives.ts — Line 511 contains var(--outline-focus-offset) inside a template string (the golden example CSS snippet):
```
outline-offset: var(--outline-focus-offset);
```
Also line 440 contains var(--outline-focus-offset) in a comment/rule string:
```
* **Focus**: `:focus-visible` MUST use `outline: var(--focus-outline)` AND `outline-offset: var(--outline-focus-offset)`.
```
Update both occurrences.
packages/postcss-preset-primer/src/mixins/focusOutline.css — Contains var(--focus-outlineColor) as a default parameter value:
```
@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {
```
packages/postcss-preset-primer/src/mixins/focusOutlineOnEmphasis.css — Contains var(--focus-outlineColor) as a default parameter value:
```
@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {
```
packages/react/src/ToggleSwitch/ToggleSwitch.module.css — Contains var(--focus-outlineColor) in the :focus-visible rule:
```
outline: 2px solid var(--focus-outlineColor);
```
packages/react/src/SelectPanel/SelectPanel.examples.stories.module.css — Contains var(--focus-outlineColor, ...) — already has a fallback but with the wrong new token name; update the first argument:
```
outline: 2px solid var(--focus-outlineColor, var(--color-accent-emphasis));
```
This should become:
```
outline: 2px solid var(--focus-outline-color, var(--focus-outlineColor, var(--color-accent-emphasis)));
```
Wait — on reflection, if it already has a non-token fallback value, just prepend the new token name as the primary:
```
outline: 2px solid var(--focus-outline-color, var(--focus-outlineColor));
```
(The var(--color-accent-emphasis) fallback can be dropped in favour of the chained old token as fallback.)

Snapshot update

The file packages/postcss-preset-primer/src/__tests__/__snapshots__/preset.test.ts.snap contains hardcoded snapshots of the compiled mixin output. After changing the mixin files, run the test suite to regenerate snapshots, or manually update the relevant snapshot strings to reflect the new var(--focus-outline-color, var(--focus-outlineColor, ...)) output.

Important

Do not change any token definition files or remove the old variable names anywhere — only update the usages as described.
Apply the substitution consistently: every bare var(--outline-focus-offset) → var(--focus-outline-offset, var(--outline-focus-offset)), every bare var(--outline-focus-width) → var(--focus-outline-width, var(--outline-focus-width)), every bare var(--focus-outlineColor) → var(--focus-outline-color, var(--focus-outlineColor)).

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: search for outline-focus-offset and outline-focus-width css variables in any repo within the primer or github org.

Lists of the existing usages per repo and a link to the search query. Include count of usage and in how many files.

Assistant: Here's a breakdown of all findings for --outline-focus-offset and --outline-focus-width across the primer and github orgs:

`org:primer`

🔗 View search in GitHub

Repo	Files	Notes
`primer/primitives`	2	`DESIGN_TOKENS_GUIDE.md` (docs example), `ColorTokenSwatch.css` (`--outline-focus-width` usage)
`primer/react`	1	`packages/mcp/src/primitives.ts` (docs/example string referencing `--outline-focus-offset`)
`primer/primitives-vscode-extension`	2	`src/data/rules.ts` (token matcher config), `src/data/properties-generated.ts` (generated token definitions)
`primer/tailwind-config`	1	`packages/tailwind-config/src/border.css` — maps both tokens to Tailwind CSS theme vars

`org:github`

🔗 View search in GitHub

Repo	Files	Notes
[`github/github-ui`](https://github....

This pull request was created from Copilot chat.

changeset-bot · 2026-04-15T07:07:03Z

⚠️ No Changeset found

Latest commit: e0dca25

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

…s and fallbacks Agent-Logs-Url: https://github.com/primer/react/sessions/de27d8ab-284e-42bb-824a-0320a7dcf3fa Co-authored-by: lukasoppermann <813754+lukasoppermann@users.noreply.github.com>

Agent-Logs-Url: https://github.com/primer/react/sessions/de27d8ab-284e-42bb-824a-0320a7dcf3fa Co-authored-by: lukasoppermann <813754+lukasoppermann@users.noreply.github.com>

lukasoppermann

Makes sense from my side, @eng please verify this.

github-actions · 2026-04-15T07:26:32Z

⚠️ 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.

Copilot

Pull request overview

Updates deprecated focus-related CSS custom property usages across Primer React, the PostCSS preset mixins, and MCP token guidance text to prefer the new token names while retaining the deprecated names as fallbacks for backwards compatibility.

Changes:

Replace var(--focus-outlineColor) with var(--focus-outline-color, var(--focus-outlineColor)) in React CSS Modules and PostCSS mixin defaults.
Replace var(--outline-focus-offset) with var(--focus-outline-offset, var(--outline-focus-offset)) in MCP token rules and example snippets.
Update postcss-preset-primer snapshots to reflect the newly compiled fallback chain output.

Show a summary per file

File	Description
packages/react/src/ToggleSwitch/ToggleSwitch.module.css	Updates focus-visible outline color to use the new token with deprecated fallback.
packages/react/src/SelectPanel/SelectPanel.examples.stories.module.css	Updates example outline color to use the new token with deprecated fallback.
packages/postcss-preset-primer/src/mixins/focusOutlineOnEmphasis.css	Updates mixin default outline color to new token with deprecated fallback.
packages/postcss-preset-primer/src/mixins/focusOutline.css	Updates mixin default outline color to new token with deprecated fallback.
packages/postcss-preset-primer/src/tests/snapshots/preset.test.ts.snap	Updates compiled mixin output snapshots to include the new fallback chain.
packages/mcp/src/primitives.ts	Updates MCP token usage rules/examples to use new outline offset token with deprecated fallback.

Copilot's findings

Files reviewed: 6/6 changed files
Comments generated: 2

Copilot · 2026-04-15T07:30:30Z

packages/postcss-preset-primer/src/mixins/focusOutlineOnEmphasis.css

+@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px,
+  $outlineColor: var(--focus-outline-color, var(--focus-outlineColor)) {


For consistency with the other mixins in this directory (e.g. focusOutline), keep the @define-mixin signature on a single line unless there’s a strong reason to wrap it. This makes future diffs smaller and keeps these small mixin files easier to scan.

Suggested change

@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px,

$outlineColor: var(--focus-outline-color, var(--focus-outlineColor)) {

@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--focus-outline-color, var(--focus-outlineColor)) {

Copilot · 2026-04-15T07:30:31Z

packages/postcss-preset-primer/src/__tests__/__snapshots__/preset.test.ts.snap


-exports[`postcss-preset-primer > mixins > @mixin buttonReset 1`] = `".selector{align-items:center;appearance:none;background:none;border:0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;margin:0;padding:0;text-align:start}.selector::-moz-focus-inner{border:0}"`;
+exports[`postcss-preset-primer > mixins > @mixin buttonReset 1`] =
+  `".selector{align-items:center;appearance:none;background:none;border:0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;margin:0;padding:0;text-align:start}.selector::-moz-focus-inner{border:0}"`


The snapshot update includes unrelated formatting churn (line wrapping / semicolon removal) for snapshots whose CSS output didn’t change. To keep diffs focused and reduce merge conflicts, consider reverting those purely-formatting changes and only updating the snapshot strings that actually changed due to the new focus outline token chain.

Suggested change

`".selector{align-items:center;appearance:none;background:none;border:0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;margin:0;padding:0;text-align:start}.selector::-moz-focus-inner{border:0}"`

`".selector{align-items:center;appearance:none;background:none;border:0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;margin:0;padding:0;text-align:start;}.selector::-moz-focus-inner{border:0;}"`

lukasoppermann · 2026-04-15T07:35:42Z

packages/react/src/ToggleSwitch/ToggleSwitch.module.css

  /* Focus styles */
  &:focus-visible {
-    outline: 2px solid var(--focus-outlineColor);
+    outline: 2px solid var(--focus-outline-color, var(--focus-outlineColor));


Suggested change

outline: 2px solid var(--focus-outline-color, var(--focus-outlineColor));

outline: var(--focus-outline);

lukasoppermann · 2026-04-15T07:36:07Z

packages/react/src/SelectPanel/SelectPanel.examples.stories.module.css

 .CustomActionListItem[data-is-active-descendant='activated-directly'] {
  background-color: transparent;
-  outline: 2px solid var(--focus-outlineColor, var(--color-accent-emphasis));
+  outline: 2px solid var(--focus-outline-color, var(--focus-outlineColor));


Suggested change

outline: 2px solid var(--focus-outline-color, var(--focus-outlineColor));

outline: var(--focus-outline);

Initial plan

e6c1e75

Copilot AI assigned Copilot and lukasoppermann Apr 15, 2026

Copilot started work on behalf of lukasoppermann April 15, 2026 07:07 View session

Copilot AI and others added 2 commits April 15, 2026 07:16

fix: replace deprecated CSS custom property names with new equivalent…

eb5fb02

…s and fallbacks Agent-Logs-Url: https://github.com/primer/react/sessions/de27d8ab-284e-42bb-824a-0320a7dcf3fa Co-authored-by: lukasoppermann <813754+lukasoppermann@users.noreply.github.com>

chore: revert spurious package-lock.json changes

e0dca25

Agent-Logs-Url: https://github.com/primer/react/sessions/de27d8ab-284e-42bb-824a-0320a7dcf3fa Co-authored-by: lukasoppermann <813754+lukasoppermann@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Replace deprecated CSS custom properties with fallbacks~~ fix: replace deprecated CSS custom properties with new names + old as fallback Apr 15, 2026

Copilot finished work on behalf of lukasoppermann April 15, 2026 07:21

Copilot AI requested a review from lukasoppermann April 15, 2026 07:21

lukasoppermann approved these changes Apr 15, 2026

View reviewed changes

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 15, 2026

lukasoppermann marked this pull request as ready for review April 15, 2026 07:26

lukasoppermann requested a review from a team as a code owner April 15, 2026 07:26

lukasoppermann requested review from Copilot and liuliu-dev April 15, 2026 07:26

lukasoppermann added the skip changeset This change does not need a changelog label Apr 15, 2026

Copilot started reviewing on behalf of lukasoppermann April 15, 2026 07:27 View session

Copilot AI reviewed Apr 15, 2026

View reviewed changes

lukasoppermann reviewed Apr 15, 2026

View reviewed changes

Copilot AI deployed to github-pages April 15, 2026 07:37 View deployment

github-actions bot deployed to storybook-preview-7758 April 15, 2026 07:37 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: replace deprecated CSS custom properties with new names + old as fallback#7758

fix: replace deprecated CSS custom properties with new names + old as fallback#7758
Copilot wants to merge 3 commits intomainfrom
copilot/update-css-custom-properties

Copilot AI commented Apr 15, 2026 •

edited

Loading

Uh oh!

changeset-bot bot commented Apr 15, 2026 •

edited

Loading

Uh oh!

lukasoppermann left a comment

Uh oh!

github-actions bot commented Apr 15, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 15, 2026

Uh oh!

Copilot AI Apr 15, 2026

Uh oh!

lukasoppermann Apr 15, 2026

Uh oh!

lukasoppermann Apr 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px,
		$outlineColor: var(--focus-outline-color, var(--focus-outlineColor)) {

	`".selector{align-items:center;appearance:none;background:none;border:0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;margin:0;padding:0;text-align:start}.selector::-moz-focus-inner{border:0}"`
	`".selector{align-items:center;appearance:none;background:none;border:0;color:inherit;cursor:pointer;display:inline-flex;font:inherit;margin:0;padding:0;text-align:start;}.selector::-moz-focus-inner{border:0;}"`

	outline: 2px solid var(--focus-outline-color, var(--focus-outlineColor));
	outline: var(--focus-outline);

Conversation

Copilot AI commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Replacements

Files changed

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Goal

Replacements to make

Files to update

Snapshot update

Important

org:primer

org:github

Uh oh!

changeset-bot bot commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

lukasoppermann left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Apr 15, 2026

⚠️ Action required

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Copilot's findings

Uh oh!

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

lukasoppermann Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

lukasoppermann Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Apr 15, 2026 •

edited

Loading

`org:primer`

`org:github`

changeset-bot bot commented Apr 15, 2026 •

edited

Loading