@mixin ui-typography($light, $normal, $dark, $ui-lightest-grey, $ui-light-grey, $ui-grey) {

$color-names: light normal dark lightest-grey light-grey grey;
$colors: $light $normal $dark $ui-lightest-grey $ui-light-grey $ui-grey;


@for $i from 1 through length($colors) {

  .#{nth($color-names, $i)} {
    color: nth($colors, $i);
  }

  .bg {

    &--#{nth($color-names, $i)} {
      background-color: nth($colors, $i);
    }
  }
}

.serif {
  font-family: $serif;
}

.sans {
  font-family: $sans;
}


} // close the mixin
