[Bug]: V9 Theme Designer does not use key color value in generated palette

[joselarios]

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: MacOS 13.4.1
    CPU: Apple M1 Max
    Memory: 64 GB
  Browsers:
    Firefox: 116.0.2 
    Google Chrome: 115.0.5790.102
    Microsoft Edge: 115.0.1901.203

Are you reporting Accessibility issue?

None

Reproduction

https://react.fluentui.dev/?path=/docs/theme-theme-designer--page

Bug Description

Actual Behavior

When the Key color value is set, the generated palette does not include this Key color in any of the brand ramp values.

Expected Behavior

When a Key color value is set, the generated palette should include this value as one of the brand ramp values. I believe the Key color value should be the "Teams 80" value.

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[micahgodbolt]

This is by design, because its not always possible to use that key color for the primary value due to how well it contrasts with the text.

So the best we can do is create an array of color values that passes through that key color, and find evenly spaced values across it that meet required contrast ratios.

The produced palette is just a suggested starting point, so feel free to adjust the 16 palette values being passed into the theme function.

[spmonahan]

Closing this since Theme Designer is working as designed.