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