Semantic-Tokens: Generate from token JSON export #33931
Draft
Conversation
This file contains 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
|
Pull request demo site: URL |
fabricteam
reviewed
Feb 28, 2025
| @@ -272,6 +272,7 @@ packages/react-components/react-virtualizer/stories @microsoft/xc-uxe @Mitch-At- | |||
| packages/react-components/react-skeleton/library @microsoft/cxe-prg | |||
There was a problem hiding this comment.
🕵🏾♀️ 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 |
🕵 FluentUIV0 No visual regressions between this PR and main |
fabricteam
reviewed
Feb 28, 2025
| @@ -272,6 +272,7 @@ packages/react-components/react-virtualizer/stories @microsoft/xc-uxe @Mitch-At- | |||
| packages/react-components/react-skeleton/library @microsoft/cxe-prg | |||
There was a problem hiding this comment.
🕵🏾♀️ 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 |
🕵 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
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.
** 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: