pantoken / plugins/pantoken/colors/src / onColor

Funktion: onColor()

onColor(surface, threshold?): string

Beta

Die lesbare Vordergrundfarbe — schwarz oder weiß — für Inhalte, die auf surface platziert sind. Dies ist die rein CSS-basierte Form von InstUIs wiederkehrenden *-on-color-Varianten (ein Fokusring bei einer Brand-Schaltfläche, Text einer primary-inverse-Schaltfläche, ein Icon auf einer farbigen Fläche): statt eines festen inversen Tokens bestimmt sie den Kontrast aus der Fläche selbst, sodass er korrekt bleibt, wenn sich die Fläche ändert.

Sie liest die OKLCH-Helligkeit der Fläche über Relative-Color-Syntax und schnellt bei threshold auf 0 (schwarz) oder 1 (weiß) mit dem calc(… * infinity)-Clamp-Trick — kein JS, kein festes Hex.

Parameter

surface

string

Die Hintergrundfarbe, auf der der Inhalt liegt (literal, var(--token) oder ein verschachtelter Helfer).

threshold?

number = 0.62

OKLCH-Helligkeit (0–1), oberhalb derer die Fläche als „hell" gilt (Standard 0.62).

Rückgabe

string

Ein oklch(from …)-Ausdruck, der auf schwarz oder weiß auflöst.

Beispiel

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