[Feature]: tokens are missing success, danger, warning icon colors.

[dzearing]

Library

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

Describe the feature that you would like added

I want to render a danger, success, or warning icon. I need a token color. I can't find any in the v9 tokens.

https://www.figma.com/file/KB9oUjMKen2cKnyPG7RgdS/Design-tokens-superset?node-id=1297%3A14623&t=4OmUrInCBxsck8Rl-0

I see danger alias tokens but I don't see these in typings. Nobody should be choosing a random color token. We can't make consistent ui without something predictable.

Have you discussed this feature with our team

yes we talked about it long ago, but doesn't seem to be fixed. I might be missing things.

Additional context

n/a

Validations

• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[ling1726]

cc @miroslavstastny

[miroslavstastny]

The last time we touched shared color tokens was in #23608.
At that time designers' ask was to use color names (red) instead of semantic names (danger).
Designers just had the policy to use red for danger, green for success and so on.

That should not have been the problem for engineers - they are just supposed to implement the design which uses red, the mapping from danger to red is designers' responsibility.

Another reason was that, for example, red ramp is not used only for danger but also for persona, where it would be confusing to have "danger persona". It would be possible to have both danger and red but that would add redundant tokens which we try to keep as low as possible for performance reasons (see details).

Do you see a use case where engineers are not handed a design and need to decide on their own what colors to use?

After the v9 release, designers asked as whether we can introduce the semantic names for the colors (cc @redongreen) but we have not implemented that yet, as we cannot do breaking changes and cannot regress on performance.

Currently the tokens map 1:1 to CSS variables:

colorPaletteRedBackground1: 'var(--colorPaletteRedBackground1)'

What if we add semantic tokens but, instead of adding new CSS variables, we would map them to existing tokens:

colorPaletteDangerBackground1: 'var(--colorPaletteRedBackground1)'

That would add semantic names, without breaking changes and perf cost. Would that solve your issue?
I see following possible limitations:

1. You would not be possible to override danger tokens without overriding red tokens. But that would not be any worse than it is now.
2. Although we always suggested that the 1:1 mapping is just coincidence and nobody should ever depend on it, this might make debugging more difficult.

[msft-fluent-ui-bot]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[microsoft-github-policy-service]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.