Token: Fix sizing, padding, and selected state styling

[liuliu-dev]

Fixes multiple styling issues in the Token component to match Figma design.

Closes #5387

Changelog

Changed

• Large variant: Updated font size from --text-body-size-small to --text-body-size-medium
• XLarge variant: Changed horizontal padding from 16px to 12px (left and right)
• Large variant: Updated close icon size from 12px to 16px to match Xlarge variant
• Medium variant: Reduced horizontal padding from 8px to 4px (left and right)
• Small variant: Disabled leadingVisual support (now only renders when size is not 'small')
• Selected state: Added missing darker outline (border-style: solid and border-color: var(--borderColor-emphasis))

Rollout strategy

• Patch release

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: bba3edb

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	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]

👋 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. Or, apply the integration-tests: skipped manually label to skip these checks.

[Copilot]

Pull Request Overview

This PR addresses multiple styling issues in the Token component, focusing on size-specific adjustments for icon sizing, padding, font sizes, and visual treatment of selected tokens. The changes also prevent the leading visual from rendering when the token size is 'small'.

• Adjusted remove button icon size to use 16px for 'large' and 'xlarge' sizes (previously all three non-small sizes used 12px)
• Updated padding values for 'medium' and 'xlarge' token sizes
• Changed font size for 'large' tokens from small to medium
• Added border styling for selected tokens
• Disabled leading visual rendering for 'small' tokens

Reviewed Changes

Copilot reviewed 6 out of 150 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/react/src/Token/_RemoveTokenButton.tsx	Updated icon size logic to use 16px for 'large' and 'xlarge' tokens
packages/react/src/Token/TokenBase.module.css	Adjusted padding for 'medium' and 'xlarge' sizes, updated font size for 'large'
packages/react/src/Token/Token.tsx	Added comment and conditional logic to prevent leading visual on 'small' tokens
packages/react/src/Token/Token.module.css	Added border styling for selected tokens
.playwright/snapshots/**/*.png	Updated visual regression test snapshots
.changeset/cuddly-worms-knock.md	Added changeset for patch release

[lukasoppermann]

Hey @liuliu-dev,

sorry, we need a little change:

1. Please change the horizontal padding for the medium variant to 6px using --base-size-6
2. Please reduce the margin left and right for leading and trailing visuals and actions to

• variant=large → --base-size-6
• variant-xlarge → --base-size-6
• variant=medium → keep the current value (4)

[lukasoppermann]

@liuliu-dev Nitpick, but could you please set the following storybook properties to false in the playground story?

• leadingVisual
• onRemove
• onClick

This will make it nicer for users:

Before	After

Just to clarify, this is NOT a bug or something you introduced, but since we are touching the component we may use the opportunity to improve this. 🙏

[github-actions]

👋 Hi, there are new commits since the last successful integration test. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the integration-tests: skipped manually label to skip these checks.

[primer-integration]

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

[primer-integration]

🟢 ci completed with status success.

[liuliu-dev]

Hey @lukasoppermann , I've updated the padding/margin, and the storybook. You can view it here:
https://primer-1c328e7a49-13348165.drafts.github.io/storybook/?path=/story/components-token--playground

[lukasoppermann]

Looks great! Thank you. 🚀

[TylerJDev]

LGTM! Left feedback, but non-blocking!

[TylerJDev]

Does this mean that any tokens using leading visuals and have a size of "small" will no longer render the leading visual?

[liuliu-dev]

Yes, that’s correct! as requested in the issue:
"small variant of the token should use not allow for leadingVisuals"

[TylerJDev]

Depending on my last comment, maybe this is worth a minor? But let me know what you think! 😁

[github-actions]

👋 Hi, there are new commits since the last successful integration test. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the integration-tests: skipped manually label to skip these checks.