Colours

colours.scss

$color-base: #B84231;
$background-base: #212430;
$foreground-base: #E0CF9F;

$amount-of-colors: 10;

.background-darker {
  color: darken($background-base, 10%);
}
.background-dark {
  color: darken($background-base, 5%);
}
.background {
  color: $background-base;
}
.background-light {
  color: lighten($background-base, 10%);
}
.background-lighter {
  color: lighten($background-base, 20%);
}

.foreground-darker {
  color: darken($foreground-base, 10%);
}
.foreground-dark {
  color: darken($foreground-base, 5%);
}
.foreground {
  color: $foreground-base;
}
.foreground-light {
  color: lighten($foreground-base, 10%);
}
.foreground-lighter {
  color: lighten($foreground-base, 20%);
}

@for $i from 0 through ($amount-of-colors - 1) {
  $color: adjust-hue($color-base, $i * (360% / $amount-of-colors));
  .color-#{$i} {
    color: $color;
  }
  .color-#{$i}-light {
    color: lighten($color, 20%);
  }
  .color-#{$i}-dark {
    color: darken($color, 10%);
  }
}