テーマ化可能なコンポーネント用に currentColor と混合

ティントを継承するコンポーネント

currentColor は要素の color プロパティの値に解決される CSS キーワードです。color-mix() と組み合わせると、配置先のあらゆる 色コンテキストに適応するコンポーネントを構築できます：

.icon-button {
  color: var(--brand);
  background: color-mix(in oklch, currentColor 8%, transparent);
  border: 1px solid color-mix(in oklch, currentColor 32%, transparent);
}

.icon-button:hover {
  background: color-mix(in oklch, currentColor 16%, transparent);
}

親が .icon-button の color を赤、青、var(--brand-success) に切り替えると、背景/ボーダーティントは自動的に追従します。テーマ バリアントも追加修飾子も不要です。

rgba(currentColor, 0.08) より優れている理由

currentColor は rgba() の中で直接使えません。これはチャネルを 分解できる色リテラルではなくキーワードだからです。 color-mix(in oklch, currentColor 8%, transparent) がモダンで 動作する代替手段で、OKLCH の知覚的メリットを保てます。

「ゴーストボタン」セットの構築

カスタムプロパティと組み合わせて、より読みやすく書けます：

.button { --weight: 8%; background: color-mix(in oklch, currentColor var(--weight), transparent); }
.button:hover  { --weight: 16%; }
.button:active { --weight: 24%; }

これで全インタラクション状態が 1 つのカスタムプロパティに集約されます。