@use 'sass:color';
@use '../colors/colors' as colors;
/**
 * Font colors
 */
@if true {
  $colors: (
    'blue': colors.$color-blue,
    'light-blue': colors.$color-light-blue,
    'green': colors.$color-green,
    'orange': colors.$color-orange,
    'red': colors.$color-red,
    'purple': colors.$color-purple,
    'blue-grey': colors.$color-blue-grey,
    'grey': colors.$color-grey
  );

  $palette: (
    050: 50%,
    100: 40%,
    150: 35%,
    200: 30%,
    250: 25%,
    300: 20%,
    350: 15%,
    400: 10%,
    450: 5%,
    500: 0,
    550: 5%,
    600: 10%,
    650: 15%,
    700: 20%,
    750: 25%,
    800: 30%,
    850: 35%,
    900: 40%
  );

  @each $name, $hex in colors.$colors {
    @each $weight, $percentage in colors.$palette {
      @if $weight < 500 {
        .text-#{'' + $name}-#{$weight} {
          color: color.adjust($hex, $lightness: $percentage);
        }
      } @else if $weight > 500 {
        .text-#{'' + $name}-#{$weight} {
          color: color.adjust($hex, $lightness: -$percentage);
        }
      } @else {
        .text-#{'' + $name} {
          color: $hex;
        }
        .text-#{'' + $name}-#{$weight} {
          color: $hex;
        }
      }
    }
  }
}