Helper classes for colors are created for background-color and text color. They also used :root css variables. Pretty neat!


First, add your project colors to the map $s-colors in the config.scss file.

$s-colors: (
  'primary': #9085da,
  'white': #ffffff,
  'gray-light': #f1f5f8,
  'black': #111111,
  // edit and add yours

Root variables

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

Output in root

:root {
  --primary: #fff;
  --white: #ffffff;
  --gray-light: #f1f5f8;
  --black: #111111;

Use it in your code

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

.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.

color-primary color-white color-gray-light bg-primary bg-white bg-gray-light etc...


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

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