@each $name in $colors-list
  $color: v($name)
  .has-text-#{$name}
    color: $color !important
  a.has-text-#{$name}
    &:hover,
    &:focus
      color: vDarken($name,  10%) !important
  .has-background-#{$name}
    background-color: $color !important
  @if isRegistered($name+"-dark")
    $color-light: v($name+"-light")
    $color-dark: v($name+"-dark")
    // Light
    .has-text-#{$name}-light
      color: $color-light !important
    a.has-text-#{$name}-light
      &:hover,
      &:focus
        color: vDarken($name+"-light", 10%) !important
    .has-background-#{$name}-light
      background-color: $color-light !important
    // Dark
    .has-text-#{$name}-dark
      color: $color-dark !important
    a.has-text-#{$name}-dark
      &:hover,
      &:focus
        color: vLighten($name+"-dark", 10%) !important
    .has-background-#{$name}-dark
      background-color: $color-dark !important

@each $name in $shades
  .has-text-#{$name}
    color: v($name) !important
  .has-background-#{$name}
    background-color: v($name) !important