pantoken / plugins/pantoken/colors/src / onColor

Funksjon: onColor() ​

onColor(surface, threshold?): string

Beta

Den lesbare forgrunnen — svart eller kvit — for innhald plassert på surface. Dette er CSS-only-forma av InstUI sine gjentakande *-on-color-variantar (ein fokusring på ein merke-knapp, teksten til ein primary-inverse-knapp, eit ikon på ei farga flate): i staden for ein fast inverse-token, vel han kontrasten frå sjølve flata, så han held seg korrekt når flata endrar seg.

Han leser flata si OKLCH-lysstyrke via relativ fargesyntaks og snappar han til 0 (svart) eller 1 (kvit) ved threshold ved hjelp av calc(… * infinity) clamp-trikset — ingen JS, ingen faste hex.

Parametrar ​

surface ​

string

Bakgrunnsfargen innhaldet ligg på (literal, var(--token), eller ein nestet helper).

threshold? ​

number = 0.62

OKLCH-lysstyrke (0–1) over kva flata tel som «lys» (standard 0.62).

Returnerer ​

string

Eit oklch(from …)-uttrykk som evaluerer til svart eller kvit.

Døme ​

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