Fluent styles should use palette colors

[mikewheaton]

Environment Information

• Package version(s): Latest
• Browser and OS versions: N/A

Description

The Fluent styles include colors like CommunicationColors.primary and NeutralColors.gray160, which are not themeable. These should be replaced with palette.themePrimary and palette.neutralPrimary.

We weren't able to do this before because buttons didn't accept a style function, but it should now be possible thanks to #7748.

Next steps

• @betrue-final-final to update the designs to remove instances of Gray120, Gray110, and Gray80, which aren't in the neutral palette.
• Update all button components to accept style functions, so we can access the palette.

Priorities and help requested:

Are you willing to submit a PR to fix? Yes

Requested priority: Normal

Products/sites affected: Outlook has run into theming issues

[Vitalius1]

@mikewheaton by:

Update all button components to accept style functions, so we can access the palette.

... you mean update the fluent style objects for buttons to be style functions?

[Vitalius1]

1. We are updating gray120 to use the palette.neutralSecondary which is mapped to gray130.
2. Almost for sure, we are updating the gray80 to gray90 but waiting on the designers' approval.
3. gray110 is used in Button so @betrue-final-final will have to review this carefully... so waiting on his decision.

[Vitalius1]

For gray110 talked to Ben and probably we will bring the neutralSecondaryAlt palette slot for this color as there is too much of a gap in between gray90 and gray130 for the closest mapped colors in the palette and gray110 fits perfectly within that slot.

[Vitalius1]

I do have a branch started for this issue and almost have it all done... just waiting on some final decisions.

[msft-github-bot]

🎉This issue was addressed in #8098, which has now been successfully released as @uifabric/[email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-github-bot]

🎉This issue was addressed in #8098, which has now been successfully released as @uifabric/[email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-github-bot]

🎉This issue was addressed in #8098, which has now been successfully released as [email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site