gistfile1.scss

@function palette($palette, $tone: 'base') {
  @return map-get(map-get($palettes, $palette), $tone);
}

// Project Color Map
// This is used to create font modifier classes to get around setting colors
// on specific elements or styles.
$palettes: (
  white: (
    base: #fff
  ),
  black: (
    base: #333
  ),
  gray: (
    base: #666,
    light: #b2b2b2,
    medium: #3f3f3f,
    dark: #424242
  ),
  green: (
    base: #006745,
    light: #004c33,
    lighter: #00cd89,
    darkest: #004c33,
    other: #00bb7b
  ),
  red: (
    base: #ff5857,
    dark: #a32a29
  )
);

// Primary Site colors
$color-primary: palette(green);
$color-secondary: palette(red);

// Color Map Loop to create Modifer Classes
// Map is located in base/variable/colors
@each $color, $tones in $palettes {
  @each $tone, $hex in $tones {
    $color: quote(#{$color});
    $tone: quote(#{$tone});

    @if $tone == 'base' {
      .font--#{$color} {
        color: $hex;
      }
    }
    @else {
      .font--#{$color}-#{$tone} {
        color: $hex;
      }
    }
  }
}