CSS Tips and Tricks
Use the HSL Color Space and Scoped CSS Variables to Prototype UI Variants
In this lesson, we demonstrate how leveraging the power of scoped CSS variables in combination with the HSL color space can be used to quickly prototype UI variants. In this demonstration, we create some button variants.
We create four different variants where new variants can be created with only a few lines of CSS!
Jhey Thompkins: [0:00] We have a basic button with some basic styling. Let's add some color to our button. Let's go with #e74c3c. While we're there, let's change the text color. Now, we have a button with this red color. What if we want to color change on hover or active states?
[0:24] We could use a color picker to find different variance of our color for the different state. An alternate approach might be to change the color space we use to hsl. Now on hover, we can darken our color by adjusting the lightness of our hsl. Now when we hover, we should see a change. We can update the active color to be even darker.
[0:57] Now, we have free background color state based off of changing the lightness, and we didn't need to use a color picker to go and find the extra colors.
[1:04] Let's update our transition so that the background color also transitions. Now, we have a button whose background color changes through the different states. We adjust the lightness to our needs and added benefit of using the HSL color space, is that we can take that lightness and turn it into a CSS variable, and then we can use scoped variables for the different button states.
[1:31] We can see here, our buttons still behaves the same, but taking that combination of the HSL color space and CSS variables, we can take it a little further. Now, we can change the hue variable and get a similar result without having to go and find those colors. Then we might set and take this further by creating variants of our button. Maybe, we have a confirm button, a delete button, and a warning button.
[2:04] We can update our button styles to use the new button class and set our default hue to 190, and then for each variant, set scope too. Maybe, confirm is 90, warning is 45, and delete is 10. Now, we have four button variants. They all work in a similar way using the HSL color space and scope CSS variables.
[2:38] In review, we can leverage the HSL color space in combination with scoped CSS variables to quickly prototype different variants of our UI. In this case, buttons.