As we are providing the possibility to refer to a CSS variable from a particular other CSS variable, they are cases where the user might input them with mistake. If this happens there is currently no way to give a visual feedback to make the user ensure he used a correct reference as a value.
The goal of this story is to solve that by introducing a selector that will allow the user to select a value from existing ones.
Given a UX Designer has created basic tokens
When the UX Designer clicks on the color icon
Then the UX Designer get access to the color picker allowing the users to select a color from an existing list of colors (basic colors)
When the UX Designer types "/"
Then a list of autocomplete CSS variables (from same Token Category) appear allowing the user to pick existing values.
- Example: For theme colors you get a list of Color tokens.
When the UX Designer is editing: Theme Colors
Then the user can use references to existing Tokens