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 sobre surface. Esta é a forma apenas-CSS das variantes recorrentes *-on-color do InstUI (um anel de foco em um botão de marca, o texto de um botão primary-inverse, um ícone em uma superfície colorida): em vez de um token inverso fixo, escolhe o contraste a partir da própria superfície, para permanecer correto conforme a superfície muda.

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

Parâmetros ​

surface ​

string

A cor de fundo em que o conteúdo se assenta (literal, var(--token), ou um helper aninhado).

threshold? ​

number = 0.62

Clareza OKLCH (0–1) acima da qual a superfície conta como “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)"