Color Swatch

 <div class="swatch_group">
   ...
   <div class="swatch color-${COLOR_NAME}">
     <span class="swatch__name">${COLOR_NAME}</span>
     <span class="swatch__color" data-color="${COLOR_VALUE}"></span>
     <span class="swatch__bgcolor" data-name="${COLOR_NAME}"></span>
   </div>
   ....
 </div>

One of the problems that comes up with frontend development using libraries and functions to create your stylesheets is that you dont always have a visual reference to what is available in your current project.

If youre using bootstrap you can go to their site and check out the styleguide, but in a lot of cases (almost always) the styles have been added to, modified, or combined with other libraries.

So how do you see all the colors the project your’e working on has if there is no realtime reference guide. This is what motivated me to create the color swatch component for my style library. The color swatch is basically a single block element that uses the ‘currentColor’ property and inheritance to show you several variations of text and color using a color utility class. The data-[property] fields are used to display the text for ::before and ::after elements, which lets me set the text once and display it in both the light and dark variation.

I also have a handful of sass mixins that will dynamicaly write in comment blocks to the color sections of the color definition sections with html to show all the colors in a theme.

For an example I created a swatch set for the Crayola color set colors