Color Variables - The magic using opacities
What if i told you there is a way to change all colors in a design system with just a few clicks. Crazy ah. Actually there is one. Color variables in a design system become a headache in our industry. Changing all color pallets for primary, secondary, neutral etc. And there is also light and dark theme. If all components are connected with the color variables you are lucky my friend. Follow me and i will show you a better way, an easier way. Let's do it!
How it Works in most design systems out there.
In a design system usually there are the mapped variables which are connected to the brand variables. Sometimes we also have alias but we will talk about this in a different tutorial. Here is small example.
Our goal.
Reducing the amount of brand colors to only four in this case and adjusting the mapped colors to use only opacities of black and white. In brand colors we always keep the 500 which are our base colors. We can also remove the neutral color in brand if it's not going to be used on images.
How to use
Lets take a button and adjust it to work based our new color system.
