00:00 The first thing we're going to do is go back to hex colors instead of HSL. And the reason is we don't need anymore to have this alpha value that we can compose with the HS and L channels. We can use any colors and Tailwind is going to manage the transparency by using color mix, which is a new CSS function.

00:17 So this is making things simple. Of course, we could keep HSL format. There's nothing wrong and actually good reasons and benefits of using HSL. But just to show you how things can be simple, we're going to go back to hex colors, which was the original choice at the start of the workshop.

00:34 Secondly, we're going to skip an intermediary step where we define the raw color tokens and then we map these to semantic tokens. Instead, we're going to directly define the semantic tokens because we're working with CSS variables here in version 4. We don't need to do the whole dance of declaring colors and then consuming them in

00:53 the Tailwind theme and then try to redefine them. We're going to define directly from the start the semantic colors only. You've got this, read the instructions and I'll see you for the final solution.