Replacing Hardcoded RGB Channel Values with Function Calls
We're going to use our multi-cursor skills once again.
Start with the :root
level variables, changing their values to calls to getRgbChannels
passing in themes.base
with the shade name:
":root": { "--primary-50": getRgbChannels(themes.base["50"]), // ...100-800 "--primary-900":
Transcript
0:00 We're going to use our multi-cursor skills, once again, here. We'll start with just the root level variables, select all these and go getRgbChannels. We want to reach for the themes object and then the base key. Here, we want to grab the value that is matching the name of the variable.
0:24 Now, I'm going to copy these 10 lines here and the base scope will be exactly the same values. Further down, the rainforest needs to take the rainforest colors. Finally, the last one needs the candy color.
0:39 I will try to save with the base color just to verify that our colors are being set by these. Yeah, you can see the candy now has the base color. When I change this to candy, it's going to take the correct candy color.
0:53 Obviously, there's a lot of repetition here, but we've done something great. We are reading the values from the themes object, which gets us one step closer to allow users to define their own themes object and pass it to the plugin. Then have the plugin read from that theme to generate the correct CSS variables and utility classes.