pantoken / plugins/pantoken/colors/src / onColor

Functie: onColor()

onColor(surface, threshold?): string

Bèta

De leesbare voorgrond — zwart of wit — voor inhoud geplaatst op surface. Dit is de CSS-only vorm van InstUI's terugkerende *-on-color-varianten (een focusring op een merkknop, de tekst van een primary-inverse knop, een pictogram op een gekleurde ondergrond): in plaats van een vaste inverse-token kiest het de contrastkleur van het oppervlak zelf, zodat het correct blijft wanneer het oppervlak verandert.

Het leest de OKLCH-lightness van het oppervlak via relatieve kleursyntaxis en snapt deze naar 0 (zwart) of 1 (wit) bij threshold met behulp van de calc(… * infinity) clamp-truc — geen JS, geen vaste hex.

Parameters

surface

string

De achtergrondkleur waarop de inhoud ligt (letterlijk, var(--token), of een genest hulpelement).

threshold?

number = 0.62

OKLCH-lightness (0–1) waarboven het oppervlak als "licht" wordt beschouwd (standaard 0.62).

Retourneert

string

Een oklch(from …)-expressie die naar zwart of wit wordt opgelost.

Voorbeeld

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