fix: Replacing bottom border styles with text decoration underline in Link

[khmakoto]

Current Behavior

Link uses border-bottom styles for its underline.

New Behavior

Link uses text-decoration: underline styles for its underline, which is more inline with most implementations out there.

Related Issue(s)

Fixes #24729

[fabricteam]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-link Link	12.254 kB 4.956 kB	11.784 kB 4.867 kB	-470 B -89 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	187.656 kB 51.96 kB
react-components react-components: FluentProvider & webLightTheme	33.359 kB 11.004 kB
react-portal-compat PortalCompatProvider	5.851 kB 1.964 kB

_{🤖 This report was generated against 7f8bad094dadcdb671d5746848e96b5bd4b5791a}

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 19ffa30:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration
throbbing-sun-upbxd3	Issue #24729

[size-auditor]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 7f8bad094dadcdb671d5746848e96b5bd4b5791a (build)

[fabricteam]

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	1619	1647	5000
Button	mount	1168	1149	5000
FluentProvider	mount	1969	1944	5000
FluentProviderWithTheme	mount	726	720	10
FluentProviderWithTheme	virtual-rerender	670	674	10
FluentProviderWithTheme	virtual-rerender-with-unmount	713	728	10
MakeStyles	mount	2318	2358	50000
SpinButton	mount	3230	3229	5000

[behowell]

textDecorationColor defaults to currentcolor, and it doesn't look like you ever set it to anything other than the same as the color right? (When the underline should be visible.)

I'd propose replacing all of the places that set textDecorationColor: tokens.color..., to instead set textDecorationLine: 'underline'. And anywhere that sets textDecorationColor: 'transparent' to instead set textDecorationLine: 'none'.

This should marginally improve perf (fewer css variable lookups). It would also reduce bundle size (fewer griffel classes since all places that use textDecorationLine: 'underline' would share the same class). It would also let you get rid of the inlineSubtle class, since you could just use inline in all cases. And it might even avoid a potential bug in the future if someone changes the text color without realizing they need to change the underline color too.

I'll add code suggestions in a few places to clarify.