Update Token close button sizing

[langermank]

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

Fixes close button icon sizing

before	after

[changeset-bot]

🦋 Changeset detected

Latest commit: d54010f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@primer/react	Patch
@primer/styled-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]

Uh oh! @langermank, at least one image you shared is missing helpful alt text. Check your pull request body to fix the following violations:

• Images should have meaningful alternative text (alt text) at line 7
• Images should have meaningful alternative text (alt text) at line 7
• Images should have meaningful alternative text (alt text) at line 7
• Images should have meaningful alternative text (alt text) at line 7
• Images should have meaningful alternative text (alt text) at line 8
• Images should have meaningful alternative text (alt text) at line 8
• Images should have meaningful alternative text (alt text) at line 8
• Images should have meaningful alternative text (alt text) at line 8
• Images should have meaningful alternative text (alt text) at line 9
• Images should have meaningful alternative text (alt text) at line 9
• Images should have meaningful alternative text (alt text) at line 9
• Images should have meaningful alternative text (alt text) at line 9
• Images should have meaningful alternative text (alt text) at line 10
• Images should have meaningful alternative text (alt text) at line 10
• Images should have meaningful alternative text (alt text) at line 10
• Images should have meaningful alternative text (alt text) at line 10

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

[lukasoppermann]

🚀

[Copilot]

Pull Request Overview

This PR fixes the close button icon sizing in the Token component to address visual inconsistencies. The changes simplify the icon sizing logic and improve CSS consistency by using design tokens and removing redundant line-height declarations.

• Simplified icon sizing from a calculated approach to fixed sizes (12px for small/medium/large, 16px for xlarge)
• Standardized CSS by replacing hardcoded values with design tokens and consolidating line-height rules
• Updated color variables to use proper semantic tokens for interactive states

Reviewed Changes

Copilot reviewed 4 out of 86 changed files in this pull request and generated 2 comments.

File	Description
packages/react/src/Token/_RemoveTokenButton.tsx	Simplified icon sizing logic and removed unused function
packages/react/src/Token/_RemoveTokenButton.module.css	Updated to use design tokens and proper semantic color variables
packages/react/src/Token/TokenBase.module.css	Consolidated line-height and replaced hardcoded values with design tokens
.changeset/fresh-turtles-carry.md	Added changeset documentation for the patch

[Copilot]

[nitpick] The repeated conditional logic for icon sizing could be extracted into a helper function or constant mapping for better maintainability and consistency.

[Copilot]

[nitpick] This duplicates the same conditional logic from line 40. Consider extracting this into a shared function or constant to avoid code duplication.