色付きリンク（Colored links） v5.0.0新設

リンクの色（Link colors）v5.3.0クラス追加、実例から変更

.link-{themecolor} クラスを使用して、リンクの色を強調する。.text-{color} クラスとは異なり、これらのクラスには :hover と :focus 状態がある。一部のリンクスタイルでは、比較的明るい前景色を使用しており、十分なコントラストを得るためには、暗い背景でのみ使用する必要がある。

リンク色の種類

設定例

<a href="#" class="text-primary">文字色ユーティリティクラス</a>の場合と<a href="#" class="link-primary">リンクヘルパークラス</a>の場合。

リンクユーティリティと併用（Link utilities）v5.3.0新設

色付きリンクヘルパーは、リンクユーティリティでスタイルの変更もできる。

見本

設定例

Primaryの場合<p><a href="#" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Primaryのリンク</a></p>

CSS v5.1.0追加、v5.3.0Sassから名称変更

Sassループ（Sass loops)

デフォルトの設定

scss/helpers/_colored-links.scss 内の設定// このSassのバグにより、全角の`RGBA()`関数を使用: https://github.com/sass/node-sass/issues/2251
@each $color, $value in $theme-colors {
  .link-#{$color} {
    color: RGBA(var(--#{$prefix}#{$color}-rgb, var(--#{$prefix}link-opacity, 1)));
    text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1));

    @if $link-shade-percentage != 0 {
      &:hover,
      &:focus {
        $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
        color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1));
        text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1));
      }
    }
  }
}