pantoken / plugins/pantoken/colors/src / onColor

関数: onColor() ​

onColor(surface, threshold?): string

ベータ

コンテンツを surface の上に配置したときの可読な前景色（黒または白）。これは InstUI の繰り返し使われる *-on-color バリアント（ブランドボタンのフォーカスリング、プライマリ反転ボタンのテキスト、色付き面上のアイコン）の CSS のみの形式で、固定の反転トークンを使う代わりに表面自体からコントラストを選ぶため、表面が変わっても常に正しくなります。

相対色指定構文で表面の OKLCH の明度を読み取り、calc(… * infinity) の clamp トリックを使って threshold で 0（黒）または 1（白）にスナップします — JS 不要、固定の 16 進色不要。

パラメーター ​

surface ​

string

背景色コンテンツが置かれる対象（リテラル、var(--token)、またはネストされたヘルパー）。

threshold? ​

number = 0.62

表面が「明」と判定される OKLCH の明度（0–1）（デフォルトは 0.62）。

戻り値 ​

string

黒または白に解決される oklch(from …) 式。

例 ​

ts
onColor("var(--instui-color-background-brand)"); // white on a dark brand surface, black on a light one
// → "oklch(from var(--…-brand) clamp(0, (0.62 - l) * infinity, 1) 0 0)"