Build Your Own Design System with ChakraUI #opensource

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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 right let's go let's take it 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 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 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 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 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 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 okay that's where okay you guys set up all the types in the interview okay cool i was i was cozy thank you 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 lot of stuff so 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 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 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. 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 the button supports for example left icon and right icon which is the branch and the carrots 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 and 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 that's cool yeah yeah we can set it to solid as well which will always have that gray background okay and yeah basically variants are pretty fine sets of uh style style props i like that 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 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 okay you can 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 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 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 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 right so i copy pasted an object called tokens inside we 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 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 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 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 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 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 yeah sorry based on that reactor that was exactly or a theme or something like that okay cool 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 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 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 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 yeah a little bit like bluish 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 cool 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 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 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 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 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 yeah yeah 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 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. 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 um the value 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 yeah in this case eight uh will get translated into eight times four which is thirty thousand structure cool 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 it cool yeah we're talking about the times four thing yeah yeah okay yeah and there's yeah that's that's how how it works so aside from the sizes yeah yeah you can definitely use both except two 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 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 maybe i should have maybe should have added the components and then build uh build the styling as well but yeah no 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 purchase 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 culture honestly i appreciate the the how the demo is kind of github styled like i like that thank you for that effort 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 so we don't really need to care about their values when we are overriding the components awesome do you mind oh good i was going to ask if you mind if i check the chat to if they haven't no of course yeah 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 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 like really close to the to the chakra span even though if i add face so yeah just for the uh sake of simplicity i added the nbsp uh because i'm using the chakra dot span in this case gotcha so yeah it's not required or anything yeah 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 no the emotion is the is another framework that we use under the court yeah 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 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 yeah 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 ah okay yeah let me share my screen real quick and oh can you yeah are you forgetting that i actually have to add it 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 that's how we can use the toggle color mods to actually jump in and out of the dark modes it is snagic magic thank you so much you

Channel: GitHub

Views: 7,871

Keywords: open source, web development, design system, chakra ui, ui design, design systems, software engineering, dark mode, light mode, software development, overriding components, ui development, user interface design, user experience engineering, user interface development, figma design, javascript, reactjs

Id: epJuxo8FKFA

Length: 29min 56sec (1796 seconds)

Published: Sun Jun 12 2022