@import '../../../node_modules/@getninjas/niten-tokens/build/web/niten-tokens';

.text {
  font-family: $font-family-default;
  font-size: $size-font-xs;
  font-weight: $font-style-weight-regular;
  line-height: $size-line-height-xs;

  &--dark {
    color: $color-interface-content-dark;
  }

  &--medium {
    color: $color-interface-content-medium;
  }

  &--positive {
    color: $color-interface-positive-extra-dark;
  }

  &--alert {
    color: $color-interface-alert-extra-dark;
  }

  &--negative {
    color: $color-interface-negative-extra-dark;
  }

  &--inverse {
    color: $color-interface-content-light;
  }

  &--strong {
    font-weight: $font-style-weight-bold;
  }

  a {
    color: $color-interface-action-extra-dark;
    transition: all .3 ease-in-out;
    text-decoration: none;
  }

  a:hover,
  a:focus {
    text-decoration: underline;
  }
}

@import '../../../node_modules/@getninjas/niten-tokens/build/web/niten-tokens';

.text {
  font-family: $font-family-default;
  font-size: $size-font-xs;
  font-weight: $font-style-weight-regular;
  line-height: $size-line-height-xs;

  a {
    color: $color-interface-action-extra-dark;
    transition: all .3s ease-in-out;
    text-decoration: none;
  }

  a:hover,
  a:focus {
    text-decoration: underline;
  }

  &--dark {
    color: $color-interface-content-dark;
  }

  &--medium {
    color: $color-interface-content-medium;
  }

  &--positive,
  &--alert,
  &--negative {

    a {
      text-decoration: underline;
      font-weight: $font-style-weight-bold;

      &:hover {
        text-decoration: none;
      }
    }
  }

  &--positive {
    color: $color-interface-positive-extra-dark;

    a {
      color: $color-interface-positive-extra-dark;
    }
  }

  &--alert {
    color: $color-interface-alert-extra-dark;

    a {
      color: $color-interface-alert-extra-dark;
    }
  }

  &--negative {
    color: $color-interface-negative-extra-dark;

    a {
      color: $color-interface-negative-extra-dark;
    }
  }

  &--inverse {
    color: $color-interface-content-light;
  }

  &--strong {
    font-weight: $font-style-weight-bold;
  }


}

Edit link colors and hover
Edit link colors and hover
