Migrate React ANSI and Prettylights consumers to new token names with deprecated fallbacks

[Copilot]

Changelog

New

• None.

Changed

• Token consumer migration (no semantic behavior change)
  • Replaced deprecated ANSI usages with canonical-first fallbacks:
    • var(--color-ansi-*) → var(--ansi-*, var(--color-ansi-*))
  • Replaced deprecated Prettylights usages with canonical-first fallbacks:
    • var(--color-prettylights-syntax-*) → var(--prettylights-syntax-*, var(--color-prettylights-syntax-*))
• Prettylights preferred-name normalization
  • Updated preferred token leaf names to camelCase where applicable (while retaining deprecated fallback names), including:
    • entity-tag → entityTag
    • storage-modifier-import → storageModifierImport
    • string-regexp → stringRegexp
    • constant-other-reference-link → constantOtherReferenceLink
    • meta-diff-range → metaDiffRange
    • sublimelinter-gutter-mark → sublimeLinterGutterMark
    • brackethighlighter-angle / brackethighlighter-unmatched → bracketHighlighterAngle / bracketHighlighterUnmatched
    • carriage-return-* → carriageReturn-*
    • invalid-illegal-* → invalidIllegal-*
• Coverage scope
  • Updated all relevant @primer/react consumers in:
    • packages/react/src/legacy-theme/ts/colors/*
    • packages/react/src/legacy-theme/ts/color-schemes.ts
    • packages/react/src/Header/Header.dev.module.css
• Fallback preservation
  • Kept existing hardcoded terminal fallbacks untouched by nesting them under deprecated-token fallback.

/* before */
color: var(--color-prettylights-syntax-comment, #57606a);

/* after */
color: var(
  --prettylights-syntax-comment,
  var(--color-prettylights-syntax-comment, #57606a)
);

Removed

• None.

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

• Review token migration shape and ordering only:
  • New token first, deprecated token second.
  • Existing hardcoded color fallbacks preserved as final fallback.
• Spot-check in:
  • legacy-theme/ts/colors/* for source theme token strings.
  • legacy-theme/ts/color-schemes.ts for generated/compiled scheme mappings.
  • Header.dev.module.css for direct CSS consumer usage.

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

Migrate deprecated ANSI and Prettylights token consumers in primer/react to the new token names while preserving fallback compatibility.

Context:

• primer/primitives is introducing new canonical token names:
  • ANSI: --color-ansi-* -> --ansi-*
  • Prettylights: --color-prettylights-syntax-* -> --prettylights-syntax-*
• Prettylights leaf names should also be updated from kebab-case to camelCase where applicable.
• Old names remain deprecated and should be kept as CSS fallbacks using the repo’s existing fallback style.
• Do NOT modify primer/primitives in this task.
• Create a PR only in primer/react.

Goal:
Update primer/react consumers to prefer the new token names while retaining deprecated-name fallbacks.

Requirements:

1. Update all occurrences in primer/react that reference deprecated token names:
   • var(--color-prettylights... should become var(--prettylights..., var(--color-prettylights...))
   • var(--color-ansi... should become var(--ansi..., var(--color-ansi...))
2. For prettylights tokens, also rename leaf names from kebab-case to camelCase where applicable in the new preferred token name. Examples:
   • --color-prettylights-syntax-entity-tag -> preferred --prettylights-syntax-entityTag
   • --color-prettylights-syntax-storage-modifier-import -> preferred --prettylights-syntax-storageModifierImport
   • --color-prettylights-syntax-string-regexp -> preferred --prettylights-syntax-stringRegexp
   • --color-prettylights-syntax-constant-other-reference-link -> preferred --prettylights-syntax-constantOtherReferenceLink
   • --color-prettylights-syntax-meta-diff-range -> preferred --prettylights-syntax-metaDiffRange
   • --color-prettylights-syntax-sublimelinter-gutter-mark -> preferred --prettylights-syntax-sublimeLinterGutterMark
   • --color-prettylights-syntax-brackethighlighter-angle -> preferred --prettylights-syntax-bracketHighlighterAngle
   • --color-prettylights-syntax-brackethighlighter-unmatched -> preferred --prettylights-syntax-bracketHighlighterUnmatched
   • --color-prettylights-syntax-carriage-return-text -> preferred --prettylights-syntax-carriageReturn-text
   • --color-prettylights-syntax-carriage-return-bg -> preferred --prettylights-syntax-carriageReturn-bg
   • --color-prettylights-syntax-invalid-illegal-text -> preferred --prettylights-syntax-invalidIllegal-text
   • --color-prettylights-syntax-invalid-illegal-bg -> preferred --prettylights-syntax-invalidIllegal-bg
3. Keep the fallback ordering as: new token first, deprecated token second.
   • Example: var(--prettylights-syntax-comment, var(--color-prettylights-syntax-comment))
   • Example: var(--ansi-red, var(--color-ansi-red))
4. Preserve all existing hardcoded final-value fallbacks where present.
   • Example: if the current value is var(--color-prettylights-syntax-comment, #57606a), update to:
     var(--prettylights-syntax-comment, var(--color-prettylights-syntax-comment, #57606a))
5. Update all relevant files in primer/react, including legacy theme color files and any other consumer files found.
6. Do not change semantics beyond token name migration.
7. Run tests/lint if available and ensure the repo remains valid.

Known likely files from earlier search include:

• packages/react/src/Header/Header.dev.module.css
• packages/react/src/legacy-theme/ts/colors/light.ts
• packages/react/src/legacy-theme/ts/colors/dark.ts
• packages/react/src/legacy-theme/ts/colors/dark_dimmed.ts
• packages/react/src/legacy-theme/ts/colors/dark_tritanopia.ts
• packages/react/src/legacy-theme/ts/colors/dark_high_contrast.ts
• packages/react/src/legacy-theme/ts/colors/dark_colorblind.ts
• packages/react/src/legacy-theme/ts/colors/light_high_contrast.ts
• packages/react/src/legacy-theme/ts/colors/light_tritanopia.ts
• packages/react/src/legacy-theme/ts/colors/light_colorblind.ts
• packages/react/src/legacy-theme/ts/color-schemes.ts

PR title should clearly indicate migration to new ANSI and Prettylights token names with fallbacks.

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

User: Read this issuek, how cabn we best address this: @github/core-ux/issues/2055

Assistant: Best approach: treat this as a compatibility rename, not a hard replacement.

I’d address github/core-ux#2055 in two layers:

1. Introduce aliases/fallbacks immediately

   • Add var(--new-token, var(--old-token)) wherever the old color-prettylights-* tokens are referenced.
   • This gives you a safe migration path and matches the issue checklist.
   • Important: the correct CSS fallback shape is:
     var(--new-token, var(--old-token))
     not var(--new-token, --old-token).

2. Then update usages to the new Primer token names

   • Follow the rename from primer/primitives#1352.
   • Replace old kebab-case prettylights token references with the new token names that use the current naming conventi...

This pull request was created from Copilot chat.

[changeset-bot]

🦋 Changeset detected

Latest commit: 73e117d

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]

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

This PR updates @primer/react token consumers to prefer the new canonical ANSI (--ansi-*) and Prettylights (--prettylights-syntax-*) custom properties while retaining deprecated --color-ansi-* / --color-prettylights-syntax-* fallbacks to preserve compatibility.

Changes:

• Updated legacy theme color maps to use canonical-first CSS variable fallbacks for Prettylights and ANSI tokens.
• Normalized selected Prettylights preferred leaf names to camelCase in the new token names (while keeping deprecated fallbacks).
• Updated Header.dev.module.css to use the new Prettylights token name with a deprecated fallback.

Show a summary per file

File	Description
packages/react/src/legacy-theme/ts/colors/light.ts	Migrates Prettylights/ANSI token references to canonical-first fallbacks for the light scheme.
packages/react/src/legacy-theme/ts/colors/light_tritanopia.ts	Same migration for light tritanopia scheme.
packages/react/src/legacy-theme/ts/colors/light_high_contrast.ts	Same migration for light high contrast scheme.
packages/react/src/legacy-theme/ts/colors/light_colorblind.ts	Same migration for light colorblind scheme.
packages/react/src/legacy-theme/ts/colors/dark.ts	Same migration for dark scheme.
packages/react/src/legacy-theme/ts/colors/dark_tritanopia.ts	Same migration for dark tritanopia scheme.
packages/react/src/legacy-theme/ts/colors/dark_high_contrast.ts	Same migration for dark high contrast scheme.
packages/react/src/legacy-theme/ts/colors/dark_dimmed.ts	Same migration for dark dimmed scheme.
packages/react/src/legacy-theme/ts/colors/dark_colorblind.ts	Same migration for dark colorblind scheme.
packages/react/src/legacy-theme/ts/color-schemes.ts	Updates the generated color scheme mappings to align with the new canonical-first fallback pattern.
packages/react/src/Header/Header.dev.module.css	Updates direct CSS consumer usage to the new Prettylights token name with deprecated fallback.

Copilot's findings

• Files reviewed: 11/11 changed files
• Comments generated: 10