00:00 All right there's a few moving parts and a few steps here so let's dive right in. The first thing we want to do is convert these colors that are hex colors to HSL. Like I said you could use RGB or other color formats but we're going to go with HSL here. So this is typically a task that I would use VS Code for.

00:18 I have an extension that would go convert to HSL and that would do a pretty good job. Although I don't love that it's not rounded. I would like 173 and you can see the color remains the same. I could select the first hashtag and find all of them. And actually I'll do this batch convert to HSL.

00:37 But just out of curiosity because here I have all the colors let me undo all of that. And let's have some fun here. I will copy this. I will go to and not chat gpd let's go with Claude for once. And I'm gonna ask my friend Claude convert these to HSL.

00:57 I forgot the syntax highlighting but you best believe that they will know what to do. And yeah that looks pretty right. So you can see that HSL is actually kind of readable. You can see that all of these colors are on the zero hue with zero saturation. So zero saturation means gray literally like no color inside it.

01:16 And then the first one is going to be 100% so white and the last one is 0% so black. And it goes in between. So that works. Now the next step is we actually don't want the HSL color. We want to have the HSNL strings.

01:33 If you've read the instructions you understand that we're going to need to compose these three channels with the alpha channel. And that's going to happen below when we consume these colors here. It's a bit complicated but that's the way it works in V3. And so we can ask Claude let me zoom in a bit.

01:50 Say give me the same object but with HSL channels only instead of the HSL color. No commas just spaces. Okay so now it's trying to be cool.

02:09 No objects just the H. I'll give a template string SL string for H. And now that should be what we want. Exactly! Thank you so much.

02:23 Add the percent symbol for the S and L values. I would have been faster doing it manually but we now have exactly what we want. So I can copy this. Let's not forget the most important. Thank you! You rock! There you go. Always close nicely.

02:45 Be friendly with the robots. So now I can go and replace that here. And obviously now we don't have the color highlight because these are not colors. They are just HS and L values. But this is what we need to store in the CSS variables in the CSS.

03:03 And then we're going to come back to the config file and compose it with the alpha value from Tailwind CSS. I know I know complicated. So step two and three happen in the CSS file. I will copy that just for reference. And actually we're going to move that over. And for now let's go in the index.css file.

03:21 And here we're going to define these 14 colors as CSS variables in the root scope in the base layer. So at layer base and then the root scope. And here not like this but I'll comment this out.

03:38 And I think because it's commented out GitHub Copilot is going to be able to know what we want to do and do the work for us. So you can name them whatever you want. But I like to prefix the variable name with what it is. And here it's a color. So we can go dash dash color dash teal.

03:58 And this is exactly what I meant. Copilot sees that and is like I got you bro. You want this. You want this. Let's still make sure that it's doing the right thing. Color gray zero. Look at this. This is amazing. Tab enter. Tab enter. I am a modern developer. Tab enter. Prompt engineer.

04:20 19%, 9% and 0%. Does you know? Yep. It also knows to stop. This is amazing. Well there you go. Cool. So we've done that. Oh but no. It's actually it's so hard because every time you think it's doing the right thing it's actually not. It gave me the HSL colors again. I did not want this.

04:42 I wanted the channels only. Luckily multi-cursor magic can solve that pretty quickly. Like so. But yeah it tries to be clever and say oh I know you're trying to have HSL colors. They're not really properly formatted so I'll format them for you and we did not want this. But still save some time I guess.

05:04 So now we have our root CSS variables that are available in our CSS on the project in the browser. I can show that to you. Our UI is broken. If I scroll down a little bit we are going to find. Look at them. There they are. Color teal, purple and our grays.

05:21 But they're not really useful because of that format but they're available. All right so next the next step is to recreate the semantic token abstractions. And so there's an example here we want to say color bg-neutral that is going to consume that CSS variable of gray zero. So let's get rid of this.

05:40 And I will have the Tailwind config file. We want the background colors and what we want is to recreate that. And so we're still inside our base layer. Color-bg highlight and we want to. No we don't want to do that here. Thanks for trying. That's close.

05:58 But what we want to do is go var dash dash color dash teal. And so I'm hoping that it reads this and then it knows what to do next. No it doesn't. Dash dash color bg accent var color purple. So now you know what to do. No so it's not reading across files.

06:17 But if I had this here like so and it was commented out. Now color bg-neutral gray zero neutral dash inverted. Yes subtle and bold 80. Nice. So there you go. A little trick if you want to have copilot be more useful.

06:38 Sometimes you need to put stuff in front of its eyes. And see if it can also do the borders. Border bold gray 60 40 20. Nice. And then text copy subtle muted and inverted. Well that was pretty useful actually. Thank you very much.

07:01 All right so let's sum up. We have defined all the colors here in this width syntax. And then this is the equivalent of the row tokens. And then we have done our semantic tokens here. Which are mapping to the row tokens exactly like these are. And so what we need to do now is to update these.

07:21 We are in the config file here and actually we don't need that anymore. Let me remove that. I'm going to delete that. I'm going to delete all of that. But it's freaking out because we've removed the color subject. But basically we want to update the objects below to consume the variable. And this is where we are creating the HSL color.

07:43 We use our CSS variable with the three channels. And then we compose the slash alpha transparency with Tailwind's internal alpha value. That's a lot. That's pretty complicated. This is all going away in Tailwind v4. That's the good news. But you still need to learn how to do it. Because we're working in Tailwind 3.

08:05 And it's a good thing to know. Let's go ahead. Let's see if it's able because of the comments to work things out. HSL. What? And then we're gonna go var dash dash color bg highlight. Yes. But instead of one here we have this. Oh and you know it needs to be a string as well.

08:25 And here we have this alpha dash value. Okay. Can you do the same here? Nice. What about here? Color bg neutral. Yeah. Now I'm always curious if it knows that the object is going to be neutral dash inverted. It does. Look at this. Okay. Copilot. You're piloting. Subtle. Okay.

08:45 Now I've reached the point where I'm blindly trusting it. Which is typically where problems happen. Oh what? You don't want to do it anymore. Is it because I said I trust you blindly? HSL. Please continue. There you go. Color bg. See that's the problem. It's not bg. It's border bold.

09:04 And it's a string. What about this? Subtle and muted. Wonderful. Please do the same with text colors. Can you remember? Text copy. Yep. Yep. Yep. I say yep and I'm not even looking at the screen. I'm just tabbing away. But that looks pretty good. Inverted. Color text inverted.

09:26 Which is color text inverted. Yeah. All right. So let's save this. And so we have our CSS file with all the CSS variable defined and mapped. And then we take this mapping and apply it to our Tailwind config file. It all looks good to me.

09:47 But oops. Nothing is working. And oh yeah I know. I think I know why it's not working. And if we look at the root here we still only have our colors but not the semantic tokens. What I've made wrong. This is not Copilot's fault. Is I've put this outside. Let me cut it off the root scope here.

10:06 It needs to be inside the root as well. So before that closing bracket. Like so. And this time I think that yes our colors should be back. So we have done all this and it looks like nothing has changed.

10:21 So as a tease for the next exercises let me show you what we can do now. If I close the side panel and I open the app.tsx. You can see that we actually have moved to a demo. And the demo component is exactly the same that we had before.

10:40 But it's moved here. And the whole reason is we can use it multiple times. And you can see here it says add a second demo. So I'll duplicate this. And so I have two of the same component on top of each other. But now I'm going to show you that we can because we have CSS variable.

10:58 We can redefine the color of anything at any time. In the next challenges we're actually going to create a nice way to toggle different things like dark modes or different themes. But for now let me just use an inline style to show you how I can manipulate one CSS variable and change the color of the UI.

11:17 So you can see here it suggests to create an inline style. And change the value of the color bg subtle CSS variable. So here style equals. And we're going to go redefine the dash dash color bg subtle. This could be anything here.

11:36 The suggestion is 0 0 19 percent. It's important that it's actually using these h s and l channels. Because it's still going to compose with the semantic token and the alpha value. And all that stuff.

11:49 And if that annoys you you can type it as react dot CSS properties. And it will be happy. So now we've redefined the color bg subtle to this almost black like dark gray value.

12:05 And if we look at bg subtle this is what the whole wrapper is using. So now what was a light gray is now a dark gray. So it's using the same class. But we have redefined the CSS variable value under the hoods which is super cool.

12:22 If I inspect this one you can see that it's using the color bg subtle. But then it points to that that has been defined. And if I untaggle this it goes back to the root scope. But if I refresh this is what the CSS variable is redefined to. And what wins. And that is super cool.

12:40 And that is a great introduction to what we're going to do next. Which is implement a dark mode capability to our project.