CSS COLOR TOKENS

color-mix()で、
状態色を
CSS内で作る

基準になる --brand だけを変えると、
淡い背景、border、hover、
shadow まで一緒に変わります。
UIの色を個別に増やしすぎないための、
小さなCSS設計です。

Brand color 1つの色から、UIの状態色をまとめて作る

--brand

Generated tokens

--brand-soft 背景に使う淡い色

--brand-border border / ring 用

--brand-hover hover / active 用

--brand-shadow shadow 用の透明感

Core CSS

:root {
  --brand: #0f9f73;
  --brand-soft:
    color-mix(in oklch, var(--brand) 14%, white);
  --brand-border:
    color-mix(in oklch, var(--brand) 34%, white);
  --brand-hover:
    color-mix(in oklch, var(--brand) 88%, black);
  --brand-shadow:
    color-mix(in oklch, var(--brand) 24%, transparent);
}

Point

hover、border、淡い背景を別々に手で作らず、--brand から派生させます。

Point

色を全部個別に持つのではなく、基準色から派生色を作るとテーマ変更に強くなります。

color-mix()で、 状態色を CSS内で作る

color-mix()で、
状態色を
CSS内で作る