pantoken / plugins/pantoken/colors/src / onColor

函式: onColor() ​

onColor(surface, threshold?): string

Beta（測試）

可讀的前景色 — 黑或白 — 用於置於 surface 上的內容。這是僅以 CSS 實作的 InstUI 常見 *-on-color 變體（例如品牌按鈕的聚焦環、primary-inverse 按鈕的文字、彩色表面上的圖示）：它不是用固定的反向 token，而是從表面本身選擇對比色，因此當表面改變時仍會保持正確。

透過相對色彩語法讀取表面的 OKLCH 亮度，並在 threshold 以 calc(… * infinity) 的 clamp 技巧將其捲動到 0（黑）或 1（白）——無需 JS、無需固定的十六進位色碼。

參數 ​

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)"