SASS function to loop through color palette and spit out classes

colors.scss

// color palette.
$palette: (
	primary: (
		400: #1bb1e4,
		700: #4d84c8,
		900: #7ea0c3,
	),
	secondary: (
		400: #a66aae,
		700: #5f61a9,
	),
	tertiary: (
		400: #46b6d2,
	),
	gray: (
		50: #f9fafb,
		100: #f3f4f6,
		200: #e5e7eb,
		300: #d1d5db,
		400: #9ca3af,
		500: #6b7280,
		600: #4b5563,
		700: #374151,
		800: #1f2937,
		900: #111827,
	),
	white: (
		default: #ffffff,
	),
	black: (
		default: #202020,
	)
);

// has-color function to use colors in normal sass.
@function has-color($color, $tone: 400) {

  // if palatte has the color in it.
  @if map-has-key($palette, $color) {
    
    // get the color section.
    $color_section: map-get($palette, $color);
    
    // if there is no tone specified and the palette is a default.
     @each $tone-key, $tone-value in $color_section {
        @if $tone-key == default {
         @return $tone-value;   
        }
    }

    // otherwise return the color where tone matches.
    @if map-has-key($color_section, $tone) {
      $tone: map-get($color_section, $tone);
      @return $tone;
    }

    @warn "unknown tone `#{$tone}` in color";
    @return null;
  }

  @warn "unknown color `#{$color}` in palette";
  @return null;
}

// list through all colors and spit out classes.
@each $color-key, $color-value in $palette {
  @each $tone-key, $tone-value in $color-value {
    
    @if $tone-key == 400 {
      .has-text-#{$color-key} {
        color: $tone-value;
      }
    } 
    .has-text-#{$color-key}-#{$tone-key} {
        color: $tone-value;
    }
    
    @if $tone-key == 400 {
      .has-bg-#{$color-key} {
        background-color: $tone-value;
      }
    } 
    .has-bg-#{$color-key}-#{$tone-key} {
        background-color: $tone-value;
    }
    
  }
}