$colors: (
  ben-franklin-blue: #2176d2,
  dark-ben-franklin: #0f4d90,
  light-ben-franklin: #96c9ff,
  electric-blue: #25cef7,

  bell-yellow: #f3c613,
  light-bell: #ffefa2,

  pride-purple:#9400c6,
  punk-pink: #dd2662,

  phanatic-green: #3a833c,
  kelly-drive-green: #58c04d,
  light-kelly-drive: #b9f2b1,

  flyers-orange: #f99300,
  love-park-red: #cc3000,
  light-red: #fed0d0,
  light-blue: #daedfe,

  dark-gray: #444,
  medium-gray: #a1a1a1,
  sidewalk: #cfcfcf,
  ghost-gray: #f0f0f0,
);

@function color($color-name) {
  @return map-get($colors, $color-name);
}

@each $value in $colors {
  //sass-lint:disable-block no-important
  .#{nth($value, 1)} {
    color: nth($value, 2) !important;
  }
  .bg-#{nth($value, 1)} {
    background-color: nth($value, 2) !important;
  }
  .bdr-#{nth($value, 1)} {
    border-color: nth($value, 2) !important;
  }
}

//these need to be added manually
.black {
  color: black;
}
.bg-black{
  background-color: black;
}
.bdr-black{
  border-color: black;
}
.white {
  color: white;
}
.bg-white{
  background-color: white;
}
.bdr-white{
  border-color:white;
}