Skip to content

Feat: Semantic Tokens #34256

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
Mitch-At-Work wants to merge 66 commits into
base: master
Choose a base branch
from
Open

Feat: Semantic Tokens #34256

Mitch-At-Work wants to merge 66 commits into from

Conversation

@Mitch-At-Work
Copy link
Contributor

@Mitch-At-Work Mitch-At-Work commented Apr 14, 2025 •
edited
Loading

Previous Behavior

Components relied on fluentui/tokens package which used generic level tokens for all components
fluentui/tokens was exported as a singular object, causing larger bundle sizes in ESBuild based projects

New Behavior

Components can now opt in to semantic style hooks via fluentui/semantic-style-hooks and fluentui/semantic-tokens package which:

  • Enables semantic token specificity (Elevates fluent to the global Microsoft horizontal token definition).
  • Provides token fallbacks to generic layers for minimal token definitions and theme definitions
  • Is backwards compatible with existing token definitions, there should be no visual regressions when using existing token sets (original legacy tokens are the final fallback if no semantic tokens present)
  • Provide additional tokens for use outside of fluent components, in a tree shakable manner
  • Internally using flat exported versions of fluentui/tokens to ensure no increased bundle size when using ESBuild
  • Move updated semantic styles to useStyle custom hooks so that semantic tokens are opt-in
  • Move semantic-tokens to pre-release versioning (0.x.y)

ToDo (Post merge/preview release)

  • Visual regression tests (For now, compared against master/legacy styles to ensure backwards compatibility).
  • Storybook-addon: Enable opt-in to semantic tokens, inject via withFluentProvider, and enable example kumo theme via it's own @fluentui/semantic-theme package
  • Semantic-tokens grouping update: Provide more fidelity/documentation around semantic token grouping, will extend/be backwards compatible with current tokens
  • Finalize and add blocked components for full component coverage (Currently awaiting designs and token updates).

@github-actions
Copy link

github-actions bot commented Apr 28, 2025 •
edited
Loading

📊 Bundle size report

✅ No changes found

@github-actions
Copy link

github-actions bot commented Apr 28, 2025

Pull request demo site: URL

github-actions[bot]
github-actions bot reviewed Apr 28, 2025
View reviewed changes
@Mitch-At-Work Mitch-At-Work marked this pull request as ready for review August 6, 2025 18:08
@Mitch-At-Work Mitch-At-Work requested a review from Hotell August 6, 2025 19:54
@Mitch-At-Work Mitch-At-Work mentioned this pull request Aug 11, 2025
Merged
@Mitch-At-Work
Copy link
Contributor Author

Mitch-At-Work commented Aug 11, 2025

Moved core changes (nessecary exports) to #35007

rachethecreator and others added 23 commits August 19, 2025 15:34
@rachethecreator @Mitch-At-Work
update radio to use semantic tokens (#34739)
3b05a7a 
Co-authored-by: Mitch-At-Work <mifraser@microsoft.com>
@rachethecreator @Mitch-At-Work
add persona to semantic style hooks (#34808)
be1c3e7
@brandonthomas @Mitch-At-Work
Semantic tokens checkbox (#34811)
8ba2e91 
Co-authored-by: Mitch-At-Work <mifraser@microsoft.com>
@terynk @Mitch-At-Work
Update Badge to use semantic tokens (#34765)
c42197d 
Co-authored-by: Mitch-At-Work <mifraser@microsoft.com>
@rachethecreator @Mitch-At-Work
add breadcrumb to semantic style hooks (#34837)
562796c
@Mitch-At-Work
Test: Ensure legacy fallback overrides originalToken exists (#34843)
030ab22
@terynk @terynkum @Mitch-At-Work
Field: Update to use Semantic Tokens (#34804)
ef32e8d 
Co-authored-by: terynkum <terynkum@microsoft.com>
Co-authored-by: Mitch-At-Work <mifraser@microsoft.com>
@rachethecreator @Mitch-At-Work
add spin button to semantic style hooks (#34829)
eab4e6c
@etudie @Mitch-At-Work
Extended Tokens: Input (#34796)
56c6d64 
Co-authored-by: Mitch-At-Work <mifraser@microsoft.com>
@rachethecreator @Mitch-At-Work
add toolbar to semantic style hooks (#34840)
29bcb30
@mltejera @Mitch-At-Work
Semantic Tokens: Tooltip (#34845)
4250e67
@rachethecreator @Mitch-At-Work
add infolabel to semantic style hooks (#34856)
08da482 
Co-authored-by: Mitch-At-Work <mifraser@microsoft.com>
@terynk @Mitch-At-Work
Toast: Update Toast to use semantic tokens (#34844)
23c7bcf 
Co-authored-by: Mitch-At-Work <mifraser@microsoft.com>
@rachethecreator @Mitch-At-Work
add table to semantic style hooks (#34863)
abf24b6
@Mitch-At-Work
Semantic Tokens: Fix classNames order in Avatar and Accordion (#34885)
09f65f4
@etudie @Mitch-At-Work
Extended Tokens: Search (#34842)
e9cdc39 
Co-authored-by: Mitch-At-Work <mifraser@microsoft.com>
@rachethecreator @Mitch-At-Work
add teaching popover to semantic style hooks (#34898)
fab0b12 
Co-authored-by: Mitch-At-Work <mifraser@microsoft.com>
@etudie @Mitch-At-Work
Semantic Tokens: Popover (#34907)
e268d65 
Co-authored-by: Mitch-At-Work <mifraser@microsoft.com>
@Mitch-At-Work
Rebase and fix rebase conflict
4a4a645
@Mitch-At-Work
Remove storybook changes (for now)
58d622d
@Mitch-At-Work
Fix up package json and version of semantic tokens
a64cebd
@Mitch-At-Work
Extended-tokens: Fix merge conflict after rebase (#34987)
51e7109 
Force merging as it is a simple rebase resolution in feature branch
@Mitch-At-Work
Resolve rebase changes
4635d68
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@github-actions github-actions[bot] github-actions[bot] left review comments

@marcosmoura marcosmoura Awaiting requested review from marcosmoura

@dmytrokirpa dmytrokirpa Awaiting requested review from dmytrokirpa

@JustSlone JustSlone Awaiting requested review from JustSlone JustSlone is a code owner

@jurokapsiar jurokapsiar Awaiting requested review from jurokapsiar jurokapsiar is a code owner

@tudorpopams tudorpopams Awaiting requested review from tudorpopams tudorpopams is a code owner

@Hotell Hotell Awaiting requested review from Hotell

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

CI NX: core

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

7 participants

@Mitch-At-Work @etudie @rachethecreator @brandonthomas @terynk @mltejera