pantoken / plugins/pantoken/colors/src / onColor

Funksjon: onColor() ​

onColor(surface, threshold?): string

Beta

Den lesbare forgrunnen — svart eller hvit — for innhold plassert på surface. Dette er den kun-CSS formen av InstUIs gjentakende *-on-color-varianter (en fokusring på en merke-knapp, teksten til en primary-inverse-knapp, et ikon på en farget flate): i stedet for en fast invers-token, velger den kontrasten fra selve flaten, så den forblir korrekt når flaten endres.

Den leser flatens OKLCH-lyshet via relativ fargesyntaks og snapper den til 0 (svart) eller 1 (hvit) ved threshold ved hjelp av calc(… * infinity) clamp-trikset — ingen JS, ingen faste hex-verdier.

Parametere ​

surface ​

string

Bakgrunnsfargen innholdet ligger på (bokstavelig, var(--token), eller en nested hjelpeklasse).

threshold? ​

number = 0.62

OKLCH-lyshet (0–1) over hvilken flaten regnes som «lys» (standard 0.62).

Returnerer ​

string

Et oklch(from …)-uttrykk som løser til svart eller hvitt.

Eksempel ​

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