chore: Reduce complex selector usage in Radio styles

[behowell]

Previous Behavior

Radio used complex CSS selectors to directly set colors on the indicator and label slots. This makes it very difficult to override the colors in custom styles.

New Behavior

Use CSS variables in the slot styles to set the colors. Any rule that uses a selector (e.g. :hover, :active, or :checked) only sets CSS variables. The slot's base styles reference the CSS variable in zero-specificity rules. This allows users to override slot colors using any rules they choose.

Note: Because the HTML <input type="radio"> element does not fire onChange events when the radio is deselected, it isn't possible to set checked styles via JavaScript. Therefore it's still necessary to use CSS for the checked state, along with a sibling combinator to set the CSS variables on the appropriate slot (:checked ~ .fui-Radio__indicator). However, since these complex selectors are only setting CSS variables, it is possible for a user to override the styles directly on the slot without needing a complex selector.  

Related Issue(s)

• Fixes #25483

[fabricteam]

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	621	635	5000
Button	mount	307	305	5000
Field	mount	1122	1128	5000
FluentProvider	mount	687	688	5000
FluentProviderWithTheme	mount	79	81	10
FluentProviderWithTheme	virtual-rerender	61	66	10
FluentProviderWithTheme	virtual-rerender-with-unmount	72	77	10
MakeStyles	mount	821	871	50000
Persona	mount	1737	1694	5000
SpinButton	mount	1388	1369	5000

[codesandbox-ci[bot]]

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 8dd9d0bf041cee310bebb31471def1b52b407aaa:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration
recursing-sun-n3hlpr	Issue #25483

[fabricteam]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-radio Radio	32.946 kB 10.252 kB	32.276 kB 10.381 kB	-670 B 129 B
react-table DataGrid	165.124 kB 45.892 kB	164.454 kB 45.92 kB	-670 B 28 B
react-table Table as DataGrid	136.504 kB 36.822 kB	135.834 kB 36.867 kB	-670 B 45 B
react-table Table (Selection only)	76.269 kB 20.541 kB	75.599 kB 20.604 kB	-670 B 63 B
react-table Table (Sort only)	74.935 kB 20.151 kB	74.265 kB 20.213 kB	-670 B 62 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Button, FluentProvider & webLightTheme	70.688 kB 20.464 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	217.02 kB 61.894 kB
react-components react-components: FluentProvider & webLightTheme	43.173 kB 14.298 kB
react-portal-compat PortalCompatProvider	7.902 kB 2.586 kB
react-radio RadioGroup	15.345 kB 6.263 kB
react-table Table (Primitives only)	45.28 kB 14.111 kB

_{🤖 This report was generated against 27ca189bc2fde6aade956712c1f87845296981bd}

[size-auditor[bot]]

Asset size changes

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

Baseline commit: 2c3fdb3e90f95f7476d02a4b3b253c5f04bc85cf (build)

[layershifter]

Closing for housekeeping 🏡 Feel free to re-open