understanding-sampling/src/scss/config/_colors.scss

// the colors map variables used throughout the project
// ======================================================================

// define your colors here, and feel free to use 'real' names, just
// like below --> color-red: #fff; but never use those colors in your
// project, only use the map + mixins, where you assing the colors in

$color-grey: #616161;
$color-grey-light: #f0f0f0;
$color-grey-another: #9b9b9b;
$color-white: rgb(255, 255, 255);
$color-red: #d0021b;
$color-red-soft: #ffb8c1;
$color-green: #7ed321;
$color-light: rgba(0, 0, 0, 0.08);
$color-blue: #90cfeb;

$colors: (
  default: $color-grey,
  main: $color-red,
  sub: $color-blue,
  error: $color-red,
  correct: $color-green,
  inverted: $color-white,
  border: $color-grey,
  background: $color-white,
  button: $color-grey-light,
  lightbackground: $color-grey-light,
  grid: $color-light,
  axis: $color-grey-another,
  soft: $color-red-soft
);