Skip to content

fix(react-link): use colorBrandForegroundInverted for inverted#35681

Merged
mainframev merged 2 commits intomicrosoft:masterfrom
mainframev:fix/react-link-inverted-issue
Jan 21, 2026
Merged

fix(react-link): use colorBrandForegroundInverted for inverted#35681
mainframev merged 2 commits intomicrosoft:masterfrom
mainframev:fix/react-link-inverted-issue

Conversation

@mainframev
Copy link
Contributor

@mainframev mainframev commented Jan 20, 2026

In #35403, we aligned the Figma specs with the Link brand and inverted appearances. At the time, Figma was missing the inverted variant, while the code lacked the onBrand appearance. Although these gaps were aligned, the tokens proposed in the spec were incorrect, which introduced a regression in the Toast inverted appearance.

This change fixes that regression by ensuring Toast continues to use brand colors for its inverted appearance. At the same time, the problem spotted in #34911 should use "brand" value in BackgroundAppearanceProvider, so correct Link tokens applied.

Link design spec inverted variant should be updated to reflect the code change

Previous Behavior

Screenshot 2026-01-20 at 19 08 27 Screenshot 2026-01-20 at 19 09 15 Screenshot 2026-01-20 at 19 09 29

Old issue with HC

toast-hc

New Behavior

Reverts Toast back to 9.66 before #34955 and #35403

Screenshot 2026-01-20 at 19 40 59 Screenshot 2026-01-20 at 19 41 06 image

Related Issue(s)

@github-actions
Copy link

github-actions bot commented Jan 20, 2026

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.287 MB
322.479 kB
1.287 MB
322.487 kB
-5 B
8 B
react-link
Link
17.006 kB
6.752 kB
17.001 kB
6.756 kB
-5 B
4 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-breadcrumb
@fluentui/react-breadcrumb - package
115.745 kB
31.735 kB
react-components
react-components: Button, FluentProvider & webLightTheme
70.309 kB
20.074 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
237.728 kB
68.689 kB
react-components
react-components: FluentProvider & webLightTheme
43.608 kB
14.165 kB
react-message-bar
MessageBar (all components)
24.137 kB
8.901 kB
react-portal-compat
PortalCompatProvider
8.386 kB
2.624 kB
react-timepicker-compat
TimePicker
109.023 kB
36.011 kB
🤖 This report was generated against db44e6456a700c382147e17df018c9615af0a40b

@github-actions
Copy link

Pull request demo site: URL

@mainframev mainframev force-pushed the fix/react-link-inverted-issue branch from 1c84954 to 48d4398 Compare January 20, 2026 19:07
@mainframev mainframev force-pushed the fix/react-link-inverted-issue branch from f494efb to 308d2aa Compare January 21, 2026 08:14
@mainframev mainframev marked this pull request as ready for review January 21, 2026 08:49
@mainframev mainframev requested review from a team as code owners January 21, 2026 08:49
@mainframev mainframev force-pushed the fix/react-link-inverted-issue branch from 308d2aa to 8f6977a Compare January 21, 2026 09:27
Copy link
Contributor

@dmytrokirpa dmytrokirpa left a comment

Choose a reason for hiding this comment

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

Code changes LGTM! But please make sure to double-check that it's fine to use the same token for all states, and that it's not a design or a11y issue.

@mainframev mainframev force-pushed the fix/react-link-inverted-issue branch from 8f6977a to 96e8a41 Compare January 21, 2026 11:50
@mainframev
Copy link
Contributor Author

UPD: Figma spec change

image

@mainframev mainframev merged commit 7d6a04b into microsoft:master Jan 21, 2026
12 checks passed
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.

colorBrandForegroundInverted tokens not visible on inverted background in teams high contrast mode

3 participants