freenowtech
Introduce semantic color variables
To keep the design system and the designs in Figma in sync as well as maintaining a clear structure of which colors are used where, we want to add semantic names for colors instead of the actual color names.
Current Situation
We export the colors by their names (i.e. AUTHENTIC_BLUE_900) and use these variables in the components as well.
Proposal
Multiple steps will be necessary to transition from the color names to semantic names, starting with adding additional exports for the new semantic names of colors (i.e. text-primary). These colors can then be used, and should be encouraged to, by the projects. In the next step, the new semantic colors are used in the components of the design system, slowly removing the actual names. In the last step we remove the existing actual names, which will result in a breaking change.
Plan
- [x] #128
- [x] #202
- [ ] #203
- [ ] #204
- [ ] #207
- [ ] #286
Usually the color tokens in various designs systems are not semantic and is just manages brand colors (red, grey, etc.). But some modern systems try to define several levels of abstraction for tokens (for example Orbit):
- Values - These are the raw values in code such as color values (HEX, rgba), absolute and relative length units, percentages, numbers, etc.
- Base Variables - Base variables are the primitive values in a design language, represented by context-agnostic names. These can be directly used, and are inherited by all other token types (think “purple-500”).
- Common Tokens - Common tokens relate to a specific context or abstraction. Common tokens help communicate the intended purpose of a token and are effective when a value with a single intent will appear in multiple places (think “color-action”).
- Component Tokens - Component tokens relate to a specific component using them. Their scope only targets the component they belong to. Component tokens communicate not only the targeted properties but also their states.
So we basically have 2 core levels:
- Options - that represent the actual values
- Design Decisions - How to apply options (like $color-neutral-20) to contexts (like a conventional dark background color).
If you think that we have too many tokens - we can try to make some of them more generic.
I've updated the initiative and added steps we need to follow to fully migrate to semantic colors
Provide semantic colors also as props and not just inside styled-components functions. Internal discussion: message
Figma tokens video: https://www.youtube.com/watch?v=0lH_FTHtvVo&list=PLXDU_eVOJTx4EuiHlITE44wngcErxom6S&index=19