feat: add neutral-contrast-fill color recipe to the design system

[khamudom]

Pull request checklist

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

Description of changes

This recipe is an inverted background color. In the light theme, the recipe color is dark, and in the dark theme, the recipe color is light.
There is also neutralContrastForegroundRestBehavior to use on the foreground color.

Focus areas to test

(optional)

[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 263474e:

Sandbox	Source
Fluent UI Button	Configuration
codesandbox-react-template	Configuration
codesandbox-react-northstar-template	Configuration

[size-auditor]

Asset size changes

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

Baseline commit: fe4959d22fec3382fa743b396f671b1b63a26b9e (build)

[fabricteam]

Perf Analysis

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	853	823	5000
BaseButtonCompat	mount	900	885	5000
Breadcrumb	mount	42979	43577	5000
Checkbox	mount	1492	1522	5000
CheckboxBase	mount	1244	1238	5000
ChoiceGroup	mount	4683	4722	5000
ComboBox	mount	981	983	1000
CommandBar	mount	10018	10104	1000
ContextualMenu	mount	6149	6023	1000
DefaultButtonCompat	mount	1136	1125	5000
DetailsRow	mount	3559	3558	5000
DetailsRowFast	mount	3607	3493	5000
DetailsRowNoStyles	mount	3390	3492	5000
Dialog	mount	1434	1437	1000
DocumentCardTitle	mount	1819	1832	1000
Dropdown	mount	3245	3255	5000
FocusTrapZone	mount	1752	1768	5000
FocusZone	mount	1824	1803	5000
IconButtonCompat	mount	1733	1747	5000
Label	mount	334	337	5000
Layer	mount	1774	1741	5000
Link	mount	467	469	5000
MakeStyles	mount	1900	1942	50000
MenuButtonCompat	mount	1479	1464	5000
MessageBar	mount	1999	1988	5000
Nav	mount	3160	3213	1000
OverflowSet	mount	1010	1036	5000
Panel	mount	1400	1380	1000
Persona	mount	866	845	1000
Pivot	mount	1396	1400	1000
PrimaryButtonCompat	mount	1268	1292	5000
Rating	mount	7383	7444	5000
SearchBox	mount	1288	1300	5000
Shimmer	mount	2520	2478	5000
Slider	mount	1919	1900	5000
SpinButton	mount	4942	5008	5000
Spinner	mount	416	411	5000
SplitButtonCompat	mount	3077	3103	5000
Stack	mount	486	482	5000
StackWithIntrinsicChildren	mount	1498	1481	5000
StackWithTextChildren	mount	4358	4396	5000
SwatchColorPicker	mount	10966	10046	5000
Tabs	mount	1367	1363	1000
TagPicker	mount	2718	2739	5000
TeachingBubble	mount	11427	11554	5000
Text	mount	391	415	5000
TextField	mount	1317	1354	5000
ThemeProvider	mount	1394	1403	5000
ThemeProvider	virtual-rerender	587	582	5000
ThemeProviderNext	mount	2190	2189	5000
Toggle	mount	778	793	5000
button	mount	655	668	5000
buttonNative	mount	110	107	5000

Perf Analysis (Fluent)

Perf comparison

Status	Scenario	Fluent TPI	Fabric TPI	Ratio	Iterations	Ticks
🦄	Avatar.Fluent	0.17	0.5	0.34:1	2000	341
🦄	Button.Fluent	0.11	0.2	0.55:1	5000	572
🔧	Checkbox.Fluent	0.65	0.33	1.97:1	1000	648
🎯	Dialog.Fluent	0.16	0.21	0.76:1	5000	807
🔧	Dropdown.Fluent	3.1	0.4	7.75:1	1000	3101
🔧	Icon.Fluent	0.14	0.06	2.33:1	5000	695
🦄	Image.Fluent	0.08	0.13	0.62:1	5000	391
🔧	Slider.Fluent	1.6	0.45	3.56:1	1000	1601
🔧	Text.Fluent	0.08	0.03	2.67:1	5000	385
🦄	Tooltip.Fluent	0.12	0.9	0.13:1	5000	576

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AttachmentMinimalPerf.default	180	164	1.1:1
IconMinimalPerf.default	729	663	1.1:1
ButtonMinimalPerf.default	192	176	1.09:1
TableMinimalPerf.default	438	414	1.06:1
AttachmentSlotsPerf.default	1208	1166	1.04:1
ChatDuplicateMessagesPerf.default	388	374	1.04:1
GridMinimalPerf.default	384	370	1.04:1
RadioGroupMinimalPerf.default	467	447	1.04:1
Text.Fluent	385	371	1.04:1
AnimationMinimalPerf.default	421	407	1.03:1
DividerMinimalPerf.default	385	372	1.03:1
FlexMinimalPerf.default	323	314	1.03:1
SegmentMinimalPerf.default	379	369	1.03:1
TableManyItemsPerf.default	2049	1999	1.03:1
ToolbarMinimalPerf.default	1013	986	1.03:1
TooltipMinimalPerf.default	870	847	1.03:1
TreeMinimalPerf.default	823	796	1.03:1
AlertMinimalPerf.default	308	302	1.02:1
AvatarMinimalPerf.default	208	203	1.02:1
CarouselMinimalPerf.default	493	483	1.02:1
FormMinimalPerf.default	444	435	1.02:1
HeaderSlotsPerf.default	801	784	1.02:1
LayoutMinimalPerf.default	434	424	1.02:1
ListNestedPerf.default	580	566	1.02:1
MenuMinimalPerf.default	902	882	1.02:1
TextMinimalPerf.default	377	369	1.02:1
TreeWith60ListItems.default	189	186	1.02:1
Icon.Fluent	695	683	1.02:1
AccordionMinimalPerf.default	168	167	1.01:1
ButtonUseCssPerf.default	829	822	1.01:1
ChatMinimalPerf.default	645	640	1.01:1
DialogMinimalPerf.default	793	787	1.01:1
InputMinimalPerf.default	1292	1274	1.01:1
LabelMinimalPerf.default	434	428	1.01:1
ListCommonPerf.default	669	662	1.01:1
LoaderMinimalPerf.default	741	735	1.01:1
PopupMinimalPerf.default	713	707	1.01:1
PortalMinimalPerf.default	175	174	1.01:1
RefMinimalPerf.default	255	252	1.01:1
SkeletonMinimalPerf.default	389	387	1.01:1
StatusMinimalPerf.default	733	728	1.01:1
Avatar.Fluent	341	338	1.01:1
Button.Fluent	572	565	1.01:1
Dialog.Fluent	807	801	1.01:1
ButtonOverridesMissPerf.default	1699	1695	1:1
CardMinimalPerf.default	575	573	1:1
CheckboxMinimalPerf.default	2873	2872	1:1
DatepickerMinimalPerf.default	47230	47314	1:1
EmbedMinimalPerf.default	4351	4347	1:1
HeaderMinimalPerf.default	382	381	1:1
ImageMinimalPerf.default	398	398	1:1
MenuButtonMinimalPerf.default	1590	1594	1:1
SliderMinimalPerf.default	1613	1613	1:1
SplitButtonMinimalPerf.default	3752	3766	1:1
Checkbox.Fluent	648	649	1:1
Dropdown.Fluent	3101	3103	1:1
Image.Fluent	391	390	1:1
Slider.Fluent	1601	1601	1:1
Tooltip.Fluent	576	576	1:1
BoxMinimalPerf.default	380	383	0.99:1
ButtonUseCssNestingPerf.default	1076	1087	0.99:1
DropdownManyItemsPerf.default	717	724	0.99:1
ListMinimalPerf.default	523	526	0.99:1
ProviderMergeThemesPerf.default	1625	1647	0.99:1
CustomToolbarPrototype.default	3722	3762	0.99:1
ButtonSlotsPerf.default	591	602	0.98:1
ItemLayoutMinimalPerf.default	1245	1268	0.98:1
ChatWithPopoverPerf.default	445	457	0.97:1
DropdownMinimalPerf.default	3047	3136	0.97:1
ListWith60ListItems.default	620	642	0.97:1
RosterPerf.default	1157	1187	0.97:1
ProviderMinimalPerf.default	947	980	0.97:1
ReactionMinimalPerf.default	410	428	0.96:1
TextAreaMinimalPerf.default	497	516	0.96:1
VideoMinimalPerf.default	635	660	0.96:1

[msft-fluent-ui-bot]

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

Handy links:

• Release Notes
• Official NPM Release