// classes
@mixin generate-color-classes($type, $color, $h, $s, $from, $to, $step) {
  $i: $from;

  @while $i <=$to {
    .#{$type}-#{$color}-#{$i} {
      #{if($type == "text", "color", "background-color")}: hsl($h, $s, $i * 1%);
    }

    $i: $i + $step;
  }
}

// for primary classes
@include generate-color-classes("text", "primary", $primary-hue, $primary-saturation, 10, 90, 10);

@include generate-color-classes("bg", "primary", $primary-hue, $primary-saturation, 10, 90, 10);

@include generate-color-classes("text", "primary", $primary-hue, $primary-saturation, 5, 5, 1);

@include generate-color-classes("bg", "primary", $primary-hue, $primary-saturation, 5, 5, 1);

@include generate-color-classes("text", "primary", $primary-hue, $primary-saturation, 93, 97, 2);

@include generate-color-classes("bg", "primary", $primary-hue, $primary-saturation, 93, 97, 2);

// for secondary classes
@include generate-color-classes("text", "secondary", $secondary-hue, $secondary-saturation, 10, 90, 10);

@include generate-color-classes("bg", "secondary", $secondary-hue, $secondary-saturation, 10, 90, 10);

@include generate-color-classes("text", "secondary", $secondary-hue, $secondary-saturation, 5, 5, 1);

@include generate-color-classes("bg", "secondary", $secondary-hue, $secondary-saturation, 5, 5, 1);

@include generate-color-classes("text", "secondary", $secondary-hue, $secondary-saturation, 93, 97, 2);

@include generate-color-classes("bg", "secondary", $secondary-hue, $secondary-saturation, 93, 97, 2);

// for gray classes
@include generate-color-classes("text", "secondary", $gray-hue, $gray-saturation, 10, 90, 10);

@include generate-color-classes("bg", "gray", $gray-hue, $gray-saturation, 10, 90, 10);

@include generate-color-classes("text", "gray", $gray-hue, $gray-saturation, 5, 5, 1);

@include generate-color-classes("bg", "gray", $gray-hue, $gray-saturation, 5, 5, 1);

@include generate-color-classes("text", "gray", $gray-hue, $gray-saturation, 93, 97, 2);

@include generate-color-classes("bg", "gray", $gray-hue, $gray-saturation, 93, 97, 2);

// for green classes
@include generate-color-classes("text", "green", $green-hue, $green-saturation, 10, 90, 10);
@include generate-color-classes("bg", "green", $green-hue, $green-saturation, 10, 90, 10);

@include generate-color-classes("text", "green", $green-hue, $green-saturation, 5, 5, 1);

@include generate-color-classes("bg", "green", $green-hue, $green-saturation, 5, 5, 1);

@include generate-color-classes("text", "green", $green-hue, $green-saturation, 93, 97, 2);

@include generate-color-classes("bg", "green", $green-hue, $green-saturation, 93, 97, 2);

// for yellow classes
@include generate-color-classes("text", "yellow", $yellow-hue, $yellow-saturation, 10, 90, 10);
@include generate-color-classes("bg", "yellow", $yellow-hue, $yellow-saturation, 10, 90, 10);

@include generate-color-classes("text", "yellow", $yellow-hue, $yellow-saturation, 5, 5, 1);

@include generate-color-classes("bg", "yellow", $yellow-hue, $yellow-saturation, 5, 5, 1);

@include generate-color-classes("text", "yellow", $yellow-hue, $yellow-saturation, 93, 97, 2);

@include generate-color-classes("bg", "yellow", $yellow-hue, $yellow-saturation, 93, 97, 2);

// for purple classes
@include generate-color-classes("text", "purple", $purple-hue, $purple-saturation, 10, 90, 10);
@include generate-color-classes("bg", "purple", $purple-hue, $purple-saturation, 10, 90, 10);

@include generate-color-classes("text", "purple", $purple-hue, $purple-saturation, 5, 5, 1);

@include generate-color-classes("bg", "purple", $purple-hue, $purple-saturation, 5, 5, 1);

@include generate-color-classes("text", "purple", $purple-hue, $purple-saturation, 93, 97, 2);

@include generate-color-classes("bg", "purple", $purple-hue, $purple-saturation, 93, 97, 2);