pantoken / plugins/pantoken/colors/src / onColor

Funktion: onColor()

onColor(surface, threshold?): string

Beta

Den läsbara förgrunden — svart eller vit — för innehåll placerat på surface. Detta är den enbart CSS-baserade formen av InstUI:s återkommande *-on-color-varianter (en fokusring på en brandknapp, texten på en primary-inverse-knapp, en ikon på en färgad yta): i stället för en fast inverse-token väljer den kontrasten från ytan själv, så att den förblir korrekt när ytan ändras.

Den läser ytans OKLCH-ljushet genom relativ färgsyntax och avrundar den till 0 (svart) eller 1 (vit) vid threshold med hjälp av calc(… * infinity) clamp-tricket — ingen JS, inget fast hex.

Parametrar

surface

string

Bakgrundsfärgens innehåll ligger på (bokstavligen, var(--token), eller en nästlad hjälpare).

threshold?

number = 0.62

OKLCH-ljushet (0–1) över vilken ytan räknas som "ljus" (standard 0.62).

Returnerar

string

Ett oklch(from …)-uttryck som utvärderas till svart eller vitt.

Exempel

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