Okay, let's translate the design tokens from the Figma file to our tailwind theme. All right, and like I mentioned, we're going to add a custom font family and then custom colors. And we're going to start with the colors. So if I bring the sidebars here and inspect the color here, that is our primary or highlight color, you can see the hex code of #ECA749, which I will copy in my clipboard. And we will customize the tailwind theme in the CSS file.

which I will copy in my clipboard. And we will customize the tailwind theme in the CSS file directly inside a @tailwind theme block. So I can add a custom color by defining a CSS variable called --color-whatever. And here, let's call that mainColor like this and set the hex color to the value found in Figma. So just doing that should give us access to utility classes like text-pixel,

So just doing that should give us access to utility classes like text-pixel, background-pixel and so on. So in the index.html, I'll have a little square with the size of eight and we will add the class of bg. And if I go PIX, you should see the pixel color and there it is. Nice. And here's the representation of that color. Very nice. I will just add a little padding to the body p-2 and

Very nice. I will just add a little padding to the body p-2 and because we're going to try other colors here, let's have a flex container with a gap-2 and I'll wrap our square in here and let's copy it a couple of times more and maybe just add some empty 2 as well. So we should see three yellow boxes side by side and here they are. So now we're going to use the other two boxes.

by side and here they are. So now we're going to use the other two boxes to preview the other two colors that we want to codify. One of these colors happens to be the text color here. So if I zoom out, you can see that a lot of the UI text has the same color, which is not white, but where is it down here? So we're going to copy that EE color and we are going to add, uh, yep, let's call that one pixelLight.

and we are going to add, uh, yep, let's call that one pixelLight. And the last color we want to add is the color used in the backgroundColor, which is this 009909. So I will copy that as well. And as soon as I press enter copilot, we'll know our one pixel doc, of course, well done. Which means we are in a good naming structure here. Uh, and I'll save this.

Which means we are in a good naming structure here. Uh, and I'll save this. So these are the three main colors that we are going to translate from the design. And I believe we can pretty much do the entire UI by just using these colors plus a little bit of transparency on certain occasions. Alright, and let's go test them out in the index.html file. So here I'll have bg-pixel-light and here bg-pixel-dark.

So here I'll have bg-pixel-light and here bg-pixel-dark. This is looking good to me. And here's our very fancy style guide that shows the three custom colors available in the theme. Okay, next, let's tackle the font family. Before I do so, I will remove the class attributes on the h1 here. And so this custom font that we are looking at is actually called departure-mono.

And so this custom font that we are looking at is actually called departure mono. Now I happen to already have that font on my computer, so I will create a public folder here and inside of it we are going to have a fonts directory. And I'm going to drag the two font files, the .woff and .woff2 fonts inside the fonts directory. And now for this to work I need to add a little bit of CSS. So I will paste some code and talk through it. We basically have a @font-face declaration.

So I will paste some code and talk through it. We basically have a font-face declaration. The font-family name is called departure-mono, and then it points to the two source files, uh, the .woff and .woff2 that we've just added here. Now, departure-mono has a single font-weight of 400. So we set the font-weight to 400 and font-style to normal and that's all we need to do. And perhaps just to make sure that this code goes before tailwind.css,

And perhaps just to make sure that this code goes before tailwind utility CSS, we can wrap this in an @layer base. So it's going to be placed inside the tailwind base layer, which comes before the component and utilities. Okay, great. And with that, the next thing we want to do is define a custom font family up here in our theme. So let's call that one fontPixel, just like we had the colorPixel. And this is going to be departureMono with a fallback.

just like we had the color pixel. And this is going to be departure mono with a fallback to monospace since it's actually a monospace font. So with that, we should be able to give a class of font-pixel to any element. Let's try that here. Class font-pixel and it should come up. Yep, it does. And whoops, we've got an error missing semicolon, which explained why my code wasn't formatting.

we've got an error missing semicolon, which explained why my code wasn't formatting. So where is that semicolon missing? Oh, here. The second URL should have a closing semicolon here. And now this is going to format properly. Yep. And look at this. Here's the departure mono font in action. But remember that we want to use that departure mono font on absolutely everything. So instead of putting the class on the h1, we could put it on the body or even the html tag,

So instead of putting the class on the h1, we could put it on the body or even the html tag, but we can also tell Tailwind CSS that the default font family should be using this departure mono font. So let's do that. Okay, so one more time, I'm going to remove the class on the h1 tag. And like I said, we could put font-pixel here and it would flow through the whole project. But another thing we can do is override the --

and it would flow through the whole project. But another thing we can do is override the --default-font-family in the tailwind theme. And here, use var(--font-pixel) which points to these fonts. And with that setup, remember we've removed the class on the h1, but the h1 is still going to use that font because now we have configured the entire tailwind project. If I search for font-family to have a default font family, you can see this variable hus here.

If I search for fontFamily to have a default fontFamily, you can see this variable hus here and then merge with the fallback value. So now we have set this to be our departureMono. And so the entire site is inheriting that font, which is why we see it here and everywhere. Okay, the last thing we want to do before we are ready to start building is set up this dark background. Every page of the whole app has this dark

this dark background. Every page of the whole app has this dark background with light text. Uh, it's basically dark mode only. And so let's configure that real quick. So what we could do is on the body tag, which wraps the whole project, have the bg of pixel-dark and the text of pixel-light. So that should configure every background surface to have this color and every text.

So that should configure every background surface to have this color and every text to have this color throughout the project. And yep, this is working perfectly. Now we're going to take this dark scheme one step further and we are going to indicate to the browser that this is indeed a dark scheme. So watch this. I'm going to cut out the background and text color we've just added. So they're in my clipboard, but I've removed them.

and text color we've just added. So they're in my clipboard, but I've removed them. So now the UI is back to a white background and black text, but I will now add a meta tag. This one is going to have a name of color-scheme and the content is going to be just dark. And when I save this check, what happens? We now have browser styles. User agent styles apply a dark scheme to the background and foreground of surfaces of the application.

User agent styles apply a dark scheme to the background and foreground of surfaces of the application. And so this kinda looks like the colors we want, but they're not exactly the colors from our Figma design. These are the default user agent colors set for the dark scheme. So we can still, and that's why I will bring back these two colors that we had set the background to pixelDark and the text to pixelLight.

that we had set the background to pixel dark and the text to pixel light. So we back to what we had before. But now the browser will understand that we are in a UI that is intentionally dark scheme. And so certain elements like the scroll bar or button or form elements will be styled accordingly without any effort on our end. So it might fix some little intricacies that we forgot to style for a dark version of the ui.

So it might fix some little intricacies that we forgot to style for a dark version of the ui. Uh, the browser will by default try to apply everything as if it had a dark background and light foreground because we've set it up that way. Alright folks, the time has arrived. We have a dev server that runs Tailwind CSS. We have customized our tailwind theme with custom colors and a custom font. Everything is working.

with custom colors and a custom font. Everything is working. We've also set our UI to dark scheme, and right now we are ready to build. So in the next lesson we're going to start building, starting with the logging screen. See you there.