- Notifications
You must be signed in to change notification settings - Fork2.8k
Meaning of number in Foreground1/2/3#33782
-
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. |
BetaWas this translation helpful?Give feedback.
All reactions
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 tabstyles 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.
Replies: 2 comments 3 replies
-
These are color tokens of our design system. |
BetaWas this translation helpful?Give feedback.
All reactions
-
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? |
BetaWas this translation helpful?Give feedback.
All reactions
-
Color information is already in the storybook. And |
BetaWas this translation helpful?Give feedback.
All reactions
😕 1
-
Fair enough. |
BetaWas this translation helpful?Give feedback.
All reactions
-
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 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. |
BetaWas this translation helpful?Give feedback.