Update Badge to use semantic tokens - #34765
Merged
Mitch-At-Work merged 8 commits intoJul 15, 2025
Merged
Conversation
|
Pull request demo site: URL |
Mitch-At-Work
force-pushed
the
user/terynkum/react-badge-semantic-tokens
branch
from
July 15, 2025 01:21
40734f9 to
d692745
Compare
Mitch-At-Work
self-requested a review
July 15, 2025 01:25
Mitch-At-Work
approved these changes
Jul 15, 2025
brandonthomas
approved these changes
Jul 15, 2025
Mitch-At-Work
merged commit Jul 15, 2025
7e2289e
into
microsoft:extended-tokens
10 of 14 checks passed
Mitch-At-Work
added a commit
that referenced
this pull request
Aug 6, 2025
Co-authored-by: Mitch-At-Work <mifraser@microsoft.com>
Mitch-At-Work
added a commit
that referenced
this pull request
Aug 20, 2025
Co-authored-by: Mitch-At-Work <mifraser@microsoft.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces semantic tokens to the
@fluentui/react-badgepackage, replacing hardcoded design tokens with semantic token references for improved flexibility and maintainability. It also updates dependencies and adds new semantic token definitions to support these changes.Note: Severe and Subtle colors DO NOT have semantic tokens. Code for those color variations was left alone.
Integration of Semantic Tokens
Badgecomponent, replacing existing design tokens for properties such as font family, font weight, font size, padding, border radius, and colors across various badge styles (e.g.,filled,ghost,outline,tint) inuseBadgeStyles.styles.ts. This ensures consistency and easier customization. [1] [2] [3] [4] [5] [6] [7]Dependency Updates
@fluentui/semantic-tokensas a dependency in thepackage.jsonfile for the@fluentui/react-badgepackage to utilize semantic tokens.Semantic Token Definitions
semantic-tokens.api.md, including tokens for padding, font weight, and color fallbacks. These tokens provide default values and fallback mechanisms for better design token management. [1] [2] [3] [4] [5] [6] [7]Documentation Updates
Badgecomponent as a minor feature.