Bulma color variable shades - lighten and darken.scss

// * Primary Color
$primary: #6d597a;
$secondary: #b56576;
$accent: #e56b6f;

// Primary - Lighten
$primary-lighten-10: mix(white, $primary, 10%);
$primary-lighten-20: mix(white, $primary, 20%);
$primary-lighten-30: mix(white, $primary, 30%);
$primary-lighten-40: mix(white, $primary, 40%);
$primary-lighten-50: mix(white, $primary, 50%);
$primary-lighten-60: mix(white, $primary, 60%);
$primary-lighten-70: mix(white, $primary, 70%);
$primary-lighten-80: mix(white, $primary, 80%);
$primary-lighten-90: mix(white, $primary, 90%);
$primary-lighten-100: mix(white, $primary, 100%);

.has-background-primary-lighten-10 {
  background-color: $primary-lighten-10;
}
.has-background-primary-lighten-20 {
  background-color: $primary-lighten-20;
}
.has-background-primary-lighten-30 {
  background-color: $primary-lighten-30;
}
.has-background-primary-lighten-40 {
  background-color: $primary-lighten-40;
}
.has-background-primary-lighten-50 {
  background-color: $primary-lighten-50;
}
.has-background-primary-lighten-60 {
  background-color: $primary-lighten-60;
}
.has-background-primary-lighten-70 {
  background-color: $primary-lighten-70;
}
.has-background-primary-lighten-80 {
  background-color: $primary-lighten-80;
}
.has-background-primary-lighten-90 {
  background-color: $primary-lighten-90;
}
.has-background-primary-lighten-100 {
  background-color: $primary-lighten-100;
}

// Primary - Darken
$primary-darken-10: mix(black, $primary, 10%);
$primary-darken-20: mix(black, $primary, 20%);
$primary-darken-30: mix(black, $primary, 30%);
$primary-darken-40: mix(black, $primary, 40%);
$primary-darken-50: mix(black, $primary, 50%);
$primary-darken-60: mix(black, $primary, 60%);
$primary-darken-70: mix(black, $primary, 70%);
$primary-darken-80: mix(black, $primary, 80%);
$primary-darken-90: mix(black, $primary, 90%);
$primary-darken-100: mix(black, $primary, 100%);

.has-background-primary-darken-10 {
  background-color: $primary-darken-10;
}
.has-background-primary-darken-20 {
  background-color: $primary-darken-20;
}
.has-background-primary-darken-30 {
  background-color: $primary-darken-30;
}
.has-background-primary-darken-40 {
  background-color: $primary-darken-40;
}
.has-background-primary-darken-50 {
  background-color: $primary-darken-50;
}
.has-background-primary-darken-60 {
  background-color: $primary-darken-60;
}
.has-background-primary-darken-70 {
  background-color: $primary-darken-70;
}
.has-background-primary-darken-80 {
  background-color: $primary-darken-80;
}
.has-background-primary-darken-90 {
  background-color: $primary-darken-90;
}
.has-background-primary-darken-100 {
  background-color: $primary-darken-100;
}

// Secondary - Lighten
$secondary-lighten-10: mix(white, $secondary, 10%);
$secondary-lighten-20: mix(white, $secondary, 20%);
$secondary-lighten-30: mix(white, $secondary, 30%);
$secondary-lighten-40: mix(white, $secondary, 40%);
$secondary-lighten-50: mix(white, $secondary, 50%);
$secondary-lighten-60: mix(white, $secondary, 60%);
$secondary-lighten-70: mix(white, $secondary, 70%);
$secondary-lighten-80: mix(white, $secondary, 80%);
$secondary-lighten-90: mix(white, $secondary, 90%);
$secondary-lighten-100: mix(white, $secondary, 100%);

.has-background-secondary-lighten-10 {
  background-color: $secondary-lighten-10;
}
.has-background-secondary-lighten-20 {
  background-color: $secondary-lighten-20;
}
.has-background-secondary-lighten-30 {
  background-color: $secondary-lighten-30;
}
.has-background-secondary-lighten-40 {
  background-color: $secondary-lighten-40;
}
.has-background-secondary-lighten-50 {
  background-color: $secondary-lighten-50;
}
.has-background-secondary-lighten-60 {
  background-color: $secondary-lighten-60;
}
.has-background-secondary-lighten-70 {
  background-color: $secondary-lighten-70;
}
.has-background-secondary-lighten-80 {
  background-color: $secondary-lighten-80;
}
.has-background-secondary-lighten-90 {
  background-color: $secondary-lighten-90;
}
.has-background-secondary-lighten-100 {
  background-color: $secondary-lighten-100;
}

// Secondary - Darken
$secondary-darken-10: mix(black, $secondary, 10%);
$secondary-darken-20: mix(black, $secondary, 20%);
$secondary-darken-30: mix(black, $secondary, 30%);
$secondary-darken-40: mix(black, $secondary, 40%);
$secondary-darken-50: mix(black, $secondary, 50%);
$secondary-darken-60: mix(black, $secondary, 60%);
$secondary-darken-70: mix(black, $secondary, 70%);
$secondary-darken-80: mix(black, $secondary, 80%);
$secondary-darken-90: mix(black, $secondary, 90%);
$secondary-darken-100: mix(black, $secondary, 100%);

.has-background-secondary-darken-10 {
  background-color: $secondary-darken-10;
}
.has-background-secondary-darken-20 {
  background-color: $secondary-darken-20;
}
.has-background-secondary-darken-30 {
  background-color: $secondary-darken-30;
}
.has-background-secondary-darken-40 {
  background-color: $secondary-darken-40;
}
.has-background-secondary-darken-50 {
  background-color: $secondary-darken-50;
}
.has-background-secondary-darken-60 {
  background-color: $secondary-darken-60;
}
.has-background-secondary-darken-70 {
  background-color: $secondary-darken-70;
}
.has-background-secondary-darken-80 {
  background-color: $secondary-darken-80;
}
.has-background-secondary-darken-90 {
  background-color: $secondary-darken-90;
}
.has-background-secondary-darken-100 {
  background-color: $secondary-darken-100;
}

// Accent - Lighten
$accent-lighten-10: mix(white, $accent, 10%);
$accent-lighten-20: mix(white, $accent, 20%);
$accent-lighten-30: mix(white, $accent, 30%);
$accent-lighten-40: mix(white, $accent, 40%);
$accent-lighten-50: mix(white, $accent, 50%);
$accent-lighten-60: mix(white, $accent, 60%);
$accent-lighten-70: mix(white, $accent, 70%);
$accent-lighten-80: mix(white, $accent, 80%);
$accent-lighten-90: mix(white, $accent, 90%);
$accent-lighten-100: mix(white, $accent, 100%);

.has-background-accent-lighten-10 {
  background-color: $accent-lighten-10;
}
.has-background-accent-lighten-20 {
  background-color: $accent-lighten-20;
}
.has-background-accent-lighten-30 {
  background-color: $accent-lighten-30;
}
.has-background-accent-lighten-40 {
  background-color: $accent-lighten-40;
}
.has-background-accent-lighten-50 {
  background-color: $accent-lighten-50;
}
.has-background-accent-lighten-60 {
  background-color: $accent-lighten-60;
}
.has-background-accent-lighten-70 {
  background-color: $accent-lighten-70;
}
.has-background-accent-lighten-80 {
  background-color: $accent-lighten-80;
}
.has-background-accent-lighten-90 {
  background-color: $accent-lighten-90;
}
.has-background-accent-lighten-100 {
  background-color: $accent-lighten-100;
}

// Accent - Darken
$accent-darken-10: mix(black, $accent, 10%);
$accent-darken-20: mix(black, $accent, 20%);
$accent-darken-30: mix(black, $accent, 30%);
$accent-darken-40: mix(black, $accent, 40%);
$accent-darken-50: mix(black, $accent, 50%);
$accent-darken-60: mix(black, $accent, 60%);
$accent-darken-70: mix(black, $accent, 70%);
$accent-darken-80: mix(black, $accent, 80%);
$accent-darken-90: mix(black, $accent, 90%);
$accent-darken-100: mix(black, $accent, 100%);

.has-background-accent-darken-10 {
  background-color: $accent-darken-10;
}
.has-background-accent-darken-20 {
  background-color: $accent-darken-20;
}
.has-background-accent-darken-30 {
  background-color: $accent-darken-30;
}
.has-background-accent-darken-40 {
  background-color: $accent-darken-40;
}
.has-background-accent-darken-50 {
  background-color: $accent-darken-50;
}
.has-background-accent-darken-60 {
  background-color: $accent-darken-60;
}
.has-background-accent-darken-70 {
  background-color: $accent-darken-70;
}
.has-background-accent-darken-80 {
  background-color: $accent-darken-80;
}
.has-background-accent-darken-90 {
  background-color: $accent-darken-90;
}
.has-background-accent-darken-100 {
  background-color: $accent-darken-100;
}