CSSで色を効率的に管理！currentColorの使い方

<div class="box">
  このボックスは青いボーダーを持っています。マウスオーバーすると赤くなります。
</div>

<ul class="list">
  <li>
    <svg class="icon" viewBox="0 0 24 24">
      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
    </svg>
    この文章はダミーテキストです。文字サイズや行間などを確認するために入れています。
  </li>
  <li class="red">
    <svg class="icon" viewBox="0 0 24 24">
      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
    </svg>
    この文章はダミーテキストです。文字サイズや行間などを確認するために入れています。
  </li>
  <li class="blue">
    <svg class="icon" viewBox="0 0 24 24">
      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
    </svg>
    この文章はダミーテキストです。文字サイズや行間などを確認するために入れています。
  </li>
  <li class="green">
    <svg class="icon" viewBox="0 0 24 24">
      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
    </svg>
    この文章はダミーテキストです。文字サイズや行間などを確認するために入れています。
  </li>
</ul>

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  color: blue;
  border: 5px solid currentColor;/* ボーダーの色をcurrentColorで指定 */
}

.box:hover {
  color: red; /* ホバーでテキストカラーを赤に変更 */
}

.list{
  list-style: none;
}

.list li{
  display: flex;
  margin: 0.5em 0;
  flex-direction: row;
  align-items: center;
}

.list li.red{
  color: red;
}
.list li.blue{
  color: blue;
}
.list li.green{
  color: green;
}

.icon {
  fill: currentColor;
  margin-right: 0.4em;
  width: 24px;
  height: 24px;
}