Colors

Helper classes for colors are created for background-color and text color. They also are compiled as CSS custom properties (CSS variables).

Configuration

Add your project colors to the map $s-colors in the config.scss file. You can use any valid color value (HEX, RGB, HSL).

config.scss


      $s-colors: (
         'primary': #9085da,
         'white': rgb(255,255,255),
         'black': hsl(0, 0%, 13%),
         'gray-light': #f1f5f8,
         // edit and add yours
      ),

You can nested them inside any valid CSS selector (class, id, data-attribute, etc.).

config.scss


         $s-colors: (
            'bg': #FFFFFF,
            "text": #111111,
            "primary": #9085DA,
                
            // nested example with data attribute selector
            "[data-theme='dark']": (
               "bg": #111111,
               "text": #FFFFFF,
               "primary": #9085DA,
            ),

            // other nested example with class selector
            ".theme-sepia": (
               "bg": #FFF5CC,
               "text": #000000,
               "primary": #9085DA,
            ),
         ),

Compiled output

All the colors in the map $s-colors will be automatically added to :root and available as CSS variable (custom properties)

output.css


      :root {
         --primary: #9085da,
         --white: rgb(255,255,255),
         --black: hsl(0, 0%, 13%),
         --gray-light: #f1f5f8,
      }

How to use it

You can refer to these variables anywhere in your CSS files like this :

_partial.scss


      .staff-card {
         background-color: var(--white);
         color: var(--primary);
      }

Color utility classes

Utilty classes for text color and background color will be automatically created for all your $s-colors colors at the first level (not if only present in a nested map).

output.css


.color-primary {
   color: var(--primary);
}

.color-black {
   color: var(--black);
}

.bg-white {
   background-color: var(--white);
}

.bg-primary {
   background-color: var(--primary);
}

// etc