fix(react-badge): update styles to not use CSS shorthands

[layershifter]

Pull request checklist

• Addresses an existing issue: extracted from makeStyles: do not use shorthand expansion #20539, related to RFC: Do not allow CSS shorthands in makeStyles() calls #20573
• Include a change request file using $ yarn change

Description of changes

This PR updates styles to not use CSS shorthands.

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against bd3e92b5193176665879abd667db4350ffcc35ea}

[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 60dad87:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[size-auditor]

Asset size changes

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

Baseline commit: bd3e92b5193176665879abd667db4350ffcc35ea (build)

[fabricteam]

Perf Analysis (@fluentui/react)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
ContextualMenu	mount	17123	8676	1000	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	1023	1026	5000
BaseButton	mount	1052	1051	5000
Breadcrumb	mount	2825	2745	1000
ButtonNext	mount	636	627	5000
Checkbox	mount	1676	1643	5000
CheckboxBase	mount	1443	1455	5000
ChoiceGroup	mount	4910	4887	5000
ComboBox	mount	1099	1096	1000
CommandBar	mount	10446	10453	1000
ContextualMenu	mount	17123	8676	1000	Possible regression
DefaultButton	mount	1276	1282	5000
DetailsRow	mount	3924	3866	5000
DetailsRowFast	mount	3946	3868	5000
DetailsRowNoStyles	mount	3722	3737	5000
Dialog	mount	2728	2735	1000
DocumentCardTitle	mount	281	294	1000
Dropdown	mount	3346	3385	5000
FluentProviderNext	mount	4305	4366	5000
FluentProviderWithTheme	mount	353	351	10
FluentProviderWithTheme	virtual-rerender	226	232	10
FluentProviderWithTheme	virtual-rerender-with-unmount	411	392	10
FocusTrapZone	mount	1945	1928	5000
FocusZone	mount	1980	1989	5000
IconButton	mount	1904	1909	5000
Label	mount	471	474	5000
Layer	mount	3086	3139	5000
Link	mount	606	594	5000
MakeStyles	mount	1998	1966	50000
MenuButton	mount	1613	1632	5000
MessageBar	mount	2142	2125	5000
Nav	mount	3389	3414	1000
OverflowSet	mount	1235	1245	5000
Panel	mount	2595	2633	1000
Persona	mount	970	985	1000
Pivot	mount	1614	1555	1000
PrimaryButton	mount	1437	1440	5000
Rating	mount	7884	7831	5000
SearchBox	mount	1440	1460	5000
Shimmer	mount	2723	2662	5000
Slider	mount	2089	2106	5000
SpinButton	mount	5161	5209	5000
Spinner	mount	560	556	5000
SplitButton	mount	3328	3349	5000
Stack	mount	647	652	5000
StackWithIntrinsicChildren	mount	1820	1872	5000
StackWithTextChildren	mount	4768	4789	5000
SwatchColorPicker	mount	10680	10707	5000
TagPicker	mount	2759	2804	5000
TeachingBubble	mount	13226	13272	5000
Text	mount	571	545	5000
TextField	mount	1542	1526	5000
ThemeProvider	mount	1309	1300	5000
ThemeProvider	virtual-rerender	736	742	5000
ThemeProvider	virtual-rerender-with-unmount	2002	1996	5000
Toggle	mount	950	951	5000
buttonNative	mount	256	246	5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AttachmentMinimalPerf.default	178	148	1.2:1
AvatarMinimalPerf.default	213	196	1.09:1
CarouselMinimalPerf.default	493	462	1.07:1
BoxMinimalPerf.default	357	336	1.06:1
ButtonMinimalPerf.default	178	168	1.06:1
PortalMinimalPerf.default	189	178	1.06:1
SegmentMinimalPerf.default	361	339	1.06:1
CardMinimalPerf.default	577	550	1.05:1
ChatWithPopoverPerf.default	385	368	1.05:1
DropdownManyItemsPerf.default	699	671	1.04:1
ListMinimalPerf.default	536	515	1.04:1
ReactionMinimalPerf.default	387	372	1.04:1
AccordionMinimalPerf.default	162	158	1.03:1
AttachmentSlotsPerf.default	1076	1040	1.03:1
ChatDuplicateMessagesPerf.default	309	301	1.03:1
ItemLayoutMinimalPerf.default	1231	1198	1.03:1
RadioGroupMinimalPerf.default	451	437	1.03:1
RefMinimalPerf.default	251	243	1.03:1
SkeletonMinimalPerf.default	358	346	1.03:1
AlertMinimalPerf.default	273	267	1.02:1
ChatMinimalPerf.default	672	661	1.02:1
DividerMinimalPerf.default	373	366	1.02:1
FormMinimalPerf.default	410	400	1.02:1
GridMinimalPerf.default	344	336	1.02:1
LoaderMinimalPerf.default	690	678	1.02:1
MenuButtonMinimalPerf.default	1666	1641	1.02:1
PopupMinimalPerf.default	603	590	1.02:1
SliderMinimalPerf.default	1693	1667	1.02:1
StatusMinimalPerf.default	672	658	1.02:1
TableMinimalPerf.default	416	407	1.02:1
AnimationMinimalPerf.default	435	429	1.01:1
ButtonOverridesMissPerf.default	1689	1673	1.01:1
ImageMinimalPerf.default	369	365	1.01:1
LabelMinimalPerf.default	387	385	1.01:1
LayoutMinimalPerf.default	370	368	1.01:1
ListNestedPerf.default	556	553	1.01:1
IconMinimalPerf.default	601	594	1.01:1
CustomToolbarPrototype.default	4090	4054	1.01:1
TreeWith60ListItems.default	183	182	1.01:1
ButtonSlotsPerf.default	549	551	1:1
CheckboxMinimalPerf.default	2722	2716	1:1
DatepickerMinimalPerf.default	5589	5586	1:1
DialogMinimalPerf.default	762	762	1:1
DropdownMinimalPerf.default	3036	3035	1:1
HeaderMinimalPerf.default	366	366	1:1
InputMinimalPerf.default	1321	1318	1:1
RosterPerf.default	1177	1177	1:1
ProviderMergeThemesPerf.default	1728	1726	1:1
TableManyItemsPerf.default	1911	1902	1:1
TextAreaMinimalPerf.default	482	483	1:1
ToolbarMinimalPerf.default	955	955	1:1
TooltipMinimalPerf.default	1020	1019	1:1
EmbedMinimalPerf.default	4117	4160	0.99:1
FlexMinimalPerf.default	295	298	0.99:1
HeaderSlotsPerf.default	755	759	0.99:1
ProviderMinimalPerf.default	1097	1111	0.99:1
SplitButtonMinimalPerf.default	4219	4265	0.99:1
MenuMinimalPerf.default	856	870	0.98:1
TextMinimalPerf.default	346	357	0.97:1
TreeMinimalPerf.default	796	818	0.97:1
ListCommonPerf.default	638	667	0.96:1
VideoMinimalPerf.default	592	624	0.95:1
ListWith60ListItems.default	622	670	0.93:1