// E.g. Colours living in the variables.scss file:
// color palette
$colors: (
  "primary": $primary,
  "secondary": $secondary,
  "error": $error,
  "info": $info,
  "blue": #1919e6,
  "red": #e61919,
  "yellow": #e6e619,
  "green": #19e635,
  "orange": #ffa600,
  "purple": #9900ff,
  "gray": #808080,
  "black": black,
  "white": white,
);

//colors being looped in _colors.scss:
@each $key, $val in $colors {
  .text-#{$key} {
    color: $val;
  }
  .bg-#{$key} {
    background-color: $val;
  }

  // light variations
  @for $i from 1 through 9 {
    .text-#{$key}-light-#{$i} {
      color: mix(white, $val, $i * 10);
    }
    .bg-#{$key}-light-#{$i} {
      background-color: mix(white, $val, $i * 10);
    }
  }

  // dark variations
  @for $i from 1 through 9 {
    .text-#{$key}-dark-#{$i} {
      color: mix(black, $val, $i * 10);
    }
    .bg-#{$key}-dark-#{$i} {
      background-color: mix(black, $val, $i * 10);
    }
  }
}