Meaning of number in Foreground1/2/3

[JohnGoldsmith]

In color token naming Foreground, Background and Stroke have a number suffix. Can anyone help me in understanding what the pattern for the number is please? ie is 1 always lighter than 2, and 2 lighter than 3 and so on? I've hunted through but couldn't find any documentation on this.

[ValentinaKozlova]

These are color tokens of our design system.
Here's the colors: https://react.fluentui.dev/?path=/docs/theme-colors--docs
Also, you can find all the tokens in dev tools tab styles for .fui-FluentProvider* class when using our components.
For background the 1st one is white, the lightest and the 5th one is darkest. And for the foreground the 1st one is the darkest.

[JohnGoldsmith]

That's great. Thanks very much for the insight @ValentinaKozlova. Would you welcome a PR to update to that docs page to reflect the information?

[ValentinaKozlova]

Color information is already in the storybook. And styles in dev tools are visible for every engineer who works with components

[JohnGoldsmith]

Fair enough.

[r-k-b]

We've also found the token usage unclear.

Instead of picking tokens by their purpose, devs & designers have ended up picking tokens based on what color the token has in a particular theme.

Eg, they've picked colorNeutralForeground2 to use as a component's background color, because in light theme it is closer to the designer's specified background color than any of the background color tokens.

If there were a guide showing where to use which tokens, that would be amazing.

For now tho, we'll try poking thru Fluent source code to find similar-ish components, and see what tokens those have used.