dynamic colors.sass

$colorHues: (
  -green: #90cc2c,
  -orange: #fe610e,
  -pink: #ed1e57,
  -teal: #159d86
);

$colorNames: ("green") ("orange") ("pink") ("teal");

$green: map-get($colorHues, "-green");
$orange: map-get($colorHues, "-orange");
$pink: map-get($colorHues, "-pink");
$teal: map-get($colorHues, "-teal");

/*
 *   SECTIONS color-white
 */
@each $colorName in $colorNames {
  .#{$colorName}-white {
    background-color: map-get($colorHues, -#{$colorName});
    color: $white;

    .highlighted_text {
      color: $black;
    }

    &.top-separator {
      border-top-color: $white;
    }

    @include title-property("color", $white);
  }
}

/*
*   SECTIONS white-color
*/
@each $colorName in $colorNames {
  .white-#{$colorName} {
    .highlighted_text {
      color: map-get($colorHues, -#{$colorName});
    }

    &.top-separator {
      border-top-color: map-get($colorHues, -#{$colorName});
    }

    @include title-property("color", map-get($colorHues, -#{$colorName}));
  }
}

/*
 *   SELECTORS
 */
.colors-borders-and-color {
  @each $colorName in $colorNames {
    .white-#{$colorName} & {
      border-color: map-get($colorHues, -#{$colorName});
      color: map-get($colorHues, -#{$colorName});
    }
  }
}

.colors-half-opacity-boders {
  @each $colorName in $colorNames {
    .white-#{$colorName} & {
      border-bottom-color: transparentize(map-get($colorHues, -#{$colorName}), 0.5);
    }
  }
}