(web-components) update neutral fill card

[bheston]

Pull request checklist

• Addresses an existing issue: Fixes #0000
• Include a change request file using $ yarn change

Description of changes

Updated the neutral fill card color recipe to always be lighter or equal to the container, instead of flipping to go darker over white.

Focus areas to test

(optional)

[size-auditor]

Asset size changes

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

Baseline commit: 2c9b177f2c54ef93d8d66c1242573b257fdaf083 (build)

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	831	874	5000
BaseButton	mount	969	949	5000
Breadcrumb	mount	2694	2742	1000
ButtonNext	mount	536	550	5000
Checkbox	mount	1655	1795	5000
CheckboxBase	mount	1438	1417	5000
ChoiceGroup	mount	5283	5179	5000
ComboBox	mount	1054	1012	1000
CommandBar	mount	10548	10595	1000
ContextualMenu	mount	6220	6319	1000
DefaultButton	mount	1259	1233	5000
DetailsRow	mount	4032	4014	5000
DetailsRowFast	mount	4075	4021	5000
DetailsRowNoStyles	mount	3832	3746	5000
Dialog	mount	2256	2281	1000
DocumentCardTitle	mount	158	146	1000
Dropdown	mount	3535	3546	5000
FocusTrapZone	mount	1817	1808	5000
FocusZone	mount	1907	1882	5000
IconButton	mount	1895	1890	5000
Label	mount	378	370	5000
Layer	mount	1992	1962	5000
Link	mount	494	509	5000
MakeStyles	mount	1853	1921	50000
MenuButton	mount	1606	1643	5000
MessageBar	mount	2076	2168	5000
Nav	mount	3456	3403	1000
OverflowSet	mount	1068	1054	5000
Panel	mount	2122	2092	1000
Persona	mount	876	872	1000
Pivot	mount	1481	1510	1000
PrimaryButton	mount	1393	1371	5000
Rating	mount	8285	8359	5000
SearchBox	mount	1464	1409	5000
Shimmer	mount	2787	2737	5000
Slider	mount	2082	2110	5000
SpinButton	mount	5659	5212	5000
Spinner	mount	446	453	5000
SplitButton	mount	3424	3431	5000
Stack	mount	538	549	5000
StackWithIntrinsicChildren	mount	1667	1743	5000
StackWithTextChildren	mount	5005	5038	5000
SwatchColorPicker	mount	10824	10828	5000
Tabs	mount	1480	1529	1000
TagPicker	mount	2589	2639	5000
TeachingBubble	mount	12198	12230	5000
Text	mount	454	461	5000
TextField	mount	1501	1493	5000
ThemeProvider	mount	1232	1187	5000
ThemeProvider	virtual-rerender	590	615	5000
ThemeProviderNext	mount	6789	6733	5000
Toggle	mount	884	916	5000
buttonNative	mount	108	128	5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ImageMinimalPerf.default	439	401	1.09:1
ChatWithPopoverPerf.default	415	386	1.08:1
HeaderSlotsPerf.default	909	838	1.08:1
ListNestedPerf.default	616	578	1.07:1
RadioGroupMinimalPerf.default	506	473	1.07:1
SkeletonMinimalPerf.default	406	378	1.07:1
AvatarMinimalPerf.default	218	206	1.06:1
RefMinimalPerf.default	264	249	1.06:1
TreeWith60ListItems.default	197	185	1.06:1
CarouselMinimalPerf.default	525	499	1.05:1
LayoutMinimalPerf.default	407	387	1.05:1
ReactionMinimalPerf.default	428	407	1.05:1
SliderMinimalPerf.default	1717	1643	1.05:1
SegmentMinimalPerf.default	377	364	1.04:1
IconMinimalPerf.default	687	660	1.04:1
AccordionMinimalPerf.default	178	173	1.03:1
AlertMinimalPerf.default	306	298	1.03:1
ButtonMinimalPerf.default	194	188	1.03:1
MenuMinimalPerf.default	930	907	1.03:1
PopupMinimalPerf.default	609	590	1.03:1
AttachmentMinimalPerf.default	175	171	1.02:1
AttachmentSlotsPerf.default	1222	1202	1.02:1
ChatDuplicateMessagesPerf.default	326	320	1.02:1
DividerMinimalPerf.default	414	404	1.02:1
LabelMinimalPerf.default	429	419	1.02:1
ListMinimalPerf.default	577	564	1.02:1
ListWith60ListItems.default	709	698	1.02:1
TableManyItemsPerf.default	2262	2226	1.02:1
TextAreaMinimalPerf.default	582	572	1.02:1
AnimationMinimalPerf.default	446	441	1.01:1
DialogMinimalPerf.default	825	816	1.01:1
EmbedMinimalPerf.default	4467	4432	1.01:1
MenuButtonMinimalPerf.default	1729	1705	1.01:1
ProviderMinimalPerf.default	1018	1007	1.01:1
SplitButtonMinimalPerf.default	4057	4006	1.01:1
StatusMinimalPerf.default	755	746	1.01:1
CheckboxMinimalPerf.default	2906	2909	1:1
DatepickerMinimalPerf.default	5617	5633	1:1
DropdownManyItemsPerf.default	775	772	1:1
DropdownMinimalPerf.default	3263	3262	1:1
FlexMinimalPerf.default	321	321	1:1
FormMinimalPerf.default	485	484	1:1
GridMinimalPerf.default	373	373	1:1
HeaderMinimalPerf.default	406	407	1:1
InputMinimalPerf.default	1330	1329	1:1
LoaderMinimalPerf.default	739	739	1:1
TreeMinimalPerf.default	862	861	1:1
VideoMinimalPerf.default	697	697	1:1
BoxMinimalPerf.default	381	385	0.99:1
ButtonOverridesMissPerf.default	1772	1789	0.99:1
CardMinimalPerf.default	613	620	0.99:1
ListCommonPerf.default	683	692	0.99:1
PortalMinimalPerf.default	184	186	0.99:1
ProviderMergeThemesPerf.default	1698	1715	0.99:1
TooltipMinimalPerf.default	1057	1070	0.99:1
TableMinimalPerf.default	439	447	0.98:1
CustomToolbarPrototype.default	3985	4048	0.98:1
ChatMinimalPerf.default	691	712	0.97:1
TextMinimalPerf.default	387	397	0.97:1
ToolbarMinimalPerf.default	1002	1029	0.97:1
ButtonSlotsPerf.default	580	609	0.95:1
RosterPerf.default	1239	1305	0.95:1
ItemLayoutMinimalPerf.default	1375	1461	0.94:1

[chrisdholt]

Thanks @bheston! Do we need to make this update in the vNext branch for the DI recipes as well?

[msft-fluent-ui-bot]

🎉@fluentui/web-components@v0.22.0 has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release