Creating a Color Palette with Variables

[00:00:00]
>> So you can create a collection of these variables, and then there's this variables to CSS, I think that's the one I like the most, yeah it's ugly, but it works. So here we can go into colors or all of them, you can choose for the spacing, what units you want.

[00:00:18]
For the colors, what kind of thing things you want, and you can hit generate. And it will create a bunch of CSS variables that are all of those colors, and that you can then kinda bring into your code base. And now if you see that as primary-100, you can reference that CSS variable and it will be primary-100, right.

[00:00:40]
And if you are like, we don't use CSS variables, there's another plugin like I use CSS variables for a trick that I use for dark mode. We don't use the colors directly, we'll have one for like primary button color, right? And if they switch into dark mode, I swap out the values of the CSS variables.

[00:01:00]
So I don't have to do that ugly tailwind thing with dark colon all over the place. And so when you switch to dark mode, all the values and CSS variables change in the light mode colors to the dark mode colors. And we'll see how to do that and generate that with figma as well, so I use CSS variables but for whatever format you use.

[00:01:17]
Yeah, that will create a tailwind theme for you, and there's other ones that do this as well, if you all use prior to CSS variables, we use Sass, right? You can generate the sass variables, whatever you need to do. And that is really easy for that kind of engineering to design collaboration because now they're using consistent values and you don't ever have to type in a hex code again, right?

[00:01:45]
You just basically have the ability to just generate the primitives in your code based on the designs, sweet. So that works for colors, and then once we have those colors in place, they become very easy to use, right? So here we have a frame and I want to change the fill, I just go to libraries right and those are the primary colors that I generated earlier.

[00:02:10]
And then the accidental color that I made while I was fighting with those vectors that I accidentally made for you, now I can just pick one of these colors, right. And if I go ahead and change the variable right, it will then change everything that's referencing that variable.

[00:02:27]
So now, all of a sudden, mergers and acquisitions goes through, we're no longer blue, our color is now green, great. Just go to the primary colors, change them out to green, make corporate happy, act like it took you three months, and then go do something else. Go outside and stare at the sun right, and so those variables become incredibly powerful for that, and we'll kind of play with them.

[00:02:54]
But there's some like really kind of sophisticated stuff you can do once you have them in place. The other thing we saw before is with the numbers, I was typing it an 8, 16 border radius I have been going through. Because I didn't wanna use them before I showed them to you, right?

[00:03:09]
Putting a corner radius of 16 on literally everything we did this entire time right, that can be a value of this is our border radius, right? One of the things that I would do right, is I don't care for the initial colors, what you name them. There's two schools of thought I subscribe to one of them, not everyone agrees with me, you choose your own adventure.

[00:03:35]
One is to create a color palette of red, blue, yellow green so on and so forth, right? We're all gonna end up at the same place, I don't do that, I'll show you, I have this little design system, worked as example. Where instead I have it called, you can kind of see over here.

[00:03:59]
So I've got my primary, secondary and then I have an accent color, but then I've got information success, warning, danger, some, but they're full color palettes. Even that because we did the whole use red and yellow all through our code base, right? And then all of a sudden the app that I work on has workflows that can be in a status of running, canceled, terminated, whatever.

[00:04:35]
Cool, let's say you want to change all the terminated ones from red to like, deep orange color, you use BG dash orange everywhere, good luck, right? Yeah, and there's so many oranges, there's nine hundreds plus 50 and 950 so 11 colors, you might not need every shade, right.

[00:04:58]
And if you have every shade guess what it's gonna happen you're gonna use every shade It right, and then doing refactoring is hard. You probably want a smaller set of colors, but also if I wanna change all the primary buttons from blue to green, I can't just change green, right?

[00:05:11]
It'd be better if I had a reference to hey, this is the color of our primary buttons. This is the color of our secondary buttons, this is the color of our destructive buttons, right? And so what you can do, is you can have your initial color palette, right?

[00:05:28]
In fact, let's go back over to this one and I'll kinda show you the variables in here. You can have this and you can see that I've got colors and component colors, colors is my entire color palette. What you're gonna do is once you have this entire color palette, you're gonna select all of them.

[00:05:47]
And you're gonna right-click and you're gonna edit, you're not gonna hit delete, that's rude, you're gonna hit hide from publishing, right? You're gonna have an entire color palette and then you're never gonna speak of it again, right? What you're gonna do is if you look over here, I've got a separate collection of variables, right?

[00:06:09]
And you can see if I look at button, so this is the default color of a primary button, right? This is the hover color of a primary button, this is the active color, this is the label of a primary button. My variables are named for what they're used for, and they reference a color, right?

[00:06:33]
And what this does is create a really powerful abstraction, if design decides, yeah, purple still our brand, but a different purple, right. Then you go ahead and you change their primary color to a different shade of purple, everything pointing at that purple, right then gets the new purple.

[00:06:49]
If on the other hand, it's just the primary buttons are going to now point to our blue color instead, you can go in here and change those and the designs get that effect, right. And so you can do that at any given point by, let's say in here we'll create a color, I can put in a hex code, right, or where'd it go?

[00:07:13]
If I click on it I can go to libraries, I can alias it to another color, right? So if I need to change all the primary colors from one purple to another purple cool, and then everything pointing at primary 500 gets that effect. If I just need to change the primary buttons right, then I can go change those values as well, right.

[00:07:32]
And so know that way you're not actually referencing the real colors, you're only using the semantic names, right? Hey, I don't know like this aliases to some other color but this is a primary button it should be primary button blue, right? And then you can say the same thing like input fields are the worst, right?

[00:07:49]
Because you want all your input fields look the same, but one knows that there's not just an input field. There's an input field, there's a text area, there's a select right, and they all should look kind of the same. So you can have the semantic values point there and then that point Points to a color, right?

[00:08:04]
The same works here where I've got tokens, which are just a very curated set because I don't need that many sizes of rounded borders in my application, right? I say that as somebody who has an application with that many rounded borders and now needs to go undo it, right?

[00:08:19]
Some of this is like referenced by holes that I've dug for myself but these are the overall tokens but then that means for a button label or input padding, right. Now if I want to change all of the inputs, I changed what this variable points to. Or if I changed my entire spacing system to be based on 16 point equals one ram to something else, I can change those underlying tokens.

[00:08:47]
So you can have variables point other variables, and then what you would do is when you did either the variables to CSS or whatever plugin makes you the happiest. This one seems fine to me, you do if you just run it, let's say component colors and hit generate.

[00:09:06]
It does point at these CSS variables, which means I would have to have those CSS variables exposed in my code or I hit Ignore aliases. And now, my CSS variables are the hex codes, but they are pointed to one source of truth, right? Hey, I don't this is just an alert danger background, those values are generated from the design system, right.

[00:09:34]
If the designer has changed your mind, generate me a new one of these CSS variables, I drop it in, I act like it took me a week and I go shop for guitars. Now, how do we actually use the variables for various things? That's a great question, I'm glad that you all thought it with your minds, let's see, do I have some variable?

[00:09:55]
I've got this cozy padding, that's scoped to I think everything at this point, you can just see places that we can use it. So draw a frame and the colors we saw, it's just in libraries but what's super interesting is now in a lot of places, you will see this funny little, like Hexagon.

[00:10:16]
And hexagon, as we all know, means code right, blame node js, I don't make the rules. So now you can see that I can just instead of putting 8 or 16, I can put a reference, now the name of this variable is problematic. But I could put a reference to this value, and then that eight will be in there.

[00:10:37]
And if I change the variable, everything like that references that border radius in this case, light will change to the new value, right? Great for designers, great for us right, because we're generating code based on those variables, right. And so our code just yeah, we just dumped in the new variable values and ideally your UI changes as well.

[00:10:59]
There are some places where it's not as obvious I'm trying to think of one off the top of my head. There are some places where you have to right-click on the thing and then you'll see apply variable, so sometimes you'll see a little diamond, we'll find it together.

[00:11:14]
I think stroke is one, stroke you don't see the diamond, but you got to right click on it. Come on, you hit apply variable right, and there it is, I don't make the rules, I don't design these things, sometimes it's there, sometimes it's not. There are some limitations, the colors only work for single colors, if you alias are variable, you can't be that variable 50% opacity not gonna happen, great against is still gotta use styles.

[00:11:42]
There's a lot of stuff you still gotta use styles for where they work they're super powerful.