CSSのcurrentColorはcolorプロパティの値をborderや背景へ再利用する

文字、枠線、iconの色を同じ状態で変えたいなら、基準の色をcolorへ指定し、ほかのcolor値へcurrentColorを使います。色を三か所へ重複して書かず、どの要素のcolorを参照しているかを明確にしてください。

currentColorは色名ではありません。その要素に対して計算されたcolorプロパティの値を表すkeywordです。親から継承した文字色も、要素自身で上書きした文字色も、計算後の値として参照されます。

currentColorは同じ要素のcolorを参照する

CSS Color Module Level 3は、currentColorをcolorプロパティの計算値として定義しています。color値を受け取るpropertyへ使えるため、border-colorやbackground-colorなどへ同じ色を渡せます。

.notice {
  color: #176b52;
  border: 1px solid currentColor;
  background-color: transparent;
}

この例では、文字色と枠線の色が#176b52になります。枠線へ同じ16進数をもう一度書く必要はありません。

currentColorをcolorプロパティ自身へ指定した場合は、color: inheritとして扱われます。自分自身を循環して参照するのではなく、親から文字色を継承します。

状態ごとの色変更をcolor一か所へ集める

buttonやlinkの通常、hover、disabledなどで、文字と枠線を同時に変える場面があります。各状態でcolorとborder-colorへ同じ値を書くと、片方だけ直し忘れる原因になります。

.action-link {
  color: #245b9e;
  border: 1px solid currentColor;
}

.action-link:hover,
.action-link:focus {
  color: #173a65;
}

hoverとfocusではcolorだけを変えています。borderはcurrentColorを通じて同じ色へ変わります。これは説明用の仮例です。実際のfocus表示を色の差だけにせず、outlineなど、操作位置が分かる表示も確認してください。

親要素のcolorへ状態色を置き、子要素のSVGへfill: currentColorを指定すれば、文字とiconを同じ基準へそろえられます。ただしSVG側へ別のcolorが指定されていれば、その計算値を参照します。DOM上のどの要素がcurrentColorを持つかを確認してください。

currentColorとopacityは役割が違う

currentColorは色の値を再利用します。要素全体を半透明にするpropertyではありません。opacityを要素へ指定すると、その子孫を含む描画結果へ透明度がかかります。

枠線だけを薄くしたい場合、currentColorだけではalpha値を変更できません。文字と同じ色を完全に共有するのか、枠線だけ別のRGBA値にするのかを選びます。「同じ色」と「同じ色相で透明度だけ違う」は別の指定です。

同じ基準色へそろえることと、背景とのcontrastを確保することも別です。currentColorで重複を減らしても、その色がすべての背景で読めるとは限りません。通常、hover、focus、disabledの各背景で、文字、枠線、iconを確認してください。

色の所有場所を一つに決める

制作会社へCSS修正を委託するときは、個々の枠線色だけでなく、componentの基準色をどのcolorへ置くかを決めます。基準色の所有場所が曖昧なままcurrentColorを増やすと、親から予期しない色を継承したときに追跡しにくくなります。

componentごとに、基準となるselector、通常色、状態色、currentColorを使うpropertyを一緒に記録します。codeを外注しても、どの状態を同じ色として扱うか、どのcontrastを守るかはsite側のdesign判断です。

最初の一手は、文字色と枠線色へ同じ値を重複しているcomponentを一つ選ぶことです。colorを基準へし、枠線だけをcurrentColorへ変えた後、継承元と全状態を確認します。