Rename ansi and prettylight colors by lukasoppermann · Pull Request #1352 · primer/primitives

lukasoppermann · 2026-04-15T10:31:30Z

Summary

Drop the generic color. prefix from ANSI and prettylights syntax tokens to align with the domain-specific naming convention used elsewhere (bgColor, fgColor, borderColor, display). All token values are preserved exactly — only names change.

List of notable changes:

renamed color.ansi.* → ansi.* (e.g. --color-ansi-red → --ansi-red)
renamed color.prettylights.syntax.* → prettylights.syntax.* (e.g. --color-prettylights-syntax-keyword → --prettylights-syntax-keyword)
renamed kebab/dotted canonical leaf tokens to camelCase (e.g. entity-tag → entityTag, storage.modifier.import → storageModifierImport)
deprecated all old color.ansi.* and color.prettylights.syntax.* tokens as backward-compatible aliases referencing the new canonical names
fixed prettylights.syntax.entityTag was accidentally assigned entity's purple values instead of the original entity-tag blue+tritanopia values — corrected to match the original token values
fixed prettylights.syntax.entity was incorrectly made a deprecated alias; restored as a canonical token with the original purple values ({base.color.purple.6}, dark {base.color.purple.2})
added $description to all 47 individual tokens (17 ANSI + 30 prettylights)
updated contributor-docs/agents/token-authoring.md with naming conventions table, deprecation/rename guide, and deprecated prefix notes

Backward compatibility

Old tokens are kept as deprecated aliases using var() references:

--color-ansi-red: var(--ansi-red);
--color-prettylights-syntax-keyword: var(--prettylights-syntax-keyword);

What should reviewers focus on?

Confirm no token values have changed — only names and structure
Confirm deprecated aliases correctly resolve to the new canonical tokens
Confirm prettylights.syntax.entity (purple) and prettylights.syntax.entityTag (blue, HTML/XML tags) have distinct, correct values

Steps to test:

Run npm run lint — should pass with no warnings
Run npm run format — should pass with no changes
Run npm test — all 9 tests should pass
Run npm run build — verify new CSS vars are emitted with resolved values and old CSS vars are emitted as var(--new-name) references

Supporting resources (related issues, external links, etc):

Contributor checklist:

All new and existing CI checks pass
Tests prove that the feature works and covers both happy and unhappy paths
Any drop in coverage, breaking changes or regressions have been documented above
All developer debugging and non-functional logging has been removed
Related issues have been referenced in the PR description

Reviewer checklist:

Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
Check that tests prove the feature works and covers both happy and unhappy paths
Check that there aren't other open Pull Requests for the same update/change
Verify the design tokens changed in this PR are expected using the diffing results in this PR

…lights.syntax.* Drop the generic 'color.' prefix from ANSI and prettylights syntax tokens to align with domain-specific naming (bgColor, fgColor, borderColor, display). New CSS vars: --ansi-red, --prettylights-syntax-keyword Old CSS vars kept as deprecated aliases: --color-ansi-red: var(--ansi-red) - Add $description to all 47 individual tokens - Add deprecated aliases with $deprecated field for migration - Update token-authoring.md with naming conventions and deprecation guide Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

changeset-bot · 2026-04-15T10:31:34Z

🦋 Changeset detected

Latest commit: 7f033a9

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	Minor

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 · 2026-04-15T10:33:55Z

Design Token Diff (CSS)

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

github-actions · 2026-04-15T10:33:56Z

Design Token Diff (StyleLint)

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

github-actions · 2026-04-15T10:33:56Z

Design Token Diff (Figma)

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

Copilot

Pull request overview

This PR updates functional syntax color token naming by promoting ansi.* and prettylights.syntax.* to first-class (non-color.*) token groups, while retaining the previous color.ansi.* and color.prettylights.syntax.* names as deprecated aliases for backward compatibility.

Changes:

Renames token paths from color.ansi.* → ansi.* and color.prettylights.syntax.* → prettylights.syntax.*.
Adds deprecated alias tokens that reference the new canonical tokens via {...} references (and marks them with $deprecated + “Deprecated. Use … instead.” descriptions).
Updates token authoring documentation with guidance for renames/deprecations and naming conventions.

Show a summary per file

File	Description
src/tokens/functional/color/syntax.json5	Introduces new canonical `ansi.` and `prettylights.syntax.` token groups and adds deprecated `color.*` aliases.
contributor-docs/agents/token-authoring.md	Documents conventions for renaming/deprecating tokens and the expected naming patterns.

Copilot's findings

Tip

Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comments suppressed due to low confidence (2)

src/tokens/functional/color/syntax.json5:396

prettylights.syntax.entity-tag changes the dark override from {base.color.neutral.8} to {base.color.green.1} and adds additional color-vision overrides. This is a functional palette change beyond the rename/deprecation work; please confirm it's intentional (and document it) or keep the previous override values to avoid unexpected visual diffs.

            dark: '{base.color.green.1}',
            'dark-tritanopia': '{base.color.blue.1}',
            'dark-tritanopia-high-contrast': '{base.color.blue.1}',
            'dark-protanopia-deuteranopia': '{base.color.blue.1}',
            'dark-protanopia-deuteranopia-high-contrast': '{base.color.blue.1}',

src/tokens/functional/color/syntax.json5:562

prettylights.syntax['string-regexp'] modifies several overrides (e.g. dark from {base.color.green.3} to {base.color.green.1}, and the tritanopia/protanopia mappings from *.3 to *.1). If this PR’s scope is limited to renames + deprecated aliases, consider reverting these value changes (or explicitly documenting them) to avoid unexpected syntax highlighting changes across themes.

            dark: '{base.color.green.1}',
            'dark-tritanopia': '{base.color.blue.1}',
            'dark-tritanopia-high-contrast': '{base.color.blue.1}',
            'light-tritanopia': '{base.color.blue.6}',
            'light-tritanopia-high-contrast': '{base.color.blue.6}',
            'dark-protanopia-deuteranopia': '{base.color.blue.1}',
            'dark-protanopia-deuteranopia-high-contrast': '{base.color.blue.1}',

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

lukasoppermann · 2026-05-12T11:18:55Z

          'org.primer.overrides': {
-            dark: '{base.color.neutral.6}',
+            dark: '{base.color.neutral.9}',
          },


No, there should be no token value changes, just the names schange. Fix this

@copilot No, there should be no token value changes, just the names schange. Fix this

Fixed in f1cfc4a. The root cause was that prettylights.syntax.entityTag was accidentally created using prettylights.syntax.entity's purple values ({base.color.purple.6}, dark {base.color.purple.2}) instead of the original entity-tag values ({base.color.blue.6}, dark {base.color.green.1} + tritanopia overrides). Additionally, prettylights.syntax.entity was incorrectly turned into a deprecated alias pointing to entityTag, losing its canonical purple values.

The fix:

prettylights.syntax.entityTag now correctly uses the original entity-tag values (blue + green dark + tritanopia)

prettylights.syntax.entity is restored as a proper canonical token with the original entity purple values

All other canonical camelCase tokens (constantOtherReferenceLink, storageModifierImport, etc.) were verified to have correct values matching the originals.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

…ity tokens

…d references - Rename ansi 'color-bright' kebab-case tokens to camelCase (e.g. black-bright → blackBright) - Update color.ansi deprecated tokens to reference new camelCase names - Fix color.prettylights.syntax deprecated tokens to reference canonical camelCase tokens instead of intermediate deprecated ones

The AllColors and AllColorsTable stories filter displayed tokens by checking if the ID includes certain substrings like 'color', 'bgColor', etc. ANSI color tokens (ansi-black, ansi-blackBright, etc.) don't match those patterns, so they were being filtered out. Added 'ansi-' to the filter checks so ANSI colors are now properly displayed in VRT stories.

lukasoppermann requested a review from a team as a code owner April 15, 2026 10:31

lukasoppermann requested review from Copilot and llastflowers April 15, 2026 10:31

Copilot started reviewing on behalf of lukasoppermann April 15, 2026 10:31 View session

lukasoppermann temporarily deployed to github-pages April 15, 2026 10:33 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to Preview (Storybook) April 15, 2026 10:33 Inactive

Copilot AI reviewed Apr 15, 2026

View reviewed changes

llastflowers approved these changes Apr 22, 2026

View reviewed changes

lukasoppermann closed this May 11, 2026

lukasoppermann reopened this May 11, 2026

lukasoppermann temporarily deployed to github-pages May 11, 2026 13:28 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to Preview (Storybook) May 11, 2026 13:28 Inactive

Add changeset for token rename

df1f3e2

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

lukasoppermann temporarily deployed to github-pages May 12, 2026 06:55 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to Preview (Storybook) May 12, 2026 06:56 Inactive

CamelCase prettylights canonical leaves

8c5d066

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

lukasoppermann temporarily deployed to github-pages May 12, 2026 07:02 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to Preview (Storybook) May 12, 2026 07:03 Inactive

lukasoppermann commented May 12, 2026

View reviewed changes

Comment thread src/tokens/functional/color/syntax.json5

Apply suggestion from @lukasoppermann

55cca1c

lukasoppermann temporarily deployed to github-pages May 12, 2026 07:36 — with GitHub Actions Inactive

Copilot started work on behalf of lukasoppermann May 12, 2026 07:37 View session

github-actions Bot temporarily deployed to Preview (Storybook) May 12, 2026 07:37 Inactive

fix: format contributor-docs/agents/token-authoring.md with Prettier

3ff089f

Copilot AI changed the title Rename color.ansi.* → ansi.* and color.prettylights.syntax.* → prettylights.syntax.* Fix the failing GitHub Actions job "Test & Lint" May 12, 2026

lukasoppermann temporarily deployed to github-pages May 12, 2026 09:07 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to Preview (Storybook) May 12, 2026 09:08 Inactive

lukasoppermann added update snapshots Update visual regression test snapshots and removed update snapshots Update visual regression test snapshots labels May 12, 2026

github-actions[bot] Regenerated snapshots

0cd3cd7

github-actions Bot removed the update snapshots Update visual regression test snapshots label May 12, 2026

primer Bot temporarily deployed to github-pages May 12, 2026 10:40 Inactive

github-actions Bot temporarily deployed to Preview (Storybook) May 12, 2026 10:40 Inactive

Copilot started work on behalf of lukasoppermann May 12, 2026 11:26 View session

fix: restore correct values for prettylights.syntax.entityTag and ent…

f1cfc4a

…ity tokens

Copilot finished work on behalf of lukasoppermann May 12, 2026 11:38

Copilot AI temporarily deployed to github-pages May 12, 2026 12:14 Inactive

github-actions Bot temporarily deployed to Preview (Storybook) May 12, 2026 12:15 Inactive

lukasoppermann temporarily deployed to github-pages May 13, 2026 06:14 — with GitHub Actions Inactive

github-actions Bot temporarily deployed to Preview (Storybook) May 13, 2026 06:14 Inactive

lukasoppermann temporarily deployed to github-pages May 13, 2026 07:23 — with GitHub Actions Inactive

Copilot started work on behalf of lukasoppermann May 13, 2026 07:24 View session

github-actions Bot temporarily deployed to Preview (Storybook) May 13, 2026 07:24 Inactive

Fix Prettier formatting in VRT all-colors story

49b1c69

Copilot finished work on behalf of lukasoppermann May 13, 2026 07:29

Copilot AI temporarily deployed to github-pages May 13, 2026 07:37 Inactive

github-actions Bot temporarily deployed to Preview (Storybook) May 13, 2026 07:37 Inactive

lukasoppermann added the update snapshots Update visual regression test snapshots label May 13, 2026

github-actions[bot] Regenerated snapshots

7f033a9

github-actions Bot removed the update snapshots Update visual regression test snapshots label May 13, 2026

primer Bot deployed to github-pages May 13, 2026 11:03 View deployment

github-actions Bot deployed to Preview (Storybook) May 13, 2026 11:04 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rename ansi and prettylight colors#1352

Rename ansi and prettylight colors#1352
lukasoppermann wants to merge 13 commits into
mainfrom
rename/ansi-color-prettylights-syntax

lukasoppermann commented Apr 15, 2026 •

edited by Copilot AI

Loading

Uh oh!

changeset-bot Bot commented Apr 15, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 15, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 15, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 15, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

lukasoppermann May 12, 2026

Uh oh!

lukasoppermann May 12, 2026

Uh oh!

Copilot AI May 12, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

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

Uh oh!

Summary

List of notable changes:

Backward compatibility

What should reviewers focus on?

Steps to test:

Supporting resources (related issues, external links, etc):

Contributor checklist:

Reviewer checklist:

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!

🦋 Changeset detected

Uh oh!

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

Uh oh!

Design Token Diff (CSS)

Uh oh!

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

Uh oh!

Design Token Diff (StyleLint)

Uh oh!

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

Uh oh!

Design Token Diff (Figma)

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Copilot's findings

Uh oh!

lukasoppermann May 12, 2026

Choose a reason for hiding this comment

Uh oh!

lukasoppermann May 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 12, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

lukasoppermann commented Apr 15, 2026 •

edited by Copilot AI

Loading

changeset-bot Bot commented Apr 15, 2026 •

edited

Loading

github-actions Bot commented Apr 15, 2026 •

edited

Loading

github-actions Bot commented Apr 15, 2026 •

edited

Loading

github-actions Bot commented Apr 15, 2026 •

edited

Loading