Skip to content

add tokens switch to storybook addon #34940

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
wants to merge 58 commits into
base: extended-tokens
Choose a base branch
from
Open

add tokens switch to storybook addon #34940

wants to merge 58 commits into from

Conversation

rachethecreator
Copy link

@rachethecreator rachethecreator commented Jul 29, 2025 •
edited
Loading

The "Tokens: Semantic/Legacy" button in Storybook's toolbar enables switching between semantic/legacy tokens

Dev site:
image

image

Public site:
image

image

Mitch-At-Work and others added 30 commits April 28, 2025 09:17
@Mitch-At-Work
Semantic-tokens: Add initial package (microsoft#34121)
48fdc34
@Mitch-At-Work
Semantic-tokens: Generation Scripts (microsoft#34159)
e36c252
@Mitch-At-Work
Semantic Tokens: Generate token baseline (microsoft#34217)
ed5ca5b
@Mitch-At-Work
Semantic-tokens: Flat export deprecated tokens (Tree shakability in E…
25ccb55 
…SBuild) (microsoft#34235)
@Mitch-At-Work
Semantic-Tokens: React-Link (microsoft#34218)
ef63809
@Mitch-At-Work
Handle duplicate tokens and enable null for f2 overrides (microsoft#3…
aaa46d0 
…4277)
@Mitch-At-Work
Extended-tokens: Cleanup token exports (microsoft#34384)
6dd3bec
@Mitch-At-Work
Extended-tokens: Update to latest JSON spec and fix camel casing (mic…
f4759db 
…rosoft#34439)
@etudie @Mitch-At-Work
Semantic Tokens: Progress Bar (microsoft#34403)
75e3bc1 
Co-authored-by: Mitch-At-Work <[email protected]>
@Mitch-At-Work
Extended-tokens: Fix regressions from new JSON refactor (microsoft#34458
4cdeb03 
)
@Mitch-At-Work
Extended-tokens: Fix link focus reference (changed in latest JSON upd…
967e606 
…ate) (microsoft#34459)
@Mitch-At-Work
Semantic Tokens: React-text and react-label (microsoft#34350)
8b07b2a
@Mitch-At-Work
Semantic-tokens: React-button (microsoft#34276)
b79b1c2
@Mitch-At-Work
Extended-tokens: Fluent variant fallbacks (microsoft#34498)
8e20f63 
Landing legacy fallback structure
@Mitch-At-Work
Extended-tokens: Accordion (microsoft#34500)
db6accd
@Mitch-At-Work
Extended-tokens: Ensure legacy variants also get flat exported from l…
e1496a4 
…egacy tokens (bugfix) (microsoft#34551)
@Mitch-At-Work
Extended-tokens: Add Kumo semantic theme (TEMPORARY - REMOVE BEFORE M…
5bec65b 
…ERGE TO MASTER) (microsoft#34542)

REMOVE BEFORE MERGING TO MASTER
Force merging to extended-tokens as this is a temporary local update only needed for testing
@Mitch-At-Work
Extended-tokens: Enable null tokens (microsoft#34544)
a3cbf70
@rachethecreator
update avatar to use semantic tokens (microsoft#34553)
826ae0d
@rachethecreator
update divider to use semantic tokens (microsoft#34601)
d46d297
@Mitch-At-Work
Extended-tokens: Simplify shadow set (microsoft#34660)
2cf6df4
@rachethecreator
update fluentOverrides test to dedupe shadow tokens first (microsoft#…
78e2bd3 
…34678)
@rachethecreator @Mitch-At-Work
update switch to use semantic tokens (microsoft#34489)
068c086 
Co-authored-by: Mitch-At-Work <[email protected]>
@rachethecreator
update rating to use semantic tokens (microsoft#34672)
16661a0
@Mitch-At-Work
Extended Tokens: React-Drawer (microsoft#34683)
d482254
@Mitch-At-Work
Extended Tokens: React-Spinner (microsoft#34645)
e730dba
@Mitch-At-Work
React-Tree: Upgrade to extended tokens (microsoft#34602)
6e775b1
@etudie @Mitch-At-Work
Extended Tokens: Text area (microsoft#34692)
bceb283 
Co-authored-by: Mitch-At-Work <[email protected]>
@Mitch-At-Work
Extended tokens: Migrate to custom style hooks + Button example (micr…
ada7f7b 
…osoft#34735)
@Mitch-At-Work
Extended-tokens: Migrate all semantic styles into custom style hooks (m…
1878a8a 
…icrosoft#34786)
rachethecreator and others added 10 commits July 17, 2025 12:41
@rachethecreator
add toolbar to semantic style hooks (microsoft#34840)
1440974
@mltejera
Semantic Tokens: Tooltip (microsoft#34845)
54dc2e6
@rachethecreator @Mitch-At-Work
add infolabel to semantic style hooks (microsoft#34856)
cf6bdfb 
Co-authored-by: Mitch-At-Work <[email protected]>
@terynk @Mitch-At-Work
Toast: Update Toast to use semantic tokens (microsoft#34844)
6b8216e 
Co-authored-by: Mitch-At-Work <[email protected]>
@rachethecreator
add table to semantic style hooks (microsoft#34863)
cf0be36
@Mitch-At-Work
Semantic Tokens: Fix classNames order in Avatar and Accordion (micros…
ab4bb48 
…oft#34885)
@etudie @Mitch-At-Work
Extended Tokens: Search (microsoft#34842)
f7b8e4c 
Co-authored-by: Mitch-At-Work <[email protected]>
@rachethecreator @Mitch-At-Work
add teaching popover to semantic style hooks (microsoft#34898)
a4e8061 
Co-authored-by: Mitch-At-Work <[email protected]>
@etudie @Mitch-At-Work
Semantic Tokens: Popover (microsoft#34907)
d59715b 
Co-authored-by: Mitch-At-Work <[email protected]>
@rachethecreator
add tokens switch to storybook addon for switching between semantic a…
c7eb8dc 
…nd legacy tokens
@rachethecreator rachethecreator self-assigned this Jul 29, 2025
@rachethecreator rachethecreator requested a review from a team as a code owner July 29, 2025 20:03
@github-actions GitHub Actions
Copy link

Pull request demo site: URL

@Mitch-At-Work
Copy link
Contributor

Let's build this out for the react-component pages also as that's our core non-dev storybook:
image

Can be found under FluentDocsPage.stories.tsx:
image

@Hotell Hotell self-requested a review July 30, 2025 12:03
@rachethecreator rachethecreator requested review from a team as code owners July 30, 2025 14:08
@rachethecreator
Copy link
Author

Let's build this out for the react-component pages also as that's our core non-dev storybook: image

Can be found under FluentDocsPage.stories.tsx: image

@Mitch-At-Work Done! Also renamed to TokenSwitch, not sure if it matters any, but thought it flowed better with TOKEN_ID

@Mitch-At-Work
Copy link
Contributor

Good work, one small tweak:

  • In the main public storybook, let's default to 'legacy' for now (if we can default to different values, lets default to legacy in public and semantic in dev, if we can't separate initial state, we can just default both to legacy for now)
  • Let's flip the toggle options, so that 'on' state relates to 'semantic tokens enabled'

Hotell
Hotell reviewed Aug 5, 2025
View reviewed changes
Copy link
Contributor

@Hotell Hotell left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI: all DocBlocks are now part of our storybook addon , fully configurable from user land, making it also generic.

with that said I'm not sure how semantic tokens will scale in terms of generic implementation as our addon would be used in various fluent extensions, where I assume making use of semantic token would provide invalid experiences.

probably the best approach here is to spin a new sb addon kept only internally for now and once semantic tokens are globally available we can streamline to official SB addon

See

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Hotell Hotell Hotell left review comments

@Mitch-At-Work Mitch-At-Work Awaiting requested review from Mitch-At-Work

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

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

@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

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

Assignees

@rachethecreator rachethecreator

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
7 participants
@rachethecreator @Mitch-At-Work @Hotell @etudie @brandonthomas @terynk @mltejera