Adding Utility Classes to Your Library

This is a premium lesson.

Subscribe to get access to the entire course.

A few lessons back we created a button utility class in an exercise. Let’s add that button to our component library for our consumers to use.

Start by opening up your long-running project. Since we’re going to be adding color variants for the button, go ahead and add the following color variables inside of the :root selector:

--black: #1e1e1e;
--white: #fff;
--red: #e00034;
--orange: #eb5a00;
--yellow: #f0cb00;
--green: #2ad600;
--blue: #1b00e5;
--purple: #cc0088;

While we’re at it, let’s update the checkbox variables to use the new color variables. Let’s also move the font family value into a separate utility variable, so we can use it in multiple places:

--primary-font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, sans-serif;

--checkbox-font-family: var(--primary-font-family);
--checkbox-outline-color-focused: var(--blue);
--checkbox-check-background-color-checked: var(--purple);
--checkbox-check-background-color-activ```