How to Style React Components With Design Tokens

[00:00 - 00:09] So we have the store book server running. And so let's go back to the button component and let's see how we can style it with style components.

[00:10 - 00:22] So we'll go back to the terminal and first install the style components for our React packets. And now let's go and consume the tokens from our library.

[00:23 - 00:37] But before doing that, we skipped something when we've built the foundation packets, which we can do now. First of all, we need to extend the TypeScript configuration with the setting, is a really simple setting to extend.

[00:38 - 00:51] Then we need to add those settings, what is our main packets, what we can find the type definitions. And then some additional build steps like the TypeScript compile.

[00:52 - 01:11] And the last one would be to add an index.ts where we re-export the JavaScript token so we can consume them natively in our code. So if we have this, we can run Yarn workspace, foundation and build.

[01:12 - 01:21] It will build everything. And then we can go to our button components and natively find and consume the tokens.

[01:22 - 01:29] So here we have the tokens available for consumption. So what can we do here?

[01:30 - 01:50] We can first create our new button component, which will be this button. And let's start styling this.

[01:51 - 02:13] So the first style we can implement and it's a really easy one would be to add a cursor of a pointer. And here what we are missing, we are missing the import.

[02:14 - 02:31] And then we can add also the definitions. And get back.

[02:32 - 02:35] We still have the same problem. So let's maybe restart the TypeScript server.

[02:36 - 02:39] Maybe this is a bug from the code editor. Yeah.

[02:40 - 02:43] And it looks like it. It works fine now.

[02:44 - 02:49] So here we have the button styled. And then this is a style component.

[02:50 - 02:54] We pass everything here. And we have a cursor of a pointer.

[02:55 - 03:11] We will open Figma to see how we should style our button component. And Figma is open.

[03:12 - 03:14] Let's go to buttons. And let's see.

[03:15 - 03:21] We have a background color. We have some puddings.

[03:22 - 03:33] We have six puddings on the vertical axis and 12 puddings on the horizontal axis. So let's implement this.

[03:34 - 03:42] Padding and we have six and 12 pixels. What else do we have?

[03:43 - 03:49] We have the background color. So let's give a background color.

[03:50 - 03:55] And I love the autocomplete from GitHub Compile Load. But let's see it ourselves.

[03:56 - 04:04] We have the tokens, then colors. And then primary.

[04:05 - 04:20] And we'd say did we have here in our button, we have the primary 500. Now we have an issue, you will see.

[04:21 - 04:37] And the thing is that we did not select the token value. Because if we go back to the tokens, we can see that we have a value, but we can have other attributes like file path, a source, things that we will not need probably.

[04:38 - 04:44] Then we can have the border radius. Let's see how rounded our components are.

[04:45 - 05:04] They use a 100 radius. So in our case border radius.

[05:05 - 05:13] And then reduce, large, and then value. But what is the value of large?

[05:14 - 05:28] We can search our tokens, foundation, source tokens in JavaScript, and see the large. Or maybe even better, we can search here, reduce.

[05:29 - 05:39] And we can see the large that is only 20 pixels. We could create a new radius, call it rounded.

[05:40 - 05:46] Or really large and paste the value of 100. For now we will skip this.

[05:47 - 05:55] But you can make it as an exercise and move forward. So I will copy and paste the code from the text version of this course.

[05:56 - 06:04] So I will not create every single style. So this is the code.

[06:05 - 06:12] We have a disabled state, our paddings. We unset everything from the native stylings.

[06:13 - 06:22] The transition, which is using the animation token we created, our color of the text, the border radius. And now we have here some properties.

[06:23 - 06:27] And those are calculated dynamically. But we don't have the color property in our button.

[06:28 - 06:38] So let's go and add this. And here the color, what would it be, the color for us.

[06:39 - 06:46] So if we search the colors, we have the primary, the neutral, the warning, danger. So for colors.

[06:47 - 06:54] And there is a clever way to do this. And this is also the power of design tokens that they will allow us for type safety.

[06:55 - 07:14] So if it's a type, if it's a key of a type of tokens that colors, we can see here that we have the four colors, primary, neutral, warning and danger. And this can be inferred here and a work appropriately.

[07:15 - 07:26] So if we now remove this button and work with the button, we implement it. So this is a style button.

[07:27 - 07:34] Here we need to spread also the color property. And we have everything.

[07:35 - 07:38] We have a warning. The void is not as high as to react.

[07:39 - 07:43] What does it mean? Yeah, that we don't return it.

[07:44 - 07:51] Perfect. And now we have a button styled with styled components and our JavaScript tokens.

[07:52 - 07:58] And let's see the result. It does not work.

[07:59 - 08:06] So what we are doing wrong. Let's see.

[08:07 - 08:10] It says that it cannot find something with the colors. Okay.

[08:11 - 08:29] The thing is that right now we are passing an undefined color because in our bottom story, we don't define the color and it is breaking. So if we want a default value, so the consumers will use it out of the box, we can define an default value for our color.

[08:30 - 08:39] And here you can see that it works as expected. The only issue we have is the font that we will fix later on.

[08:40 - 09:09] But yeah, that's how you can use the JavaScript tokens to to sell your components and to fix the font, we can import our typography in the store book in the store book files, like we are consumers of the typography and everything will work as expected. So in the next session, we will use tailwind CSS to style our components and we will fix the font issue.