All right, if you're getting the drift, it is time to switch gears and start to do some styling. So we're going to take the style guide and try to codify it in our telling theme. I've got this style guide file open here, and so the first part here, the dimension we don't really care. We're going to make a site responsive for any screen sizes as the comment says here. But then we have colors here. It looks like there are two primary colors, red and green, and then a shade of

But then we have colors here. It looks like there are two primary colors, red and green, and then a shade of rose colors. So these variations are probably going to be used for hover states and things like that. Telling CSS comes out of the box with a bunch of colors, including a rose palette. So there are two schools of thoughts here. We could override the rose palette with this one. Or we could have a special namespace for all the front end mental colors, maybe

We could override the rose palette with this one. Or we could have a special namespace for all the front end mental colors, maybe dash FM dash rose. Or we could completely wipe out tailwinds color palettes and then only have the reds, the green, and the roses. So let's take a look at the design. I've pulled up the image here so we can reference to it. And to me, it does look like there is only shades of roses. And then green, you can see the green here on the little icon. But other than that, I feel like we actually could get away with wiping out all

And then green, you can see the green here on the little icon. But other than that, I feel like we actually could get away with wiping out all the colors and only using, I imagine these are shades of roses. I'm honestly not quite sure. It's hard to tell without knowing what the colors look like. So what I think I will do is start by having a dash FM for front end mental namespace and add these colors. And then if we can pull out all the colors from this UI with just these,

and add these colors. And then if we can pull out all the colors from this UI with just these, we're going to wipe out the whole color space or the color palette from telling default theme and only have these colors. OK, we're using telling CSS version four, so the process should be pretty straightforward. I will copy all of that and I will go in my app that CSS file, which is where the telling theme is defined. So you can see we importing telling CSS and this is Laravel specific stuff to

the telling theme is defined. So you can see we importing telling CSS and this is Laravel specific stuff to make sure that these files are considered by the just in time engine. And then there's a little bit very little customization of the telling theme. Basically, the only thing that changes is that font and we actually are going to use this to use our red hat text font. I think it's called, but before we do this, let's deal with the colors. I will paste what I had in my clipboard for reference and this is very nice to

I think it's called, but before we do this, let's deal with the colors. I will paste what I had in my clipboard for reference and this is very nice to have this preview. It's a VS code extension called colorize and already I feel like this is all the colors I'm going to need for the UI. Let's take another look and yep, it really looks like so. So I'm going to change my mind here and decide to wipe out all of the telling default colors and only have our style guide colors.

default colors and only have our style guide colors. So it's going to feel like a bespoke CSS framework just for this project. I genuinely do not remember how to reset the colors, but let's go check the documentation. I think we need to set the colors dash star to initial or something like this towards the bottom. It's going to show us how to do this overriding default colors. We don't want to override. We want to, there we go, disable the default colors.

We don't want to override. We want to, there we go, disable the default colors. Yep, indeed, we got the dash star initial and I think that color dash star is what we need. There we go. This is what I want. So let's comment that out since it's not valid CSS and we will start by removing all the colors with this color dash star initial. Okay, so now that I've done that we should not have any colors available in

with this color dash star initial. Okay, so now that I've done that we should not have any colors available in tailwind. So if I was to add a class here on the h1 of text dash blue, you can see no auto complete suggestion is coming, which is a good sign or a bad sign, I guess. And if we try text blue 500, the text will remain black. So the class is applied. You can see it here, but it's not resolving to anything and just to prove that I'm not lying

You can see it here, but it's not resolving to anything and just to prove that I'm not lying if I was to comment that out and save, now a text is going to be blue and the auto complete suggestion comes up with all possible colors if I scroll past the sizes. All right, so let's remove that class, bring the color reset back and now we're going to try convert these with fancy multi cursor action into color definitions. So I will uncomment what I just commented, make sure it's all indented the same .

So I will uncomment what I just commented, make sure it's all indented the same . And with multi cursor, like that, I am going to go dash dash color dash, the name of the color and let's add a semicolon at the end. Then I guess I need to fix all the roses to have a dash. And that should work like this, but I want to have a lowercase R here. And let's quickly have lowercase red and lowercase green like copilot figured out. So now the beauty of that setup is that whenever we try to apply a background

out. So now the beauty of that setup is that whenever we try to apply a background color, text color, color, whatever, we should only be presented these options, which makes it feel bespoke. Like I said, check this out. Let's add a class once again and go text dash. And if I try blue, there will be nothing. But if I go rose, you can see our 50 hundreds, 30045 and 900 and same with red and green.

But if I go rose, you can see our 50 hundreds, 30045 and 900 and same with red and green. That's pretty cool. Okay, here, instead of just having some text, what do we have a little tile, a little square for each color, just to basically have a visual style guide instead of a mark down file style guide. So let's have a div of that flex and then gap maybe four and inside of it, I will have

So let's have a div of that flex and then gap maybe four and inside of it, I will have a bunch of squares. So size 10 and then rounded LG for no reason. And then let's go BG red for the first one. And then the second one will be BG green and let's have the roses too. So we have BG rose 50 100, what else have we got three, four, five, nine, 300, 400, 500 copilot. Give me the last one.

copilot. Give me the last one. Not 600. Come on. You had one job. It was 900. So you can already see our style guide, the swatches he represented. And that's pretty good. But I need some padding here. So my brain can survive.

But I need some padding here. So my brain can survive. So here, let's go P dash eight and I'll change the size of each of these to 24. Let's make them big. All right. I like this. And you know what? If I bring the design over here, this gives me a lot of confidence. You can see the red for the buttons. The green, I think the only place I see it is on that icon here.

You can see the red for the buttons. The green, I think the only place I see it is on that icon here. And then we have all these shades of roses that I use for text. It looks to me like the bed of removing all of tailwinds colors in favor of just the style guard colors was the right one. All right. So we good with the colors. The next thing we want to do is bring that custom font, red hat text. I think it's called.

The next thing we want to do is bring that custom font, red hat text. I think it's called. So back in our style guide, if I go here, you can see that is the default font size. We don't need to do anything, but we want to add the font family red hat text. Like I mentioned, it's available on Google fonts and I will use that. There it is looking pretty nice and there's a bunch of weights. So let's get the font. And let's get the embed code. All right.

And let's get the embed code. All right. So we are going to copy all of that. And for this, we can go in a welcome that blade that PHP file and quick note, we could have a layout for all pages and then have just the body content here for this page. But we're going to build just one page. So let's do everything in here. So in the document head, I will paste the Google fonts links like that.

So let's do everything in here. So in the document head, I will paste the Google fonts links like that. So the font family name is red hat text. So in our theme, I think we can do it straight away here, change these to red hat text. And in our template, let's bring a quick bit of text testing the new font. And let's make it nice and big class text for XL whoops needs two S's. And yeah, to me, this absolutely looks like a custom font. And let's just make 100% sure that it is. So if I go to computed and down here, look for the font family, it is indeed

And let's just make 100% sure that it is. So if I go to computed and down here, look for the font family, it is indeed red hat text. All right. Looking good. Actually not looking great, but we are in a good shape. The last thing I think we could do is honor the font weights needed for six and seven. Here I'll reference tailwind CSS docs one more time, font weight.

seven. Here I'll reference tailwind CSS docs one more time, font weight. So we want normal semi bold and bold. That's the three colors that we want. So let's take a look at the customization here. I guess that one more time I can use the initial to reset. I'm not quite sure. So let's try that dash dash font dash weight dash star initial. So that should remove the ability to go font bold. Yep, it's not picking up anything, which is good.

So that should remove the ability to go font bold. Yep, it's not picking up anything, which is good. Once again, with that, this font bold would be a thing. All right. We set the font weight and then we're going to manually bring the three colors that we want. Okay. So copilot invented names, but I'm not mad at that. We can make it feel just like we have a custom color set.

So copilot invented names, but I'm not mad at that. We can make it feel just like we have a custom color set. We can have a custom set of font weights. So now the font weights available are both medium and regular. Let's try bold, which is 700 and indeed a font as the correct weight. Okay, I think we are in a very good place with the style guide. So we've done a bit of tailwind. It is time to switch back to Laravel for the next lesson.