00:00 Okay, so we are going to move our colors out of the colors object, but because we're going to keep them and map them, we're going to place these colors in a colors object that we can then reuse or refer to. So I'll copy those lines and cut them off. I can also remove the comment. And

00:18 intentionally, we will keep these three in the colors object because we want these accessible everywhere. Remember, text color, border color, carrot color, everything needs access to these. So by putting them in colors, they're going to be available in anything colors related,

00:34 which is exactly what we want. But for the rest, I will go at the top here and go const colors equals and paste my colors here. By the way, we have removed all the colors now, except these three. So our UI should look completely bare bones because there are no more colors to be used.

00:51 And now we're going to go through the really interesting steps of mapping the colors from Figma in a Tailwind config and then use the actual semantic colors for BG highlight, the actual highlight instead of teal, and then the border muted and stuff like this. And this is

01:09 going to all take shape and make more sense at the end of this challenge. So we've defined our colors here, and then you can see that we should extend the background colors object for the background colors, the border colors. And when I say objects in Tailwind, they're called core plugins.

01:25 So there is this concept of plugins and then core plugins. And we can extend all of these core plugins here. And this time we're going to extend them because we want to have them be based with

01:40 that and then extended with extra colors on top. So here I will extend the background color object. And we need to take a look at Figma here. We want neutral pointing to gray zero. And the way

01:55 you can make that relationship is have a neutral key, which is going to point to our colors object and then gray, and we'll get the key zero. Next, we want neutral inverted pointed to gray 100.

02:10 And again, I could go neutral inverted on the next line, but let's create an object for the neutral keys. And if you want one of the keys to be just the parent key neutral, you can use the uppercase default in Tailwind. And so it's not going to be neutral dash default. It's just going

02:27 to be neutral. It has to be uppercase though for that to happen. We have neutral default and neutral inverted, which is going to be colors dot gray 100. And whoops, I am missing a closing bracket. There we go. So now we've done neutral and neutral inverted. Let's do subtle, which is gray 5.

02:47 Bold, gray 80. Subtle colors dot gray 5. Bold colors dot gray 80. And then we have highlight, which points to teal, and accent, which points to purple. Let's put them at the top here.

03:04 Highlight colors dot teal, and accent colors dot purple. And so now this is really cool, because when I go bg dash, you can see that I am presented with exactly the colors that I can use

03:19 for the background colors. But if I was to go text dash, we still have nothing. I mean, we're going to have inherit current color and transparent, because they are extended from the colors where we've added them. But as you can imagine, once we've done the border and the text colors as well,

03:37 we're going to have a system that feels really safe and easy to reason about, because we only presented with the options that we can and should use. All right, so let's do the same for the text colors. We have copy gray 100. This time we're going to extend the text color object. So text

03:56 copy colors dot 100. Subtle is 60. Muted is 40. Subtle colors gray 60. Muted colors gray 40.

04:11 And inverted, I believe, colors gray, but it's 5. Don't try to trick me, Copilot. Okay, and we'll do the border real quick. We have three of them. Bold, subtle, muted. And it's 60, 40, 20. So this is the

04:25 border color. Bold colors dot gray dot 60. Subtle is colors dot gray dot 40. And muted is colors dot gray dot 20. So now we have this bespoke design system that feels really good.

04:43 And if a designer had given you this Figma file and you show them what I'm about to show you, they will love, love, love it. So yeah, pull your designer aside and say, hey, can I show you something real quick? These colors that you asked me to add to the system, look at this background color. You can only use the highlight, accent, neutral, inverted, bold, and subtle.

05:03 It's pretty cool, huh? And if we go text dash, once again, you're only going to have the copy, subtle, muted, and inverted colors, just like you've told us we can allow to the users. And then finally, if we look at the borders, the same deal. Once we find the colors,

05:20 we're going to have bold, subtle, and muted. And the same for border X or border Y. Pretty cool, huh? So that is our job done in the Tailwind config file. We have done that task. So let me untoggle these to see what we've done. We've got our background color,

05:40 text color, and border colors that are consuming the row tokens we have here at the top. And now what we can do is go and update our UI because it's using colors that are not available anymore. We have intentionally removed access to the row tokens.

05:56 Even if they are the correct colors, we don't want people to use the colors directly. We want them to use the mapping from the design tokens that are semantic and can change colors because later in this challenge or in this workshop, we are going to make a themable

06:12 dark light strategy. So our UI is all borked in terms of color, but we're going to bring that up. And this is going to be actually pretty cool because this time I can close the panel and we're going to use the language of the semantic tokens. So when I see background subtle,

06:30 this is what is intended to use and this is exactly what we're going to use. So instead of gray 5, I actually go bg and look for the subtle token, which is here. Remove the comments, remove that. Next on our card, we want to have this white background, which is actually called background neutral.

06:51 So instead of gray 0, once again, background neutral. And the border is border muted. And so I can go border muted. And you can see now how the Figma file and Tailwind are speaking the same design language and have the same sort of convention for these tokens.

07:10 And that's one thing I really like about Tailwind is you can turn it into a, what feels like a bespoke design system built specifically for a project because you can just tie in the naming convention and what's available for each things like borders and backgrounds and text colors. And I just think this is awesome.

07:29 And look at it slowly, but surely it's coming back together. So that was our card. Next, we have the special deal title, which has a color of text muted. So we go replace here gray 40 with muted. How cool is this? We just follow the convention from Figma.

07:47 This is text copy. And the next one will be text subtle. So in here I can go text copy. And in here I can go subtle. And everything's coming along nicely. Next, we can do the button. Our button has a text inverted and a background bold.

08:06 So down here, here comes the link. So this background is actually bold. And you can see the swatch showing. And the gray 5 is text inverted, which is almost white. And then here for this hover gray 100, which we kind of made the decision, it's not on the Figma design.

08:25 Well, let's see if there's one background. And actually neutral inverted is 000. So I think we can use that. It's actually a decent use case. It's meant to be used as a background. So I think designers are going to be cool with that. And so now on a hover,

08:42 we still have this hover to black effect using the semantic token, which means that in a different theme like dark mode, this neutral inverted might be closer to complete white. So we're not tying it to a gray, which is almost black or completely black,

08:58 but we have this semantic abstraction that still allows us to make things like theming possible. And brilliant, this is our card done. And then we can quickly move to the rest. This is pretty quick, actually. And I don't really need the Figma file to understand what I need to do here. Instead of BG teal, we got to go BG highlight.

09:16 This is our main highlight and purple is the accent colors. And then for the text here, text gray 100, which is black. It's not text black, it is text copy. And I'm going to go here as well. And see, I get the hang of things. Like I kind of start to speak the

09:37 language of the design system, which is awesome. And gray 5 is text inverted. And there it's text inverted as well. Our UI looks exactly like it should. And if we check to verify what I was saying, there is this text copy on this one and the text

09:55 inverted on that one with the backgrounds of accent and highlight. Amazing. So hopefully you start to understand the reasoning behind making these semantic tokens. We haven't even scratched the surface of the reason why you would do this,

10:11 but just having a set of choices that is restricted to the minimum that is available is, I think, really cool. Because you're not starting to think, oh, is it slate 400 or zinc 400? Is it indigo or purple or violet? You just have the colors that the designers chose for you to use.

10:29 And you just pick from a smaller set of choices and it can, in certain things, certain contexts, accelerate things for you.