GitHub Open Source Friday, 12 Jun 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Build Your Own Design System with ChakraUI #opensource

Description

Watch Lazar Nikolov (DevRel and Core Maintainer at ChakraUI) and Segun Adebayo (creator of Chakra UI) demonstrate how to override components in Chakra UI, a framework that allows you to build your own design system.

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

0:00 - Introductions
2:24 - What is ChakraUI
6:41 - Rebuilding GitHub's Design System with Chakra
9:10 - Adding Dark Mode
14:16 - Defining Tokens in ChakraUI
16:09 - Defining Semantic Tokens in Chakra UI
18:19 - Defining Global Styles in Chakra UI
19:39 - Overriding UI Components
26:43 - Q&A

Join @blackgirlbytes live for Open Source Fridays at https://www.meetup.com/github/.

Thanks!

Connect with us.
Facebook: http://fb.com/github
Twitter: http://twitter.com/github
LinkedIn: http://linkedin.com/company/github

About GitHub
GitHub is the best place to share code with friends, co-workers, classmates, and complete strangers. Millions of people use GitHub to build amazing things together. For more info, go to http://github.com

A

Why don't we take this time just to introduce ourselves, and then we can talk a little bit about chakra and see a demo as well. So I guess I could get started with my intro very quickly. My name is rozelle. I'm the host of the show, I'm a developer, advocate at github and very excited to learn about um what everyone else has to show. Who else wants to go next, maybe lazar, because you're to the written or no.

B

That's cool yeah, okay, I am, I am lazer nicole off. I am the devil guy at chakra ui, I'm here to talk to you about chakra ui, how cool it is because we are very cool and yeah chakra ui is created by sage. So maybe you can go ahead with the introduction stage.

C

Yeah for sure hi everyone I mean before I go ahead. I really want to appreciate um razeal and apache for having us on the show. Today it's such a privilege to be here- and we don't take this for granted every time yeah, my name is sheldon adebayo nickname is sage. I got that name from my favorite anime, because I watch animes a lot, uh so I just like put that on and yeah I'm the creator of chakra ui and the creator of zach.js as well, and I'm excited to be here.

C

I work at vasel as a software engineer, so that's like all of the themes and and because it's a github live stream for sure I'm a github star, but for last year and this year. So I'm really excited for all of this. Thanks for having me.

A

Awesome, no thanks for hopping on. It was really um wild when lazar reached out to me and he was like hey, can we be on open source friday? I'm like I was actually trying to figure out. How can I get shocker ui on open doors, but yeah go ahead.

D

Apache so my roland pachy, I am also developer, advocate to github. I joined a little under two months. uh Some I'm here to learn roselle uh the only friends that I work in brazil because we're doing expansion here and yeah. It's I'm pretty excited to learn it. How are you.

A

Yeah yeah apache is doing awesome with the um github brazil so excited all right. uh Let's, let's dive in tell us a little bit more about shocker, ui and like why you need it, and then I would love to see um a demo of um shocker ui as well.

B

Yeah, of course, so I'm gonna share my screen right, so uh chakra, ui top level like if you look at the top level chakra ui is, uh is a react component library that gives you the building blocks. You need to build. Your react applications right with built-in accessibility, so you don't really need to worry about accessibility, props um and people usually like. If you, if you open, twitter and scroll around you know, chakra ui community, sometimes people compare it with stillwind, which is wrong. Tailwind. It's like comparing apples and bananas.

B

Tailwind is a css framework. It's a utility first framework, while chakra ui is, uh is more of a lower level design system framework like build your own design system. It does have a pretty good default theme that you can use straight out of the box, but it is super super extensible we and yeah you.

B

It is basically created, so you can build your own design system on top of it, and my today's example uh is exactly that, so it will be fun and I'm going to prove that to you guys so yeah chakra ui.com is our website. um How how do you get started?

B

uh Let's say, for example, we're using the create react app. You can use our official template, which is the uh add, chakra ui. Let me zoom in so you guys can see there we go so you can do create react, app, name your app and use the chakra ui, which is javascript or the chakra ui typescript template, which is typescript and or if you already have a project. You can manually, install the chakra, ui react package and also the emotion and framework and framer motion packages which are the supporting packages.

B

The peer dependencies after you've done that you can hop into your code and wrap your app component with the chakra provider, and that's it now. You have chakra ui installed and you are ready to use it. So I think we're ready to jump into our example.

C

Yeah yeah, I mean I'd love to sell like charming on it today before lazar starts to get into the window um here. I think that, like one of the key motivations for launching chakra, ui was mostly I'd say somewhere between seven to eight years ago. I worked as a ui designer uh sort of like designing products, and at that point I was like a living testament to how how fast designers can create screens using tools like figma or sketch, and it's like once you go up in there.

C

You can easily draw some rectangles put some text and you have you have a mobile app, but you have your website done pretty fast right, but then, at the time we I mean it was really hard to find um or sort of find like tools that match that type of experience from a development standpoint.

C

So if it took you two days to come up with a ui design and figma or sketch it's most likely going to take you like two weeks or a whole week to actually write the code for that and usually uh getting the speed of design to match, the speed of code is is, is pretty tough right, so one of the key motivations here is like: how can we provide building blocks? um That's always most of the necessary requirements to build an app right. You you want to make sure that the up the application is teamable.

C

You can make sure it's accessible. You want to make sure you actually can feel that your writing code at that's like blazing fast speed, right and that's really that's the whole point behind checker ui.

C

So we put all of these different ideas from uh from my experience, building design systems, building products, uh packaged it into sprawl of culture cryoui and quite honestly, the first version was like I mean pretty crude, just wait, put it out there and see if you could love it, where I think, like two years and almost eight months down down the line was easier. Maintaining and even building much better tools for other people.

A

That's amazing, I love that and I definitely resonate with that feeling of you get that sigma design and then it takes me a whole another like one to two weeks just to build it out with code. All.

C

Right, let's go, let's take it.

B

All right yeah, so the example is, I think, every developer knows what this is since we're on a github stream and of course, we're going to you know, rebuild the github repo actions section, which is basically this thing right here.

B

So we have the branch switcher, the branches, the text, the go to file the add file and the code button. So just this piece right here and if you I'm sorry, if you look closely you'll, see that the content is there, but it doesn't really look like it right.

B

So um we're going to build part of the github design system and make make our chakra ui react app, which is this on the right hand, side here, look exactly like the github section, so I mentioned that we needed to install the packages and everything. So if we go into our index.dsx file, we can see that we have the checker provider mounted here and inside of it it's the app there's, also the theme um it. It also accepts the theme prop which most of the works today will we'll be doing into that file and yeah.

B

After we do this, we are ready to use all of the components in chakra ui and also all the functionalities, for example, the dark theme, which is super cool. Now, if I told you that the dark theme is a single line of codes, you're not going to believe me, so I better share that with you.

B

There is a use, color mode hook that you can use from the chakra ui react package that will give you the toggle color mode and on the button just hook it up with the on click prop and that's it. Three dark modes.

A

I've been planning this wait wait. Can we can singing like inside of the color mode like what what y'all used to build it? I'm just curious, I'm just know, like definition,.

A

Okay, that's where, okay, you guys set up all the types in the interview, okay, cool, I was, I was cozy. Thank you.

B

Yeah yeah, for example, there's there's also uh other stuff like the the current color mode and the set color mode. If you want to set it programmatically to something else right, but yeah, usually it's just the toggle color mode right here and voila. We have dark mode right, so I mentioned that most of the work will be done in the theme file, but we'll circle. Back to that later we have the repo actions here, which is the the top row, and if we open it up, we can see a.

C

Lot of stuff so.

B

Chakra ui has, for example, two types of components: there's the layout components and there's the functional components right. So, starting with the top, we have the horizontal stack or h stack, which is essentially a div with a flex uh display set and since it's a horizontal stack, the the the direction is set to row.

B

It also has support for some spacing, so you can define the spacing between all of these elements inside of the horizontal stack, instead of manually, doing margin right or margin left, but in this case we are setting the justify content property to space between now. These props are actually called style, props and what they do is they get the our input, the developer's input for for the style, props and then con convert the react props into css, using emotion under the hood, so everything we write here.

B

For example, the justify content is uh translated into the justify content property, but in this case the spacing property does something else, so it loops through all of the children of this horizontal stack and it sets the margin left property to four which actually transfers to 16. okay right. So this is a uh the value from the um design system that chakra ui has and the values are usually the values are always multiplied by four. So that's a little trick. uh The values are multiplied by four, so this is 16..

B

If you wanted to set the spacing to 40 pixels, then we'll just write, and we can see that the spacing between the between the branch, picker and the branches and tags change drastically, so we're going to bring it back to four. Then we have the button.

B

The button supports, for example, left icon and right icon, which is the branch and the carrots.

B

Then we have the the branches which is actually a button, but the variant is set to link the variant. Concepts exist in multiple components into chakra, ui, okay,.

C

B

What the actual variants are are a set of predefined styles or for your components. For example, in this case, we have the link uh variant. If I were to to change this into a ghosts, we can see that the button appearance changes and if we hover on it, there's a little subtle background. Oh.

A

That's cool yeah, yeah.

B

We can set it to solid as well, which will always have that gray background.

C

B

Basically, variants are pretty fine sets of uh style style, props.

A

B

Yeah and if we scroll all the way to the bottom, we have a missing button. The add file, I'm not sure if you noticed that I did that on purpose. So we are going to add the missing button. uh So yeah we're just going to add a button. We'll add red, add file you save this. We can see that we have the add file button appear at the top we're going to set the right icon, because we need the carrot.

B

I already imported the carrot icon from the top we'll set the box size, which sets the width and height property to 3 ie 12 pixels, and we can also set the margin left to minus one.

A

B

Also use negative values in the style props as well, so this will apply a negative four or minus four pixels to the carrots. So there we go.

B

This is how we can add the add file button so want to do down now to make this look like the github style, the github design system. We need to open our theme.ts file and we are hit with a bunch of to-do's. So we have a lot of work in front of us. I'm just kidding it's very simple and and yeah, but but yeah. For the sake of time, I'm going to copy paste a bunch of sections from my other screen, so I'm cheating, I'm sorry.

B

No, I'm going to uh I'm going to explain as we go. Okay yeah. So first we need to define the tokens right. uh The tokens are, each design system has design tokens which are values that are part of the design system. They can be colors, spacing shadows all of these just basic values right.

B

So in order to achieve the github design system or the github look, we need the github design system, tokens yeah. um So I'm going to copy paste a lot of hex codes and you'll. Thank me for not writing them yeah, because yeah you'll be like okay forever.

B

Right so I copy pasted an object, called tokens inside.

C

B

Have the colors and the colors, I have divided it into dark and light. The the naming of the colors are the actual naming in github's official design system. So we are, you know we are uh on par with it, nice and, as you can see, yeah for, for this example, we're just going to do the colors okay yeah. So we have the foreground, muted, the accent as you can see, there are hex codes, uh they're, even hsla, colors or rgba.

B

These are just css colors, nothing else right, and we also have the colors for the shadows. Basically, everything that we need these tokens can come from anywhere, uh for example, in your in your app it. You can hard code them like this, or maybe you have a system that pulls the design tokens from figma and wraps them into an npm package regardless.

B

This is the simplest way, uh but yeah you can they can come from anywhere. Basically, you just need them in your app. So the next thing that we want to define are the semantic tokens. Now this is a chakra ui feature. The tokens are just an object to call the values, but the semantic tokens are implemented inside of chakra ui and it's it's a pretty new feature.

B

So I'm going to again copy paste a little block here and you'll see there we go there, we go. We have the semantic tokens objects which consists of colors and also shadows in this case, because we are implementing this in checker. uh We also want to implement the shadows as well. So how do we actually use the semantic tokens we? We could use the colors as well right, but that doesn't really scale by creating semantic tokens.

B

We are setting the, for example, the bg defaults token to to to use the light to the light color, which is bh default, which which we can actually see here right. So for light mode it is white and for dark mode. It is this hex code value here, uh so this defines both for the light mode and dark mode. So when we are going to use the bj defaults, we're not going to say here's the hex value for light mode, here's the hex value for dark mode, we're just going to say.

B

I want my background to use the bg default semantic token and then chakra ui handles which the the default or the dark value will be applied.

A

Yeah sorry, based on that reactor, that was exactly or a theme or something like that: okay, cool.

B

Exactly yeah, so, as you can see uh out of the tokens values, I've created pretty much the same name uh for the uh the same name of the tokens. We are registering them as semantic tokens and even some shadows as well. That's cool, yeah, again default and underscore dark. So for light mode and dark mode.

B

Then after we have done the semantic tokens, we need to define some global styles which in our case, is just changing the background to bg defaults, and this is the first semantic token that we defined, as you can see, we're not really setting. You know, light more light mode, dark mode. We just say which default chakra ui takes care of everything else.

B

Okay, so these uh global styles will be applied on the body tag of our of our app and that's about it for for the semantic tokens and styles, if we add them, for example, let's say we are going to add the semantic tokens first or the styles, let's say.

B

Else so we can apply there, we go now it's a lot darker, which is github's, uh dark background. If we remove that, I'm not sure you'll notice it, but it becomes lighter.

A

Yeah a little bit like bluish.

B

Yeah, that is chakra ui's default, dark background, but this now is githubs okay, so we are on our way. There are the uh the styles. We also want to add semantic tokens as well, and the next thing that we want to do is change or actually overwrite the button component yeah. So every component in chakra ui can be overridden her base, their base style and everything. So inside of the I mean below the styles, I'm going to copy paste this and now we'll go through with it.

A

B

Okay, so um there is a components filled inside of our theme in which all the components are defined, so we're going to get inside of the button components and change the base style. So the border radius will be medium, which I think is a bit less in github's uh style. The color of the text will be the foreground default again we're using uh semantic tokens here and now we touch on the variance right.

B

So the solid variant was the the default one that we can see here, we're going to set the background color to the button background and set the border and the width and utilize the shadow.

B

In this case we also have the border style. So basically, I I'm copying over how the I'm basically defining how this solid button looks like in github's case gotcha, because it's really different in shock from the chakra ui button exactly, and we also have these pseudo props. Maybe you've uh seen underscore dark yeah. These are called pseudo props and in this case, for example, the underscore hover these styles will be applied when we hover on the button, and these are applied when we are clicking on the button or the button is in the active state.

B

So that was how we can override an existing variant below. We can see that we have a primary variant which doesn't come, uh as you know, by default in chakra ui. So this is our own variant now, so the primary variant will uh inherit from the base style, just like all variants do, but it will also define some other styles, so in this case I'm using the primary background, which is that green uh background for the background.

B

Color I'm also changing the border, color the shadow and also the hover and active states, and at the end of the variance we also have the link, which is this button right here: the 11 branches and 74 tags. Oh.

C

B

It is a button, but it looks like a link. So it's a variant of a button yeah again uh nothing new here, applying some cover and active styles, and there we go aside from variance. We also have the concept of sizes, so all of the variants can be uh in different sizes as well. The default one is always the medium and by default, chakra ui's buttons are a bit bigger than github's buttons. So in this case I'm changing the height.

B

The h is a shorthand property for height, I'm setting the padding as well. So it's like five pixels vertically in six px 16 pixels horizontally, and I'm also changing the font size to 14, because I think in chakra are the the default. One is 16.

A

Wait wait. Can I make sure I understood that so the height is okay, so um and and then you said wait so why doesn't it need the px like? What are the the.

B

A

Yeah so for the plate, it didn't need a px. What are the exceptions there for why the height didn't need the the pixel um saying px there, unless I'm like misunderstanding that part.

B

Yeah, in this case, eight uh will get translated into eight times four, which is thirty thousand.

A

Structure, cool.

B

Yeah, but in for for the value of five, we don't really have the value of five in our design system in the default. You know chakra ui design system, so I decided to roll with pixels. In this case. That's.

A

It cool yeah, we're talking about the times four thing.

B

Yeah yeah, okay, yeah and there's yeah; that's that's how how it works. So, aside from the sizes.

B

Yeah yeah, you can definitely use both.

C

B

Yeah and there we go uh for the sizes, we can define our own sizes as well. We can do extra small extra large or we can, or even name them as we wish in our native languages as well, and then we have the default props, which will be set.

B

If we don't, if we don't specify the size, the size will be medium right or if we don't specify the variant, the variant will always be linked, because most of our buttons will be, I don't know in our app might be linked, so we'll set the the default variant to link. So we cut down on time now, if I add the components object right here, it's going to flash out and everything is going to look pretty much just like github, as you can see here.

B

Maybe I should have maybe should have added the components and then build uh build the styling as well, but yeah.

C

B

If we were so sorry, let's, let's just see how it changes, here's the primary button yeah- and if I comment this out, the primary button is going to be basically unstyled, because the primary variant doesn't really exist. Yeah yeah, and if we go to the repo actions and scroll at the bottom, we can see that the variant is set to primary.

A

B

Yeah, so I can even rename this to main, let's say and go back and change the variant to main, because that's how we called it and it should look the same.

A

Culture honestly, I appreciate the the how the demo is kind of github styled like I like that. Thank you for that effort.

B

Yeah yeah and yeah. How I basically did this is just opened, inspect, element on github and watched and looked at all of the styling configurations that are for the buttons for and for everything, and even dark modes works well as well yeah because we defined the dark mode values into our semantic tokens.

B

So we don't really need to care about their values when we are overriding, the components.

A

Awesome, do you mind.

B

A

Good, I was going to ask if you mind if I check the chat to if they haven't no.

B

Of course, yeah.

A

Awesome cool, um let me see, I know I saw a couple questions um there's one from luron. I hope I'm saying your name right. I don't think I've ever said it out loud, but it says, is the use of um ampersand and bsp actually required, or is that some just some of the leftovers? It seems a bit off to have it there if you're, making use of a ui component system right here.

B

Yeah there we go. uh I just put this to make it simpler. I didn't want to overwhelm everything uh for some reason. If I remove the nbsp, the tags are here.

C

B

Really close to the to the chakra span, even though, if I add.

B

B

A

B

Just for the uh sake of simplicity, I added the nbsp uh because I'm using the chakra dot span in this case, gotcha.

A

B

It's not required or anything yeah.

A

Yeah, that makes sense. Let me see what else somebody said. What's emotion, did we talk about? Is there like an emotion element or something that you imported or.

B

No, the emotion is the is another framework that we use under the court. Yeah.

A

Cool awesome, uh someone said figm is incredible. I agree. Open source is love, agree about that feels like stitches, plus um mui, someone said cool. I agree.

A

I think that one's the only other question if anybody else has like more questions or comments drop it in here and if not, we can, if, if you're, if this part of the demo is over, we can switch over to the state machine stuff too.

B

A

This was awesome. Thank you, lazar, like I. I really appreciate even you just like recreating that part of github. That was a lot of effort for a demo. Thank you, oh um watson, prime said: can you go into the dark mode? um How does it automatically work like that? Oh, you might have missed that part yeah. um I guess they want to see that that hook of how it switched back and forth from.

B

Okay yeah. Let me share my screen: real, quick and.

A

B

A

Are you forgetting that I actually have to add it.

B

Oh yeah, there we go, there's the use color mode hook that we can import from the chakra ui slash react package that will give us the toggle, toggle color mode method, and we just hook it up with the on click of any button in our app that we want to toggle the theme and that's about it.

B

That's how we can use the toggle color mods to actually jump in and out of the dark modes.

A

B

A

Thank you so much.

A