Adding Utilities

[00:00:00]
>> We created our color palette, we created our typography scale, let's actually go build those in our code. Inside of source create another folder, we're gonna call this utils, We're gonna have three files we're gonna create colors.js, we're gonna add typography, typography that was hard to type, and we're going to add themes.js.

[00:00:24]
We'll get to themes in just a little bit but might as well create the file, so we've got colors, themes and typography.js. Let's start with colors, So, for your colors, I had mentioned this before someone asked a great question about how you name your colors, I'm gonna call mine blue 100, red 100 all the way up through 500.

[00:00:51]
And this is a great time for you to actually have the website open because if you want, you can go and actually grab the code I've already written for you. So this is on the adding utilities page, there's a code snippet here that has all of my values, you might just wanna go grab this, it's gonna be the easiest.

[00:01:08]
Okay, so copy and paste that in and you can replace your hex codes with whatever value that you want like your primary color that you just designed, but this is mine. So, you're welcome to use mine, you're welcome to use yours, whatever you prefer. So we've just got some constants here, they're all being exported, and it's just an object where the key is a value of 100 and the value is a string, with the hex code in it, okay?

[00:01:32]
So just copy that over you can change your colors later, So we've got some colors, let's go add some stuff in typography.js. Let's get rid of this we'll make this full screen for a moment here. So if I open typography.js, the first thing I wanna do is I have my primary font, so our font family, so export const primary font, I'm gonna call mine again was '"Roboto Mono", Monospace'.

[00:02:11]
So if you don't know like what this syntax means and in the past like if you haven't worked with this, basically this is saying look for this font and if you can't find it default to a monospace font. So now what we're gonna do is we're gonna use our typeScale so you can again grab us from the notes if you'd like, I'm just gonna type it out so typeScale.

[00:02:30]
Again, give me an object where the key is gonna be like header1, header2 and then your values at 1.8rem. Header2, this is gonna be your type scale that you just created in figma, so let's just take two minutes I'm gonna type mine out, we can do it together, just copy over your typeScale 1.6.

[00:02:50]
Again, you're welcome to use mine if you prefer, Yeah if you're still typing it in, again you can go grab it, it's right on the course site, so you're welcome to go do that. And I also just wanna say, and this is how I'm teaching it, this is how I might do it, but there are many different ways that you can build these utility functions, and design systems in general.

[00:03:11]
So if you find a better way, please let me know and I would love to share different tactics for that.