Building a personal Design System with Kaelig
Coding Design Systems
A course on how coding a new Design System in Backlight from scratch for your personal brand.
Based on the project of reshaping his personal website, we go through the process to start from scratch his very own Design System based on the dedicated Figma files. We cover the Tokens declaration and their use in a component. Then we publish the Design System to the npm registry, to finally import it as a dependency in a Next.js app.
This episode is also an occasion to cover the W3C Design Tokens Community Group activity, and the expectations of the incoming specifiation.
About Kaelig
Kaelig’s a co-chair of the Design Tokens W3C Community Group, and has worked as a front-end developer on open-source design systems at Shopify, Salesforce, the Financial Times. Disclaimer: Kaelig is an advisor for DivRiots, the company editing Backlight.
Resources
Transcript
mads: Hello everyone! Welcome back for this new episode of Coding Design System with Georges. Hey georges, How are you?
Georges: Hello mads. What’s up?
mads: Hey, I’m fine. I’m fine! Today we’ve got a big guest! This is a French Connection today because we’ve got Kaelig on the show today! Hey Kaelig, how are you?
Kaelig: Hey, I am well, thank you very much for having me. I’m excited to, to code some design system.
mads: Yeah, it’s a pleasure to have you today. Um, so we’ve got a lot of things, uh, scheduled for today. Um, just to introduce you to people that may don’t know you, you are actually the co-chairman of the Community Group, the Design Token Community Group at the W3C. So could you give us some pieces of information about it and what it is and whatever you are planning to do?
Kaelig: Sure. Yeah. So the Design Token, uh, W3C Community Group is, uh, a group of folks that are experts in the industry, um, and looking to standardize the format around which tools and designers and developers can agree on to encode design decisions in the form of Design Tokens. So anything that’s got to do with colors, typography, animations, um, spacing, et cetera, you name it, um, that is something we’re working on. And so we have, uh, our first public, uh, editors draft that was published about two, three months ago now. And we’re gonna be releasing a working draft pretty soon, um, and it’s a, it’s a community of about 250 people, plus a bunch of folks in the vendor, um, industry such as Adobe, Figma, Sketch, et cetera, um, and Backlight ,‹div›RIOTS, uh, who are looking at, at, uh, at this. And then we have a team of editors, the, the folks who are actually writing the specification, uh, of about 12, 15 people. And one of which, uh, is the co-inventor of Design Tokens, uh, Jina, who you may have heard of if you’ve been following the, the Design System industry for, for a bit. And then, um, we also have someone who, so we have Val Head as well as who’s, uh, a super well-known and amazing leader, uh, in this field. And, uh, from the get-go we also had Danny Banks, uh, who is the author and creator of style-dictionary, which I believe we might be using today. So I’m excited.
mads: The plan! Okay. Wow! Thats’s great. I just saw that you released a survey about the new modules for, uh, for the, um, the specification dedicated to colors and animation. That’s it?
Kaelig: That’s right!
mads: What are your expecting from this one?
Kaelig: So, um, the, the editors that have been working super hard on trying to find what are the best ways for the first version of the format specification to encode colors and animations. Um, so we have a few questions for the community to ask them. For example, would you rather have one format for including colors, such as hexadecimal or RGB, or would you prefer it to be pretty free and free form and allow you to, uh, put your design tokens in RGB or hexadecimal or HSL et cetera, et cetera. So, for a v1, um, our hunch so far has been that we probably want to be a little bit strict and, um, not go too broad and not allow too many formats, but that’s why we’re engaging the community, uh, the communities that, uh, thoughts on that and get their advice so that we can build a format that is inclusive and make sure that we’re not getting in the way of people doing their jobs. Um, but yeah, so that’s, that’s kind of what we’re looking for and it’s kind of guidance from the community.
mads: Great. Awesome. Um, what, um, are you folks that are just following this topic, then the idea behind it is that we could after, um, after that, by having a specification like this one to interoperate between different tools like designing and Figma or Sketch and exporting the Token and reimporting them in a common format in tools like backlight. So it will be a, it’s a promise of big interoperability between tools, designer tools, developer tools. So, um, yeah, it’s a bright future for all of us, I guess. So.
Kaelig: Yeah, I’m excited for the amount of tooling that this enables and the workflows that this enables cause first comes to the format, then the tooling it upsets and then the workflows evolve. Uh, one of the, the big thinking behind Design Tokens is that you want to have a single source of truth for your design decisions. And in a sense, it’s kind of hard to do right now with no common format between design tools. Um, so this is what we’re shooting for.
mads: Cool. That’s awesome. And we’re really looking for that. Um, we have a lot of things to do today for is this coding session, so maybe we could switch to it if you, if you’re ready, Georges?
Georges: Yeah.
mads: Let’s go for the coding session. So, um, the idea for this episode is to start a new Design System for your very own needs for you, your new website, your personal website rebrand. So, um, so you shared with us a Figma file, uh, in prior of this session. And, um, yeah, we are looking to if, if we’re able to implement it, so let’s go, let’s try it. We picked a bit of technologies we choose to stick on react and CSS, um, CSS modules, I guess. So we are trying to, uh, import the tokens in style dictionary format, and, uh, we will try to plug it after it, if we, if we get, uh, enough time in, um, maybe a Next JS application or a Remix JS. Yes. I don’t know. We will see, uh, which one fits the better. Um, is it okay for you?
Kaelig: Sounds good. Let’s do it. Great. Uh, just a quick disclaimer, to give you a sense of, of why I’m building this website. Um, a few months back, I, um, I left Shopify and that was an awesome job. I loved it. Uh, and during that time I ended up going from coding every day, doing a lot of front end, lot of CSS to doing more of an operational role and more strategic thinking around how we do front end at Shopify. And, uh, I started missing a little bit, this kind of craft of, uh, building things in CSS. And I wanted to get back into the flow of how do we even make websites today, um, from start to finish. So during my time off, I’ve been making a few different websites on different, uh, stacks, and today, um, I want to, I want to use this opportunity to think about how do we with technologies that I use that Shopify make a simple website with. Um, so it’s a one page website and it’s been created by a designer based in, um, in, in India. So we haven’t spoken very much. It’s kind of a new way for me to collaborate. I typically, I’m very, hands-on in the design process and very like do a lot of back and forth. But in that case, uh, I left him go and, and, and create essentially. And I found him on Twitter, uh, his name’s Saurabh and, um, I’ll put his, um, his, uh, Twitter in the show notes. And, uh, yeah, we’ve been collaborating on this. Uh, so you you’ll see a lot of micro interactions in the, in the Figma file, a lot of design details around shadows and folders and such, um, And, uh, yeah, so not a whole lot of breezy, super complicated react probably, but a lot of small CSS, tricky things, uh, I believe so on. Um, I want to have a good component, uh, kind of workshop environment, because there’s going to be so, so much detail to, to figure out
Georges: That sounds like a plan and also starting right off with a Design System.
Kaelig: That’s right.
Georges: So let’s go. Let’s, let’s go. Um, Kaelig do you want to start on your, um, on your own workspace or should we create the new workspace, uh, for today?
Kaelig: Uh, for today, I don’t mind just go for it.
Georges: How should we call it then? Kaelig? Or you’re…
Kaelig: Sure.
Georges: Let’s say that. If it does exist or not.
Kaelig: And so disclaimer, I’ve used Backlight in the past, but not in production. So I I’ve tested it, played around with, uh, with what you can do with it, but I’ve never actually created, uh, a Design System and then imported it in my app.
Georges: No problem. Uh, we’re going to start, I’m wondering if we’re going to start with a React one or just a blank, but I think we’re going to just start fresh.
Kaelig: Yeah. And by the end of this, uh, this session, what would look amazing to me is to have the, a couple of components that are in Design System and then importing them in my Next JS app.
Georges: Yeah.
Kaelig: And then, so I have the deployment workflow set up, uh, on GitHub using Netlify and I have a Storybook as well, but anyway, what I would love to do is to be able to, uh, import components directly from Backlight and then work on that.
Georges: Oh let’s do that. Um, so I just created a new workspace, Kaelig, and I made it, uh, I created the new, uh, blank Design System. I’m just gonna rename it quickly. Um, so how should we call this Design System? Do you have a name for it?
Kaelig: Design System.
mads: It’s a trap!
Georges: Okay. Let’s do this saving so good. Um, so I think right away, I’m going to jump in and do a bunch of tokens.
Kaelig: Sounds good.
Georges: You did send a, a few, uh, design tokens. Let me put that on my second screen so it’s easy. Uh, so you, you already have a few colors setup. So I’m just, uh, I’m just going to do these, uh, so I’m going to do a new, uh, tokens.
I’m going to do some colors and then in colors we’re going to create the same colors. Um, we like to do it in a CSS in those cases, and then you did this. I would, the colors are not very visible here. There’s something we need to, to fix. Um, and so can you tell us more about those colors? Those are, um, more or less, uh, your palette, is it?
Kaelig: Yeah. And those are, again, I haven’t much of a discussion with the designer, um, and typically I would collaborate on finding a good way to name those, um, either semantic fee or, and whatnot. But in that case, it’s just what I had in, uh, in the Figma file. And I just stuck with it for now.
Georges: Okay. Okay. So you feel okay with that? I’m going to rename them, uh, just a color and then a color palette, and then I’m going to do, uh, just Beige because there’s no other one for the moment, just to make it.
Kaelig: So I would just, for now, if you can just keep the names so that it’s the same as the Figma file. It’s it’s not great, but it’s for consistency. I prefer having executive same names. Oh, sorry. You can put color palette if you want, but just, if you can keep the a hundred, I know it’s a bit weird, but I’ve thought about it. That that was my first instinct when I created those variables. And then I was like, well, then it’s inconsistent with the. As well have a Jack with the designer and rename those later.
Georges: We can do a few things, we can.
Kaelig: And by the way, it’s, it’s something for all devs out there. If you’re going to rename Tokens, don’t do it in a silo. Just always try to talk with the designer and with the team to think about a common language, even if it’s, um, yeah, it’s just, just something I’d like to do.
mads: We had a great discussion with Thais, our designer in the, in the Coding Design Systems… Design System Journey, the show, about the tokens and how we could, um, inherit some values in your application, you have Design Tokens, but you can derivate from those tokens applications tokens, and components tokens, and so on. If you don’t have, saw it, I recommend that you have a look at this episode dedicated to the Design Tokens.
Kaelig: I have again. Yes. I saw it. Reminded me of a lot of discussions I’ve had in the past.
mads: I’m sure of it.
Georges: So I’m picking up, I’m picking up on CSS. There we go.
Kaelig: And so what I would typically do is, uh, because I don’t have a, some very semantic system at this point is that I would just use these colors and, and put them in a, in the files for now. And then as I start to see a system and merge from the repetition and using them all over, I start thinking of what is, what is a primary color? What does an action color, et cetera, and stop naming them the magically so that when we start using stuff like dark mode, et cetera, um, we can, we can use those semantic tokens more easily.
Georges: We may want to create one semantic at least for the couple of components we’re going to create whether it is about, uh, an or, uh, like a primary or whatever. Um, but, um.
Kaelig: Okay.
Georges: So for the moment, um, my plan would be to have those tokens that we created and then, uh, to start documenting them, uh, right away. So especially we can see them. So, uh, I’m gonna do in, in the dark. And then, uh, in the dark, I’m just gonna do a, uh, an index, uh, and D uh, actually I’m gonna do, uh, an MDX because we’re in React. It would be very nice and easy. Um, so then I need a few, uh, imports, um, but that’s okay. Um, bare with me just a second. Are we going to import react from React. And we’re gonna import, um, I think which is MDX, from uh, mdx-react, uh, mdx-js/react. And then, uh, we can say color palette. Let me see if we have something. Uh, what is it missing?
mads: Yeah, we need to export a default layout, for the MDX.
Georges: Yeah. But, uh, do we really need, this is new. We don’t, this is not mandatory. Uh, so we’re going to dot it right away. Uh, so we need a layout. Um, and I do, can I do just this? No. So let’s, let’s go and find out the layout who has a layout in MDX. Um, okay. Just going to pick up something very quickly. So I’m going to do, got to do a layout for the documentation pages. For the sake of, uh, to doing this very quickly, we can do that in TSX and we can layout those things we all need is, um, we don’t need a logo for the moment, um, at all,
Kaelig: It may be quite cool to have something that generates the documentation, uh, using something like dockit or, uh, or like a templates page that, um, I could just “push plus” does it.
Georges: Exactly. So what we’re doing here is from dockit-react, which is the open source, uh, an open source a toolkit for creating a documentation for design system that we open-sourced, I I’m just picking up the default layout and then I’m laying out a default MDX provider, uh, for MDX, uh, and I’m gonna, and this is exported as an MDX layout, and then I’m just gonna do, uh, an index.js here and I’m gonna export, uh, everything from source. And so this way, uh, I can go into my documentation and actually import the layout directly. So if I’m fine… Just check out my note to go quickly. Boom. So basically I import the layout from the layout and I export it in default and this gives me, gives me…
Kaelig: But we don’t have it in package.json, maybe.
Georges: Yeah, we don’t have React. And so are we going to import React, for the moment we just going to pick up the last one.
mads: Uh, and if we go back to colors…
Georges: Did I miss something?
mads: Maybe, maybe you have, um, uh, capital in your import of React. Yeah. It’s, uh.
Georges: So a missing dependency of course, with need this as well.
mads: Yeah. Probably stick on version one because starting with MDX 2, it…
Kaelig: You didn’t @ sign at the beginning as well.
Georges: Um, I need what?
Kaelig: I think the, the, the actual dependency is @mdx-js/react.
Georges: Oh, you think so?
Kaelig: It’s what it says on your dockit example.
Georges: Oh yeah, you’re very right.
mads: You’re right.
Georges: You are very right. And I did this maybe uh, two weeks ago. Oh good in my memories. Come on. So we obviously, needs to import this. At this point, we, we need to have a some automatic import of this. Ah ha. Yeah, that was working
mads: A thing that we are seeing a lot in those episodes is that we are often doing the same tasks. So yeah. Having a way to automate those templates would be really nice.
Georges: Um, so I’m gonna work… Why is this loading? Here we go. Okay. Now we have a small documentation and now let’s display the color palette. And so to do that, what are we going to do is import, um, again from the dockit-react I got the message, but it…
Kaelig: Shouldn’t the prefix be color palette? Instead of…
Georges: Since we don’t have anything else, uh, it will pick it up as well.
Kaelig: Okay.
Georges: But otherwise, um,
mads: Yeah, because it acts like I’m just a filter on the name. So you could restrain at some point, which one you want like all colors, or the color palette, or those palette tones…
Kaelig: Okay.
mads: Whatever you want. Um, Maybe we need a little stylesheet with the box.
Georges: So we can do SCSS and have some styling for the boxes, a blue um, a blue background in case we have transparency and then we can import the styles.css this is just for the documentation, but it’s still not working right now because, um, there is no, uh, colors and there what we’re gonna do is we’re gonna, um, we’re gonna import the colors and if I’m right, here we go. So we importing the colors, which are here, these defines the CSS custom properties. Then we load this stylecase component that we’re going to layout, just inside the documentation. We just applied to a few styles of the boxes because we can make those boxes the way we want, um, and then, um, we apply here the layout so that we have a small logo and a small menu and, and all the dark mode here, because I’m in dark mode in this particular browser.
Kaelig: Cool.
Georges: Um, and then this is where, um, if we go here and if we know, you know, if we go for example, um, uh, for the sake of, um, the explanation, if we go primary and we pick up the primary is, uh, the color palette, um, and I’d say, I don’t know what is it’s exactly, but link blue. This is what we want. Um, we can then go into the dark and then have a more offer semantical color, and then we can say, okay, semantic then, um, that’s. Let’s say it is, um, so we can properly match them and boom and so you can organize your color really the way you want. Okay. And just gives you automatically a doc like this.
Kaelig: Okay. So you can share that with the designer and then talk about the, the naming. Exactly. Uh, how do I use those tokens in JavaScript?
Georges: So, um, are you mean with the, with the, um, on, uh, from, uh, uh, JSON form outside of, um, outside of,
Kaelig: Yeah, for example? Yeah.
Georges: So then this is where we need to have something like styles-dictionary where you could have the tokens defined once and then it generates the CSS Custom Properties. Um, um, and, um, uh, and the JSON, uh, so that you can, you have to maintain only one set and not having to maintain two sets.
Kaelig: Okay.
Georges: So this is what you want, right?
mads: Let’s do it.
Kaelig: Uh, yeah. I mean, it depends how long it takes. Cause maybe we want to start creating a component with this, and importing things correctly.
Georges: Maybe we could do like this first component and then publishing the Design System and then get it into the app and then, um, and then go back into those, uh, tokens and make them better with style-dictionary, especially if we have time. Um,
Kaelig: So do you want to take the code from my button component that I had in my repo?
Georges: Yep. So let’s create this button. So we’re going to create that package button. In the package button, then we gonna create, um, button.tsx and then we’re gonna paste your, um, so, um, so then here is a few things we need to do. Also. We can also pick up the CSS module. That would be a good thing.
Kaelig: Yeah.
Georges: This way It’s done. Oops. So now, um, so the few things we need to figure out: the Next’s Link, and…
Kaelig: You could remove that for now.
Georges: Classnames. So we can remove as far now, uh, we’re gonna just do, um, that.
Kaelig: You can move the href
Georges: We gonna move the href here, and just remove that for now you want to use a link, and not a button is that…
Kaelig: Well, it just so happens that a there’s no actual buttons on my website. So I just call them buttons. Cause they look like buttons, but really they’re links. I might rename it later. I don’t know. Or maybe I’ll make it. If I happen to have a button at some point I might like a semantically correct button. Um, maybe I’ll do it now that allows that. But for now it’s just links that looked like buttons.
Georges: Sounds good. I’m just gonna import React here.
mads: Yeah, because the Next’s Link is, uh, handling the routing part of the next application. That’s it? So um…
Kaelig: Correct.
mads: Okay. So we need, we need to figure out, um, how to properly export the button, but allow people to just plug it in the link. Uh,
Georges: So we need to, uh, we need to, uh, install on this. Um, this. It’s mandatory, right? This is because there is some sort of, um, helper.
Kaelig: Yep. Correct. It’s a class names concatenation helper.
Georges: Okay. So I installed it. This is okay. Um, and then, uh, so this shows the web…
Kaelig: So what about CSS Modules?
Georges: Yeah, it should. It should just be okay here. Just the fact that it’s named .module.css it understands that it’s a CSS module and then the style is loaded properly. And then you have this, uh, class, uh, which is here. This is all good.
Kaelig: Yeah.
You’re going to want to rename the CSS properties in the CSS cause they, um, they don’t have the prefix, uh, beige 100 should be colored. Cool. And then everything is in pixels here, but in my repo, I have a postCSS config that transforms all the pixels to Rems um, Uh, and I don’t know how to do that in, in backlight, but that’s maybe something for another session.
Georges: Yes. PostCSS is, it’s a whole new world. Um, so now that we have some sort of, uh, something compiling, I think it would be nice to have a story to show it. Um, so we’re gonna go into stories we’re gonna have, um, uh, index.stories.tsx. Again, we can do this. Um, then I think we’re gonna import React again because we’re gonna do a JSX into these.
Kaelig: I have stories actually. So if you want to
Georges: Let me pick them up so I’m just gonna pick up. Okay a story. I don’t think we need this ,maybe.
Kaelig: Oh, you’re going to want to install Storybook React, I guess. And you’re going to want to import the button’s props.
Georges: And, uh, I need to export it as a name, so we’re gonna import the button that we just build. And this was from button.
Kaelig: And the props as well, sorry.
Georges: And the props. And to props. They’re imported right?
Kaelig: Yep. Yep.
Georges: Um, and so we have that, I’m just going to install, um, sorry,
Kaelig: But this one put 6.4.
Georges: .0 ? I don’t remember.
Kaelig: Um, yeah, it should be
mads: Doesn’t matter.
Georges: And so if I go back to my button, I save, Be Happy with this new story, I should have my stories that load up.
Kaelig: I think you need to export some meta. Metadata.
Georges: Yeah, we don’t. I know you define them, but we don’t need them. Oh, Okay. Because we extract them straight from the, so we just need to have like the basic and the small, which are here. And as you can see, they are here and we can add them all together.
Kaelig: Okay. So I think we need, we need the CSS properties to be globally imported, right?
mads: Yeah.
Georges: Yeah. Not globally, but I think what we’re missing here is the fact that this is really, um, relying on the colors um, but it’s not importing. And so this is where I like to do, or there’s many ways to do this, but I think I like to do is with a SCSS.
Kaelig: Well, hang on, because if we do that, that’s gonna, that’s going to import the root, the, the, this code every single time.
mads: Yeah.
Kaelig: In every component.
mads: The right way to do so is probably to export um, those declarations in, uh, in, um, mixin in Sass, mixin and include the mixin on the, when we need it. The other way is just to use PostCSS to finally wrap the content and just deduplicate the content on the final CSS, which is also a solution.
Kaelig: Well, I don’t think so. Cause cause you, you, uh, the way the cascade works is you don’t, you don’t want to have to mess with. But those imports too much that you want to have them imported just once that’s it. I don’t think that a mixin is going to be helping us here. What we could, what would typically do is that in preview.js or preview.tsx, whatever of storybook is that we have that impulse to import that, um, global those global styles, uh, where I also define stuff like default font, et cetera.
mads: Hm.
Georges: Yeah but, um, there’s many ways to do this. Um, the fact that you can import them here in SCSS. I mean, I can go back and move them in CSS if we prefer, um, the fact that, that I import, it’s a SCSS relation. We roll them into a single file anyway so all the styling inside the design system, because we’re building with Vite so far and, uh, this will create a single CSS. Uh, filed for all the global, um, CSS and CSS modules that are using, used in the, in the design system. Um, so the whole thing will only be present once, even though we import them specifically at certain locations where we need them. Um, so I, I wouldn’t be too… too worried. Um, but if we want to just, uh, be very specific, we can just import that in …
Kaelig: Oh, is there some sort of global layout for stories that you have or something like that?
Georges: We can just do that. Yeah. So what we can do is like we can do, um, in a layout, um, and then in story.layout, we can do, um, you know, story. We can do a decorator or we can do a really, just a helper. Uh, we can, uh, helper.ts. And then, um, I’m just thinking what is the best, but, uh, yeah, that this is enough, then we can just imports, for example. Um, we’re gonna just import the colors um, and we’re gonna pick him to call his dog to SCSS check the name. I call him honest, USS. Um, and then we can also, uh, well, that’s about it. That’s what we need. Um, you usually create anywhere some sort of a aggregate of all of your CSS variables. So you can do that here. Um, and then once you’ve done this, um, in the stories, here we go here and we can just import, um, The problem is star relay out source Alper, and this will create, we load the CSS custom properties. Great. When we’re going off screen.
Kaelig: And I had some global, do you want to, do you want to also put the globals and you have some global as well? Yeah. It had the globals. There’s a global, uh, that CSS in the styles directory. Yeah. Yeah.
Georges: We can do this.
Kaelig: And there’s a bunch of fonts in there, so I dunno if we can do that as well.
Georges: Yeah, we’re gonna try. So we’re gonna put that in here. For the moment. Sorry, gonna call it global style. And then here we gonna put a global.css and this is what you have, right? So you have a, so you’re importing this. I have to check this what this is, but we don’t need it anymore because this was containing the colors. So we have a bunch of fonts and, and we have some defaults for the body. So this will usually go, uh, in the app, uh, and not, uh, in the Design System, then you have the typography. So.
Kaelig: Uh, for the font family, maybe we’re going to need it.
Georges: It was defined there.
Kaelig: Yeah. If you want, you can remove the padding and margin, but I think we’re going to need the font-family.
Georges: And yeah, maybe. And stick with this only for the stories maybe.
Kaelig: Yeah.
Georges: So maybe we can do, um, we can do this, um, go here and do some, um, sorry, styles. I’m really making a bad name, but, uh, so this, this would be applied in the stories only. That’s what we want to do. And so here we can import the stories styles. So we load the CSS custom properties. Then we load this, the style, for the stories, and this is only used for the stories. And then on the global, we keep with the font and a few elements. So we would usually move that into a typography kind of token here where we can look at this later on. And the hero is this specific to the host application. So for the moment we can just remove it.
Kaelig: And oh, the hero styles are actually heading levels. It’s just so happens that those headings are called a hero. But yeah, they’re just texts for now as well. It’s like if you had a H1 alternative.
Georges: Ah, okay, so this will go in topography.
Kaelig: Yup.
Georges: Okay. So let’s keep it.
Kaelig: And then for the custom media queries, I don’t know if PostCSS here is going to like that.
Georges: Uh, where they are, where are they?
mads: I guess we could…
Kaelig: In the H1, look at the H1.
Georges: Ah Yes.
This is specific to PostCSS, a PostCSS plugin here?
Kaelig: Yeah. So this is a, still a stage one, um, W3C proposal in the CSS spec. And that’s why you need to PostCSS to process it because custom media queries on it supported in, in browsers right now. Uh, as far as I know anyway, but yeah, so we can either remove them for now or, yeah.
Georges: I think you can define them, um, in a different way.
mads: No, we could still rely on Sass to define them. With a token dedicated to…
Georges: Now we have new global goals. Um, and, uh, And then what we can do is the story globals. We load the story styles. And then we can load,uh, the global style at least the stories they get the right… stories… get, uh, the right thing. Um, I was still missing something, right. I’m wondering, I’m wondering why it is cutting up here.
Kaelig: Uh, don’t worry about it. It’s… I had the same in mine. It’s because it’s an inline element. It’s not even block or anything. So I think that might be why. I haven’t styled them properly yet.
Georges: No problem wanting to be fast, but I’m just going to export the, do some default, uh, sets up here for storybook, uh, so that we can get, um,
mads: A layout centered?
Georges: Yeah, there we go. So this way.
Kaelig: Nice.
Georges: It’s easy, easy peasy.
Kaelig: Yeah. How do I define global Storybook stuff?
Georges: So we don’t have a global Storybook, um, equivalent. So, so far you have to import it into the stories, but this is something that we are, um, that we are thinking of is, uh, creating here. Um, the equivalent to preview.js. That’s what you’re mentioning, right?
Kaelig: Yeah. That’d be awesome.
Georges: Yeah, exactly. Um, sure I was wondering, um, if something was done recently, but I don’t think so. Um, I, uh, yeah, we did actually, we did actually, so we can try. You want to try?
Kaelig: Let’s do it
Georges: It’ll be my first time , see? So we do a stories.preview.tsx, and then we can move this stuff here. So stories.preview.tsx and we could do this. And then this means that in my button and in my stories, I can get rid of this because. Yes. It should be the case. Yeah. So you see the documentation is not always perfect. Um. Oh yeah, yeah, yeah, yeah. Wait a minute. Yeah, no, it should be the case. Uh, if I just import it, it should be working straight like this. Yeah. I think I saw something, uh, about this. Recently, so this is still not working, so I leave it there for the moment. And then…
Kaelig: Yeah, sounds good.
Georges: We can reactivate it.
Kaelig: Let’s publish it. Let’s publish it. We have a button and we have colors. Um.
Georges: Let’s do this so we can also push it into Github uh, but, uh, for the moment it doesn’t really matter. Um, and let’s publish it. So we gonna publish it here. Just, just gonna publish it to, uh, this, uh, scope and package for the moment, but you will be able to create your own, uh, uh, package.
Kaelig: Okay.
Georges: So we can create, uh, uh, some minor and we can release.
Kaelig: Cool.
Georges: Are you excited? Your First?
Kaelig: Oh, no.
Georges: Um, so unlucky, um, let me just, so what was the error? We don’t even have the error, right? Okay.
mads: Because the story-styles.css isn’t…
Kaelig: Maybe that’s why it wasn’t working.
Georges: Yeah, yeah, yeah, yeah.
mads: We’re trying to import something that doesn’t exist.
Georges: Yes. So, um, we’re gonna fix that, right. So, um, this is what we want you to have inside it. Um, so what I could do, just, we could simply go, um, story-layout for the moment, but this should be. Much better. Uh, let’s see if it works, actually. Yeah.
Kaelig: Awesome.
Georges: We just need to clean this. Uh.
Kaelig: No, no, no, no, no. The cleaning is for the weak.
Georges: So we could do much better than this but, um,
Kaelig: No this is perfect, let’s ship it!
Georges: Let’s let’s see. Uh, so let’s retry,
Kaelig: You should have a little bit of technical debt. Otherwise it’s not fun.
Georges: Okay. Let’s see.
mads: Those guys are professional don’t do that at home kids? Okay!
Kaelig: Yes. Yeah.
Georges: So here we are. So now we have the NPM package. It’s there NPM is Okay to load it.
Kaelig: We’re running out of time, but we got, at least we got the, yeah, we got it. Awesome. Yeah. That’s great.
Georges: And now we just to have…
Kaelig: On Unpkg? Can you go on unpkg and show me the content of the…
Georges: Yes.
Kaelig: Cause I’m curious about how it exports and… okay.
Georges: So the important things to know is that, um, the global styles are inside this style.css, so everything. As being, you know, put together into one file and this is the file that needs to be imported, um, in the host app. And this is really reminiscence to Vite and how Vite manages global styles, even if it’s CSS modules. And so you need to import that. Uh, and then we have the button and in this, uh, we have the, um, button.js, and the, the right code.
Kaelig: Cool. And it’s perfect code. It looks amazing. And then. How do I import the button? Let’s say, I want to import the button. Yeah.
Georges: Let’s do this. I mean, we’re gonna do, uh, some, uh.
Kaelig: There’s no, there’s no index.js. So I was wondering how do you… Where is the import statement for that?
Georges: Well, it should have, so let me, this is maybe something I forgot about. Yeah. So you can do an index.js and then you just, um, you just export…
Kaelig: I don’t mean index.js In the button itself, I was thinking about, um, if in my application, I want to import the button. What is the path right now?
Georges: So you can, you can create, uh, so let’s go back to here actually. So you can create an index.js here. And this is where you can create it here, actually. So those are the roots files. So if I create an index.js, you can create an export exactly what you’re… Um, and then on the button, you can also have an index.js, so you can import the button like this instead of going to this, because that’s, that’s how it is today, but we can fix those things. So that’s, let’s do it’s actually, because this is cool. So if I do, uh, I export it, uh.
Kaelig: And the index.js is not going to end up in this?
Georges: No, no, because it’s in the root folder here.
Kaelig: Okay so I just need to import it. Okay, got it. Yep.
Georges: Yeah. Uh, so I’m going to export this, this, and so what is in export button? Yeah. I’m going to re-export one button exports, which is, uh, which are those two things. And so this would be exported here, uh, source. And then, uh, what we can do here is. I’m thinking like, if we want to do an index.js, and then we can do exports, let’s say we want to export button and then we can export, uh, um, um, button, and this would pick up the index in the button. And so now if I re-export the new release, which is just a patch and we go and just go here and then I pick up the new version. Not yet… Let it load.
Kaelig: Where do the types get exported?
Georges: Um, so when I do a release actually, If you want the types then you have the types here for the typings so I can do another release.
Kaelig: Yeah. It’s release galore.
Georges: Yes. It’s nearly too easy. Yeah.
Kaelig: It’s one of the things, one of the teams I joined a few years back, uh, it took a few days to, to release the design system. Uh, it was, uh, quite a few steps involved in releasing the website and making sure everything worked so much QA and my goal there was to get the release process to be a non-event as in like what we’re doing right now, which is just push a button and everything works. Uh, and it, yeah, it worked out, uh, was way less stressful by the end. And it took 10 to 15 minutes, I think, to release instead of three days, which was nice.
Georges: Yeah. I realize it’s so stressful. Uh, uh.
Kaelig: I think, uh, unpkg tends to cache pretty heavily. So yeah.
Georges: We’re not going to be able to show that maybe because otherwise, otherwise we just go and import it.
Kaelig: Yeah. It doesn’t seem to show up.
Georges: So we can do a Stackblitz and Next, this is a Next.js application you want, right?
mads: The next.new is working.
Georges: So this is the new web container stuff. I should have a Next application in no time.
mads: So we can install the design system into the package.json, in the meantime.
Georges: Yeah. Good. So we have the app. Um, let me just check, uh, welcome Next.js. And Backlight there we go. Yes. Oh, what just happened? Okay. That’s because I just pressed, pressed save.
mads: Hey, you know, in doubt, reboot.
Georges: Yes.
Kaelig: Yeah.
Georges: So now what we do is that we do NPM install this, and we do install your design system.
Kaelig: Oh my gosh. Yeah. I wanted to test, Stackblitz, it was on my to-do list for awhile. So I’m excited. It’s done tonight.
Georges: And there is two Stackblitz. There’s Stackblitz with Web Containers where you have a more or less a node environment, um, running in the browser and you have the Stackblitz, uh, where, uh, there is no emulator and you run, uh, the projects, uh, directly instead.
Kaelig: Yeah, I think cloud development is, is awesome. Um.
Georges: It’s just, it’s just so, so much the future.
Kaelig: And even when I developed locally, I just set up my windows machine a few days ago. I mean this week, essentially to set it up for development and I was trying in the past to work on windows and now I work only on, uh, windows WSL. I don’t even know what it stands for. Um, and it’s basically virtualization. So the next, yeah, and the next step would be to take everything to the cloud, but I’m not there yet. We’ll see. Maybe I’ll start using Stackblitz more heavily. Um, but what I can say is that it took me like, I don’t know, maybe eight hours to get. The whole, my whole setup properly working. And I was like, this is not good. It shouldn’t take eight hours to get TypeScript, plus Storybook plus, uh, Next JS, ESlint, Prettier. Well that, and I know their starter kits out there, but I wanted to kind of get a sense of what the effort was for myself. And it took a while to even get CSS Modules work everywhere. And…
Georges: And there is a lot of Starter Kits but none of them are exactly what you want. So, but now I started again. And so now you can really, it’s just, okay, now it started and now you can really, uh, start and call your, your, your stuff so we can import, uh, so what we have to do first is to import, um, um, and…
mads: Import the Styles. The application styles.
Georges: The styles. This is styles.css. So are we going to import this, that’s the first step because we want to have the globals? Uh, yes.
mads: Any way…
Georges: This is weird.
mads: Yeah. You, you may experiment some network issues, I guess.
Georges: Uh, it’s not styles, but it’s style. There we go. So we just imported it, uh, I think your font is applied now because of that. And now we can import. The button.
Kaelig: Is the font working? Interesting.
Georges: Let’s see.
Kaelig: Cause I don’t know if we had the fonts, the font files, but anyway. Yeah, no.
Georges: Those are specific fonts that are not online?
Kaelig: Uh, correct. Yeah.
Georges: So you can just do this. And so if I did install the index.js properly, we can just do this and then somewhere like here, we can say “button”, there we go.
Kaelig: All right.
mads: That’s great.
Kaelig: Awesome. Okay. So I feel like we, we get, so just to recap, we got some colors in, we displayed them, uh, we have a color style guide. Then we created a button with a few stories. Um, yeah. And CSS modules worked out of the box. It was pretty cool. And then we import, we published the design system with the typings, which is something I care a lot about. And then we, um, imported the design system and displayed the button in the next app, which is super cool. Okay. So I feel like there’s still a few steps to get us to a, uh, like…
Georges: Yeah, there’s still a few steps and I’ll be…
Kaelig: … workflow would be super interesting to be in…
Georges: … I’ll be happy to help you for the next level, which would be like connecting to Github. And then get those, uh, get those, uh, pull requests, uh, visual regressions and, uh, and, um, and previews of the Design System. So you can really work out, uh, uh, individual PRs this way, and also the documentation of the button, uh, starting to pull out like a prop table, a playground. Uh, I mean, it’s just your website. Maybe you don’t need, you don’t want to go so far, but those are the things that we can, we can go pretty quickly as well.
Kaelig: One thing I really want to get right. Is how do I save the CSS files in the design system and see the changes directly on my local. So that’s, that’s the kind of stuff that we want. We want to discuss that.
Georges: Yes. And this is done through the link, uh, the link, come online where, um, in your host app in, uh, in, in Next, this will not work, I think, on Stackblitz, but locally you will run this and this will actually run your design system in situ off your, uh, NPM package. That’s our import into your next app. So in situ on that, this will basically replace this as you work in next.
Kaelig: Okay.
Georges: And you can do that by working on a branch. So you could do something new on a branch and work on your design system and get the immediate feedback into your next app without having to release.
Kaelig: Sweet. All right.
Georges: But that’d be a, yeah, I’d be very happy to do another, an another session where you live or not and go
Kaelig: with the workflow.
Georges: Yes, exactly.
Kaelig: Awesome. All right guys, it’s been, uh, it’s been fun. I think we’re out of time, right? Yes.
mads: Yeah. I think, uh, I think it’s, uh, it was a very dense episode, but we saw a lot of things. We still have things to cover like style-dictionary stuff and probably refined the layouts and so on. But yeah, it was a great bootstrapping session. Um.
Kaelig: Yeah.
mads: Thank you very much for being with us today. It was, it was really good to have both your feedback and your, uh, your ideas behind what you are building with your own design system, your expectations, and so on. It’s really valuable and also for us. So, um, thank you very much for that.
Kaelig: All right. Cheers, then. Thanks Saurabh also for creating the design for the site. I’m excited too.
Georges: Make sure we have a link. That’d be cool.
Kaelig: Yeah. I’ll I’ll post the link to his Twitter account.
mads: Yeah, sure. For sure. You will get them all in the YouTube page when it will be published tomorrow, you know? So, um, so thank you again for everything. Um, Georges anything you, you want to add? Um, for this session?
Georges: No, um, Thank you very much, Kaelig, it was a pleasure to have you with us tonight and I hope to see you soon again.
Kaelig: Thank you.
mads: Yeah. Thank you very much for everything and, um, see you next time for another episode. I thank you, everyone!
Georges: Bye bye, thank you.