pantoken / plugins/pantoken/colors/src / onColor

Funzione: onColor()

onColor(surface, threshold?): string

Beta

Il primo piano leggibile — nero o bianco — per il contenuto posizionato su surface. Questa è la forma solo-CSS delle ricorrenti varianti di InstUI *-on-color (un anello di focus su un pulsante del brand, il testo di un pulsante primary-inverse, un'icona su una superficie colorata): invece di un token inverso fisso, sceglie il contrasto dalla superficie stessa, così rimane corretto quando la superficie cambia.

Legge la luminosità OKLCH della superficie tramite la sintassi del colore relativo e la aggancia a 0 (nero) o 1 (bianco) a threshold usando il trucco di clamp calc(… * infinity) — niente JS, nessun esadecimale fisso.

Parametri

surface

string

Il colore di sfondo su cui si trova il contenuto (letterale, var(--token), o un helper annidato).

threshold?

number = 0.62

Luminosità OKLCH (0–1) oltre la quale la superficie è considerata “chiara” (predefinito 0.62).

Restituisce

string

Un'espressione oklch(from …) che risolve in nero o bianco.

Esempio

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