00:00 In this workshop, we're going to implement semantic, themable color design tokens in Tailwind CSS. We're going to do this for Tailwind CSS version 3 and version 4. We'll work from this Figma file. So let's take a look. You can see that we have a bunch of colors. So if I start at the top left here, we have a raw colors palette.

00:19 So there's teal and purple and then shades of gray. Then you can see that it evolves into background colors that actually remap those raw colors, neutral, inverted, subtle. So these colors are actually taken from these, as I'll show you in a second.

00:38 We also have text colors and border colors. If I select here, for example, gray 10, you can see that it's using a gray 10 color. This is a variable that's been set. I can open the variables panel like so, and I will select the colors for now. So these are the raw colors,

00:58 like I said, teal, purple, and a bunch of grays that are mapped to hex colors directly. Then if we move to the background color tokens, you can see that these are actually pointing to the raw colors. So neutral is gray 0,

01:16 inverted is gray 100, and so on. So these are what's called semantic tokens. They have a semantic naming that is meant to be used for a specific purpose, and they try to detach themselves from the actual color itself. Same deal if I keep going for the text colors, here we have copy, subtle, muted, and inverted.

01:34 Again, it's pointing to specific raw colors and the same for borders. If I close this panel here and zoom out a bit, you'll see that we also have a little interface here. Pretty simple. But if you look at everything, it's all using the colors.

01:54 Actually, if I select a broader element, if I select the whole frame, you can see that it's going to use all of these color tokens set as variables. Literally everything in this design is using variable colors that have been defined ahead of time, and also using the mapping of these semantic tokens.

02:13 So why would you use something like this and not directly reach for the color tokens? The main explanation for this is you want to be able to detach the meaning of a specific style with the color that it should represent. That enables things like theming if you want to have multiple color themes,

02:30 where the same bold or subtle or inverted token has a completely different color. So that's really useful for themable interfaces. Quite often as well in a mature design system, you want to establish a design language that everyone can speak and understand. Then these tokens have specific meanings and

02:49 intents throughout the design and throughout the components, which are a little bit more mature and evolved from just something like a blue 600 or a teal 900. I'm going to show you an illustration that I find really good from the Atlassian design system. So this is the colors page here, and there is one specific graphic that I really,

03:09 really like that I want to show you, and it is this one. So let me zoom in a little bit. This, I think, explains really well that layer of semantic tokens. So we have raw color values like the hex colors we had in Figma, and then we have our base tokens, which are also called raw tokens. This is essentially what Tailwind CSS is,

03:29 purple 800, indigo 500, gray 300. These are the direct link to the color value, and quite often it's really useful to reach directly for this token. Matter of fact, this is how Tailwind works out of the box. You have these descriptive style concerns, and you compose them together.

03:46 But when you want to do some theming or advanced design systems, you might reach a point where it makes sense to have an extra layer on top of this, which is the semantic design tokens layer. So you can see here, this purple 800 is now color text discovery. This really is the design language of the system.

04:05 The text discovery is going to have that color, and you can reach for it in the Figma color, in VS Code, or in the browser at runtime with the CSS variable. Essentially, what we're going to do in this workshop is take these colors that typically are the bread and butter of Tailwind CSS,

04:22 and we're going to add an extra layer of semantic tokens on top of it, and try to style our application with this layer of semantic tokens. This is going to enable us to really easily do theming, do dark mode, do dark mode with theming. It's going to be quite fun.

04:40 Like I said before, we're going to do that for Tailwind 3 and Tailwind 4. Are you ready? I am. So let's dive in.