pantoken / plugins/pantoken/colors/src / onColor

Função: onColor() ​

onColor(surface, threshold?): string

Beta

O primeiro plano legível — preto ou branco — para conteúdo colocado em surface. Esta é a forma somente CSS das variantes recorrentes de *-on-color do InstUI (um anel de foco num botão de marca, o texto de um botão primary-inverse, um ícone sobre uma superfície colorida): em vez de um token inverso fixo, ele escolhe o contraste a partir da própria superfície, mantendo-se correto à medida que a superfície muda.

Lê a claridade OKLCH da superfície via sintaxe de cor relativa e a transforma para 0 (preto) ou 1 (branco) em threshold usando o truque de clamp calc(… * infinity) — sem JS, sem hex fixo.

Parâmetros ​

surface ​

string

A cor de fundo sobre a qual o conteúdo fica (literal, var(--token) ou um helper aninhado).

threshold? ​

number = 0.62

Claridade OKLCH (0–1) acima da qual a superfície é considerada "clara" (padrão 0.62).

Retorna ​

string

Uma expressão oklch(from …) que resolve para preto ou branco.

Exemplo ​

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