00:00 All right, let's do this. So the first step is to convert all the HSL colors back to hex. Again, you can use AI, you can use VS Codes extensions to do this. So I will try here to find all the HSL colors. So I will comment D multiple times to find all of them.

00:19 I will go till the end minus the semicolon. And so now I have selected all the HSL colors in the file. And I will ask to convert to hex. That should work. And boom, look at this. This is looking pretty correct to me. Well, that was quick. Doing this manually would have been

00:39 a pain. And so everything still works in our UI. But now we are using hex colors once again. And let me prove this to you. You can see them here. And the really cool thing, which I want to show you, is if I go to my demo component here, let's find the BG highlight color. And

00:56 notice that there are no little color swatches here available. And the reason is we are consuming a CSS variable. There's the default here. But VS Code IntelliSense cannot determine what color is held within that variable. And so it cannot show us the swatch. And the other thing I want

01:15 to show you is if I try to add some opacity with dash 50, you'll see that now Tailwind version 4 is going to use this color mix function. And you can see that it's mixing the color with 50% of transparency. And this is why we can use hex colors. The color mix is going to create this

01:33 transparency out of this no transparency color. And as you can see, our highlight is now half transparent. So let's bring back to full opacity. And let's keep going with the second step, which is a two-part step. So the first one is we want to skip the whole semantic color mapping to the

01:51 row token. We want to define our semantic tokens with the hex color directly instead of referencing another CSS variable that holds the hex color. Right now, all of these are pointing to one of these up here. So basically, we want to skip these and just define the color directly. So once again,

02:08 I'm sure that AI would help a lot here. We could say, hey, figure out these and replace it with the hex color. But we're going to do this manually. So I'm going to select every instance of var color gray 100. There should be a few, two or three. And you can see up here that color gray 100 is actually

02:27 black, 000. So I will replace that with that 0 color. And I'm going to do the same with gray 0, select all of them, and replace with fff, fff. Let's find all instances of 80. And what is 80?

02:44 It's 30, 30, 30. Okay. And you get the idea. I'll do a few more and then fast forward. Gray 5 is going to be eb, eb, eb. And we have a few more to go. Let's go 40. Actually, I'll quickly do them

02:59 with you. So 9, 1, 9, 1, 9, 1. Then we have 60. Select all of them. It's 6, 1, 6, 1, 6, 1. And 90. And we might be close to being done. What is 90? It is 1, 7, 1, 7, 1, 7. All right. And is that it?

03:18 Yep. That looks like this is it. So we have all of our colors using hex. So these are the dark variants and the themes. And then the actual theme that we had defined at the top, but is at the bottom here. Everything is reset. And then all of these, oh no, we're not done actually. We need

03:36 to do the teal. And so the color teal is this one, 00FFE1. And we have to do purple. There's also

03:46 just one of these, 6200FF. 6200FF. And finally, I think this is now the last one, color gray 20, which we're going to find here, C2, C2, C2. All right. So now that we are not consuming the row

04:06 tokens directly at all, we can completely get rid of these root scope definitions. And actually, that's going to make it slightly harder if someone wanted to use the colors directly. If we expose them, it might make them believe that they're here to be used. But if we don't,

04:24 that's one thing less to worry about of people using the row colors directly. In saying this, you will never be able to stop someone completely from using the colors. But at least I think it's kind of nice to not expose these and make it feel like it's a thing that you should use.

04:40 So if we look at our UI now, everything is working again perfectly. And if we go find our theme layer one more time and we scroll down until we can see the colors, you will see

04:55 that they're all defined here directly. And this is basically all the colors that we've defined. 1, 2, 3, 4, 5, 6 background colors, 3 border colors and 4 text colors.