Skip to content
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.

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

Semantic-Tokens: Generate from token JSON export #33931

Draft
wants to merge 19 commits into
base: master
Choose a base branch
from

Conversation

Mitch-At-Work
Copy link
Contributor

@Mitch-At-Work Mitch-At-Work commented Feb 28, 2025

** DO NOT MERGE ** DRAFT ONLY

Previous Behavior

Tokens were manually implemented (to check architecture) in previous PR

New Behavior

Tokens generated via script to ensure alignment

ToDo:

  • Resolve JSON issues (inline emojies/NULL references)
  • Handle dynamic imports (generic for now)
  • Add fluent 2 mapping on top, to ensure fallbacks are aligned with existing component usage

Copy link

Pull request demo site: URL

@@ -272,6 +272,7 @@ packages/react-components/react-virtualizer/stories @microsoft/xc-uxe @Mitch-At-
packages/react-components/react-skeleton/library @microsoft/cxe-prg
Copy link
Collaborator

@fabricteam fabricteam Feb 28, 2025

Choose a reason for hiding this comment

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

🕵🏾‍♀️ visual regressions to review in the fluentui-web-components-v3 Visual Regression Report

Avatar 1 screenshots
Image Name Diff(in Pixels) Image Type
Avatar. - Dark Mode.normal.chromium.png 10569 Changed
RadioGroup 1 screenshots
Image Name Diff(in Pixels) Image Type
RadioGroup. - Dark Mode.normal.chromium_1.png 62 Changed
Switch 2 screenshots
Image Name Diff(in Pixels) Image Type
Switch. - Dark Mode.hover.chromium_2.png 92 Changed
Switch. - Dark Mode.normal.chromium_1.png 92 Changed

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 28, 2025

🕵 FluentUIV0 No visual regressions between this PR and main

@@ -272,6 +272,7 @@ packages/react-components/react-virtualizer/stories @microsoft/xc-uxe @Mitch-At-
packages/react-components/react-skeleton/library @microsoft/cxe-prg
Copy link
Collaborator

@fabricteam fabricteam Feb 28, 2025

Choose a reason for hiding this comment

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

🕵🏾‍♀️ visual regressions to review in the fluentuiv9 Visual Regression Report

Drawer 1 screenshots
Image Name Diff(in Pixels) Image Type
Drawer.overlay drawer full - Dark Mode.chromium.png 991 Changed
Link Converged - Rendered as anchor 61 screenshots
Image Name Diff(in Pixels) Image Type
Link Converged - Rendered as anchor.Inline - RTL.pressed.chromium.png 14 Changed
Link Converged - Rendered as anchor.Inline.pressed.chromium.png 14 Changed
Link Converged - Rendered as anchor.Inline.focused.chromium.png 22 Changed
Link Converged - Rendered as anchor.Inline Disabled Focusable.hover.chromium.png 283 Changed
Link Converged - Rendered as anchor.Inline Disabled Focusable.focused.chromium.png 283 Changed
Link Converged - Rendered as anchor.Inline - RTL.focused.chromium.png 22 Changed
Link Converged - Rendered as anchor.Inline - RTL.default.chromium.png 26 Changed
Link Converged - Rendered as anchor.Inline Disabled.hover.chromium.png 168 Changed
Link Converged - Rendered as anchor.Inline Disabled Focusable.pressed.chromium.png 283 Changed
Link Converged - Rendered as anchor.Inline Disabled Focusable.default.chromium.png 283 Changed
Link Converged - Rendered as anchor.Inline Disabled.default.chromium.png 168 Changed
Link Converged - Rendered as anchor.Inline - RTL.hover.chromium.png 21 Changed
Link Converged - Rendered as anchor.Inline.default.chromium.png 26 Changed
Link Converged - Rendered as anchor.Inline Disabled.pressed.chromium.png 168 Changed
Link Converged - Rendered as anchor.Inline.hover.chromium.png 20 Changed
Link Converged - Rendered as anchor.Inverted - Dark Mode.focused.chromium.png 231 Changed
Link Converged - Rendered as anchor.Inverted disabled - Dark Mode.hover.chromium.png 448 Changed
Link Converged - Rendered as anchor.Inverted - High Contrast.focused.chromium.png 265 Changed
Link Converged - Rendered as anchor.Inverted disabled - Dark Mode.default.chromium.png 448 Changed
Link Converged - Rendered as anchor.Inverted disabled - High Contrast.hover.chromium.png 254 Changed
Link Converged - Rendered as anchor.Inverted disabled - Dark Mode.focused.chromium.png 448 Changed
Link Converged - Rendered as anchor.Inverted disabled - High Contrast.pressed.chromium.png 254 Changed
Link Converged - Rendered as anchor.Inverted disabled - Dark Mode.pressed.chromium.png 448 Changed
Link Converged - Rendered as anchor.Inverted disabled - High Contrast.default.chromium.png 254 Changed
Link Converged - Rendered as anchor.Inverted disabled - High Contrast.focused.chromium.png 254 Changed
Link Converged - Rendered as anchor.Inverted disabled.hover.chromium.png 420 Changed
Link Converged - Rendered as anchor.Inverted disabled.default.chromium.png 420 Changed
Link Converged - Rendered as anchor.Inverted.focused.chromium.png 207 Changed
Link Converged - Rendered as anchor.Inverted disabled.pressed.chromium.png 420 Changed
Link Converged - Rendered as anchor.Inverted disabled.focused.chromium.png 420 Changed
Link Converged - Rendered as anchor.Stand-alone - Dark Mode.default.chromium.png 136 Changed
Link Converged - Rendered as anchor.Stand-alone - Dark Mode.focused.chromium.png 334 Changed
Link Converged - Rendered as anchor.Stand-alone - Dark Mode.hover.chromium.png 206 Changed
Link Converged - Rendered as anchor.Stand-alone - Dark Mode.pressed.chromium.png 63 Changed
Link Converged - Rendered as anchor.Stand-alone - High Contrast.hover.chromium.png 337 Changed
Link Converged - Rendered as anchor.Stand-alone - High Contrast.focused.chromium.png 380 Changed
Link Converged - Rendered as anchor.Stand-alone - High Contrast.default.chromium.png 249 Changed
Link Converged - Rendered as anchor.Stand-alone - RTL.default.chromium.png 60 Changed
Link Converged - Rendered as anchor.Stand-alone - High Contrast.pressed.chromium.png 254 Changed
Link Converged - Rendered as anchor.Stand-alone - RTL.hover.chromium.png 65 Changed
Link Converged - Rendered as anchor.Stand-alone Disabled Focusable - Dark Mode.focused.chromium.png 436 Changed
Link Converged - Rendered as anchor.Stand-alone - RTL.focused.chromium.png 70 Changed
Link Converged - Rendered as anchor.Stand-alone - RTL.pressed.chromium.png 44 Changed
Link Converged - Rendered as anchor.Stand-alone Disabled Focusable - Dark Mode.default.chromium.png 436 Changed
Link Converged - Rendered as anchor.Stand-alone Disabled Focusable - High Contrast.default.chromium.png 244 Changed
Link Converged - Rendered as anchor.Stand-alone Disabled Focusable - Dark Mode.pressed.chromium.png 436 Changed
Link Converged - Rendered as anchor.Stand-alone Disabled Focusable - Dark Mode.hover.chromium.png 436 Changed
Link Converged - Rendered as anchor.Stand-alone Disabled Focusable - High Contrast.focused.chromium.png 244 Changed
Link Converged - Rendered as anchor.Stand-alone Disabled Focusable - High Contrast.pressed.chromium.png 244 Changed
Link Converged - Rendered as anchor.Stand-alone Disabled Focusable - High Contrast.hover.chromium.png 244 Changed
Link Converged - Rendered as anchor.Stand-alone Disabled Focusable.focused.chromium.png 409 Changed
Link Converged - Rendered as anchor.Stand-alone Disabled Focusable.hover.chromium.png 409 Changed
Link Converged - Rendered as anchor.Stand-alone Disabled.default.chromium.png 292 Changed
Link Converged - Rendered as anchor.Stand-alone Disabled Focusable.pressed.chromium.png 409 Changed
Link Converged - Rendered as anchor.Stand-alone Disabled.hover.chromium.png 292 Changed
Link Converged - Rendered as anchor.Stand-alone.hover.chromium.png 65 Changed
Link Converged - Rendered as anchor.Stand-alone Disabled Focusable.default.chromium.png 409 Changed
Link Converged - Rendered as anchor.Stand-alone.default.chromium.png 60 Changed
Link Converged - Rendered as anchor.Stand-alone Disabled.pressed.chromium.png 292 Changed
Link Converged - Rendered as anchor.Stand-alone.focused.chromium.png 70 Changed
Link Converged - Rendered as anchor.Stand-alone.pressed.chromium.png 44 Changed
Link Converged - Rendered as button 52 screenshots
Image Name Diff(in Pixels) Image Type
Link Converged - Rendered as button.Inline - RTL.focused.chromium.png 219 Changed
Link Converged - Rendered as button.Inline - RTL.default.chromium.png 225 Changed
Link Converged - Rendered as button.Inline - RTL.hover.chromium.png 225 Changed
Link Converged - Rendered as button.Inline - RTL.pressed.chromium.png 226 Changed
Link Converged - Rendered as button.Inline Disabled Focusable.hover.chromium.png 926 Changed
Link Converged - Rendered as button.Inline Disabled Focusable.default.chromium.png 926 Changed
Link Converged - Rendered as button.Inline.default.chromium.png 808 Changed
Link Converged - Rendered as button.Inline Disabled Focusable.focused.chromium.png 926 Changed
Link Converged - Rendered as button.Inline Disabled.default.chromium.png 678 Changed
Link Converged - Rendered as button.Inline Disabled Focusable.pressed.chromium.png 926 Changed
Link Converged - Rendered as button.Inverted - Dark Mode.focused.chromium.png 612 Changed
Link Converged - Rendered as button.Inline Disabled.hover.chromium.png 678 Changed
Link Converged - Rendered as button.Inline.focused.chromium.png 803 Changed
Link Converged - Rendered as button.Inline Disabled.pressed.chromium.png 678 Changed
Link Converged - Rendered as button.Inline.pressed.chromium.png 811 Changed
Link Converged - Rendered as button.Inline.hover.chromium.png 809 Changed
Link Converged - Rendered as button.Inverted - Dark Mode.default.chromium.png 372 Changed
Link Converged - Rendered as button.Inverted - High Contrast.focused.chromium.png 265 Changed
Link Converged - Rendered as button.Inverted - Dark Mode.pressed.chromium.png 424 Changed
Link Converged - Rendered as button.Inverted - Dark Mode.hover.chromium.png 403 Changed
Link Converged - Rendered as button.Inverted - High Contrast.default.chromium.png 655 Changed
Link Converged - Rendered as button.Inverted disabled - Dark Mode.default.chromium.png 674 Changed
Link Converged - Rendered as button.Inverted disabled - Dark Mode.focused.chromium.png 674 Changed
Link Converged - Rendered as button.Inverted disabled - Dark Mode.hover.chromium.png 674 Changed
Link Converged - Rendered as button.Inverted disabled - Dark Mode.pressed.chromium.png 674 Changed
Link Converged - Rendered as button.Inverted disabled - High Contrast.focused.chromium.png 490 Changed
Link Converged - Rendered as button.Inverted disabled - High Contrast.default.chromium.png 490 Changed
Link Converged - Rendered as button.Inverted disabled - High Contrast.hover.chromium.png 490 Changed
Link Converged - Rendered as button.Inverted disabled - High Contrast.pressed.chromium.png 490 Changed
Link Converged - Rendered as button.Inverted disabled.default.chromium.png 499 Changed
Link Converged - Rendered as button.Inverted disabled.hover.chromium.png 499 Changed
Link Converged - Rendered as button.Inverted disabled.focused.chromium.png 499 Changed
Link Converged - Rendered as button.Inverted.hover.chromium.png 263 Changed
Link Converged - Rendered as button.Inverted disabled.pressed.chromium.png 499 Changed
Link Converged - Rendered as button.Inverted.default.chromium.png 223 Changed
Link Converged - Rendered as button.Inverted.focused.chromium.png 455 Changed
Link Converged - Rendered as button.Inverted.pressed.chromium.png 227 Changed
Link Converged - Rendered as button.Stand-alone - RTL.focused.chromium.png 306 Changed
Link Converged - Rendered as button.Stand-alone - RTL.hover.chromium.png 326 Changed
Link Converged - Rendered as button.Stand-alone - RTL.default.chromium.png 292 Changed
Link Converged - Rendered as button.Stand-alone Disabled.default.chromium.png 143 Changed
Link Converged - Rendered as button.Stand-alone - RTL.pressed.chromium.png 329 Changed
Link Converged - Rendered as button.Stand-alone Disabled Focusable.pressed.chromium.png 569 Changed
Link Converged - Rendered as button.Stand-alone Disabled Focusable.default.chromium.png 569 Changed
Link Converged - Rendered as button.Stand-alone.default.chromium.png 294 Changed
Link Converged - Rendered as button.Stand-alone Disabled Focusable.focused.chromium.png 569 Changed
Link Converged - Rendered as button.Stand-alone Disabled Focusable.hover.chromium.png 569 Changed
Link Converged - Rendered as button.Stand-alone Disabled.hover.chromium.png 143 Changed
Link Converged - Rendered as button.Stand-alone Disabled.pressed.chromium.png 143 Changed
Link Converged - Rendered as button.Stand-alone.hover.chromium.png 328 Changed
Link Converged - Rendered as button.Stand-alone.focused.chromium.png 308 Changed
Link Converged - Rendered as button.Stand-alone.pressed.chromium.png 332 Changed
Link Converged - Rendered as span 43 screenshots
Image Name Diff(in Pixels) Image Type
Link Converged - Rendered as span.Inline Disabled Focusable.default.chromium.png 283 Changed
Link Converged - Rendered as span.Inline - RTL.focused.chromium.png 22 Changed
Link Converged - Rendered as span.Inline - RTL.default.chromium.png 22 Changed
Link Converged - Rendered as span.Inline.default.chromium.png 21 Changed
Link Converged - Rendered as span.Inline Disabled Focusable.focused.chromium.png 283 Changed
Link Converged - Rendered as span.Inline - RTL.pressed.chromium.png 6 Changed
Link Converged - Rendered as span.Inline Disabled Focusable.pressed.chromium.png 283 Changed
Link Converged - Rendered as span.Inline.hover.chromium.png 16 Changed
Link Converged - Rendered as span.Inline Disabled Focusable.hover.chromium.png 283 Changed
Link Converged - Rendered as span.Inline.pressed.chromium.png 6 Changed
Link Converged - Rendered as span.Inline - RTL.hover.chromium.png 17 Changed
Link Converged - Rendered as span.Inline.focused.chromium.png 21 Changed
Link Converged - Rendered as span.Inverted - Dark Mode.focused.chromium.png 231 Changed
Link Converged - Rendered as span.Inverted - High Contrast.focused.chromium.png 265 Changed
Link Converged - Rendered as span.Inverted disabled - Dark Mode.hover.chromium.png 448 Changed
Link Converged - Rendered as span.Inverted disabled - Dark Mode.pressed.chromium.png 448 Changed
Link Converged - Rendered as span.Inverted disabled - Dark Mode.focused.chromium.png 448 Changed
Link Converged - Rendered as span.Inverted disabled - Dark Mode.default.chromium.png 448 Changed
Link Converged - Rendered as span.Inverted disabled - High Contrast.default.chromium.png 254 Changed
Link Converged - Rendered as span.Inverted disabled - High Contrast.focused.chromium.png 254 Changed
Link Converged - Rendered as span.Inverted disabled - High Contrast.pressed.chromium.png 254 Changed
Link Converged - Rendered as span.Inverted disabled.default.chromium.png 420 Changed
Link Converged - Rendered as span.Inverted disabled.pressed.chromium.png 420 Changed
Link Converged - Rendered as span.Inverted disabled - High Contrast.hover.chromium.png 254 Changed
Link Converged - Rendered as span.Inverted disabled.hover.chromium.png 420 Changed
Link Converged - Rendered as span.Inverted disabled.focused.chromium.png 420 Changed
Link Converged - Rendered as span.Inverted.focused.chromium.png 207 Changed
Link Converged - Rendered as span.Stand-alone - RTL.default.chromium.png 50 Changed
Link Converged - Rendered as span.Stand-alone - RTL.focused.chromium.png 67 Changed
Link Converged - Rendered as span.Stand-alone - RTL.pressed.chromium.png 19 Changed
Link Converged - Rendered as span.Stand-alone - RTL.hover.chromium.png 52 Changed
Link Converged - Rendered as span.Stand-alone Disabled Focusable.default.chromium.png 409 Changed
Link Converged - Rendered as span.Stand-alone.default.chromium.png 50 Changed
Link Converged - Rendered as span.Stand-alone Disabled Focusable.hover.chromium.png 409 Changed
Link Converged - Rendered as span.Stand-alone.focused.chromium.png 67 Changed
Link Converged - Rendered as span.Stand-alone.pressed.chromium.png 20 Changed
Link Converged - Rendered as span.Stand-alone Disabled Focusable.pressed.chromium.png 409 Changed
Link Converged - Rendered as span.Stand-alone.hover.chromium.png 52 Changed
Link Converged - Rendered as span.Stand-alone Disabled Focusable.focused.chromium.png 409 Changed
Link Converged - Rendered as span.Wraps correctly as an inline element.default.chromium.png 292 Changed
Link Converged - Rendered as span.Wraps correctly as an inline element.hover.chromium.png 229 Changed
Link Converged - Rendered as span.Wraps correctly as an inline element.pressed.chromium.png 292 Changed
Link Converged - Rendered as span.Wraps correctly as an inline element.focused.chromium.png 294 Changed
MessageBar 9 screenshots
Image Name Diff(in Pixels) Image Type
MessageBar.Auto.default.chromium.png 52 Changed
MessageBar.Intents - Dark Mode.default.chromium.png 165 Changed
MessageBar.Intents.default.chromium.png 214 Changed
MessageBar.Multiline Without Actions.default.chromium.png 227 Changed
MessageBar.Intents - High Contrast.default.chromium.png 288 Changed
MessageBar.Square.default.chromium.png 52 Changed
MessageBar.Intents - RTL.default.chromium.png 226 Changed
MessageBar.Multiline.default.chromium.png 227 Changed
MessageBar.Multiline No Actions.default.chromium.png 4291 Changed
Toast 22 screenshots
Image Name Diff(in Pixels) Image Type
Toast.Full Toast - Dark Mode.Toast visible.chromium.png 6481 Changed
Toast.Full Toast - RTL.Toast visible.chromium.png 3997 Changed
Toast.Title Only - Dark Mode.Toast visible.chromium.png 247 Changed
Toast.Full Toast Inverted - Dark Mode.Toast visible.chromium.png 4261 Changed
Toast.Full Toast - High Contrast.Toast visible.chromium.png 8874 Changed
Toast.Full Toast.Toast visible.chromium.png 4580 Changed
Toast.Full Toast Inverted.Toast visible.chromium.png 7124 Changed
Toast.Full Toast Inverted - High Contrast.Toast visible.chromium.png 9512 Changed
Toast.Title Only Inverted.Toast visible.chromium.png 174 Changed
Toast.Title Only Inverted - Dark Mode.Toast visible.chromium.png 292 Changed
Toast.Title Only - High Contrast.Toast visible.chromium.png 444 Changed
Toast.Title Only - RTL.Toast visible.chromium.png 399 Changed
Toast.Title Only Inverted - High Contrast.Toast visible.chromium.png 589 Changed
Toast.Without Subtitle - Dark Mode.Toast visible.chromium.png 6083 Changed
Toast.Toast Title Word Break.Toast visible.chromium.png 149 Changed
Toast.Title Only.Toast visible.chromium.png 394 Changed
Toast.Without Subtitle - RTL.Toast visible.chromium.png 3557 Changed
Toast.Without Subtitle Inverted.Toast visible.chromium.png 6459 Changed
Toast.Without Subtitle Inverted - High Contrast.Toast visible.chromium.png 8920 Changed
Toast.Without Subtitle - High Contrast.Toast visible.chromium.png 8283 Changed
Toast.Without Subtitle Inverted - Dark Mode.Toast visible.chromium.png 3752 Changed
Toast.Without Subtitle.Toast visible.chromium.png 3989 Changed

@fabricteam
Copy link
Collaborator

🕵 fluentuiv8 No visual regressions between this PR and main

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants