‫So let's now include a few, or actually,
‫a lot of global styles into our application,
‫using the styled-components way.
‫So here, in our styles folder,
‫we already have our index.css.
‫However, we are not going to directly use this CSS file.
‫But instead, when we use styled-components,
‫we basically create a brand new styled-component,
‫which will then become our global styled-component.
‫So let's just do that.
‫And let's call it GlobalStyles.js.
‫And then here, we use the createGlobalStyle function.
‫So instead of using the styled-function,
‫like we did in our last lecture,
‫we now use this createGlobalStyle.
‫And then, just like before,
‫we basically call this function using this template literal.
‫And then we can take all of our styles here,
‫and paste them in there.
‫So let's just grab all of the CSS here,
‫which I want to be global.
‫So copy all that. And paste that right in here.
‫All right.
‫And then let's also save this here as GlobalStyles
‫Like this. And then in the end, let's export default that.
‫All right. And so, now let's just quickly walk through
‫what we actually have here.
‫So here, we have a lot of CSS variables defined in the root.
‫So we have all these colors here,
‫which are actually inspired by Tailwind.
‫So, basically, the designer on our team
‫already created all of these design tokens.
‫So we have all our colors.
‫So for the brand, we have,
‫like, this indigo, like this blue color.
‫And we have these grays.
‫We have some other colors that we might need
‫for different pieces of the UI.
‫Then we have a couple of shadows already.
‫We have some border radius.
‫And then here's some stuff later for dark mode.
‫And then, here we have just our typical CSS reset.
‫So all of this here is pretty normal.
‫And yeah. So let's now include this in our application.
‫So we created these global styles,
‫but now, in order to actually apply them,
‫let's come back to our app component here,
‫and then include them right here.
‫And the way that this works is
‫that the GlobalStyles component
‫that we just exported needs to be added
‫to the component tree,
‫but it cannot accept any children.
‫So, basically, we want this to be
‫a sibling of this styled app.
‫So, basically, like this.
‫And so then, here we need to return this fragment.
‫And immediately, you see that it took effect.
‫So now all the margins and paddings are gone.
‫And we also have this sans serif font.
‫And so, all of that is coming here, from the GlobalStyles.
‫So again, this one, this component,
‫doesn't accept any children.
‫So it's a self-closing component,
‫and it needs to be, then, a sibling
‫of all the other components.
‫Now, back here in this index.css,
‫we actually have some codes
‫that we should include in our HTML.
‫So all of this here is for adding
‫two different fonts to our webpage.
‫So to our HTML document.
‫So let's grab that.
‫And then here, inside index.html,
‫let's place that here.
‫And so then, you saw that, also,
‫right away, the font changed
‫to this Poppins font right here.
‫And since we are here, let's also, right away,
‫change this to The Wild Oasis.
‫Now, okay. And then with this,
‫we actually no longer need this file.
‫So you can go ahead and delete it if you want.
‫Or, of course, you can also just keep it.
‫Now, next up, I want to turn our attention
‫to all of these CSS variables that we have right here.
‫So basically, the idea of these is to have
‫all the different design tokens in one central place,
‫so that we can then use them in all,
‫or different, styled-components that we're gonna build.
‫So let's quickly demonstrate that.
‫For example, here in our Button.
‫So let's change all of these design tokens, basically,
‫to their actual CSS variables.
‫So here, for example, let's say we wanted
‫to use the color-brand-500.
‫And so, then we would get
‫that color right from our GlobalStyles,
‫which, of course, that includes exactly that CSS variable.
‫And let's keep going.
‫And actually, let's make it a bit darker.
‫And the same thing here for the color.
‫So color-brand-50.
‫And there are also some other things
‫that we can use our CSS variables now for.
‫So border-radius small, for example.
‫And then here, we have a small bug. And beautiful.
‫Let's also add a box-shadow, maybe.
‫And so again, all of these is what we call design tokens.
‫So they might change, for example,
‫when we change to a dark mode.
‫So then it's really nice to have all these CSS variables.
‫So let's use shadow small here.
‫And so, even though it's not really visible right away,
‫it will be when this background is gone.
‫Now, instead of using all of these CSS variables
‫that we have right here,
‫the styled-components library actually also gives us
‫its own way of providing variables like these
‫to our entire application,
‫by using a mechanism that it calls themes.
‫So basically, with styled-components, themes,
‫we can also inject design tokens like these
‫into our application.
‫However, this mechanism was designed
‫before CSS variables were really popular,
‫and really usable, in modern CSS.
‫And so I think that it's actually a lot better
‫to just stick to native CSS,
‫instead of relying to this JavaScript way,
‫which the themes are off injecting
‫these variables into our code.
‫But of course, if you want to learn more about themes,
‫you can as always go to
‫the styled-component documentation.
‫So right here, you have all
‫you need to know about this library.
‫And here, you can look up everything about themes.
‫So that's not in the basics, apparently,
‫but it's right here.
‫So basically, you will have to create a theme provider,
‫as it says here.
‫And so, then you provide that entire theme
‫to the application.
‫And then, inside of each styled-components,
‫you can get access to these values, like this.
‫So at props.theme.
‫And then whatever name you gave it inside the theme.
‫So I think this is definitely a lot more work
‫than just using CSS variables.
‫Which, again, are now basically
‫the modern way of doing the same thing.
‫All right. But anyway, let's now finish,
‫also this input component.
‫So replacing this here, basically with
‫our CSS variable of color-grey-300.
‫And let's also give us, or give it,
‫a background color of color-grey-0,
‫which is basically just white.
‫And then here, also, we have this border radius.
‫Which, again, is like a design token that we can use.
‫So border-radius, and then small.
‫I think it's what it is called.
‫So yeah. We have small, medium, large, and even tiny.
‫And let's grab this box-shadow as well.
‫And now let's get rid of this margin right here,
‫because we now want to actually export
‫these components into their own files.
‫So we really want to reuse
‫these components that we just wrote here
‫throughout the entire application.
‫And so then, of course,
‫they should not be right here in this file,
‫but probably here in this ui folder.
‫So, or actually, let's do it in another way.
‫We can select all this code,
‫and then right click and Refactor.
‫And then we can just select Move to a new file.
‫And then it disappeared.
‫Well, where is it actually?
‫Okay. So it just created this file up here.
‫So let's place that into our ui folder.
‫But here, we already do have this Button.jsx.
‫And so this is because, later on,
‫we will use all of this code right here.
‫So what we're gonna do now is to
‫just grab this button right here.
‫Or actually, just this.
‫Copy it. Paste it here.
‫And let's actually export default this.
‫export default Button.
‫And we will then come back later
‫to what all of this here is.
‫So let's close that.
‫And then this file, we actually don't need.
‫Let's delete that.
‫And so now, of course,
‫here we don't have that button anymore.
‫And that's just because here,
‫it is now actually a default export.
‫And actually, it is inside the ui folder now.
‫All right. So apparently, it's easier to just grab it,
‫and create the files manually.
‫So let's do Input.jsx.
‫Paste that here.
‫export default Input.
‫And then we also need to import
‫this styled-function right here.
‫And then, also import the input here.
‫So let's do it manually.
‫And there we go.
‫Now this H1, we don't need it anywhere else.
‫And the same for this one.
‫So this one really belongs to this app component.
‫And so let's just leave it right here.
‫Even though some developers also like to export
‫the styles associated to any component
‫to its own file as well.
‫But I very much prefer to leave the code
‫as co-located as possible.
‫All right, let's close this one here, actually.
‫And now there's just one final small thing
‫that I want to do,
‫which is the hover state of this button.
‫So that's something that we haven't talked about yet.
‫And so let's go back to our Button,
‫and implement that hover state.
‫And the way we can do that is very easily,
‫and actually very similar to SCSS, or to Sass.
‫So we can just do this, which will
‫basically select the Button element itself.
‫And then on there, we can, as usually,
‫use the hover pseudo-class.
‫So then we can say background color
‫should then become a darker variation of this.
‫Like 700. And so, let's see.
‫And indeed, that is working.
‫And we even get the transition here for free,
‫because that is already right here.
‫So all the elements have this transition property,
‫which replaced here because of dark mode.
‫But it's also useful, because then
‫we don't have to place it manually in all the components.
‫So this one, again here,
‫basically simply selects the currently selected element.
‫So right here, that is this button.
‫And so then here, this is the same thing as writing,
‫like, button, and then hover.
‫But instead, it is for this exact element.
‫And we will use this here a lot more times
‫throughout the following sections.