pantoken / plugins/pantoken/colors/src / onColor

Funkcja: onColor()

onColor(surface, threshold?): string

Beta

Czytelny kolor pierwszoplanowy — czarny lub biały — dla treści umieszczonej na surface. To jest wyłącznie CSS-owa forma powtarzających się wariantów *-on-color w InstUI (pierścień fokusowy na przycisku z brandem, tekst przycisku primary-inverse, ikona na kolorowej powierzchni): zamiast stałego tokena odwrotnego, wybiera kontrast z samej powierzchni, dzięki czemu pozostaje poprawny gdy powierzchnia się zmienia.

Odczytuje jasność OKLCH powierzchni przez składnię kolorów względnych i dopasowuje ją do 0 (czarny) lub 1 (biały) przy threshold używając sztuczki clamp z calc(… * infinity) — bez JS, bez stałego hexa.

Parametry

surface

string

Kolor tła, na którym leży zawartość (literal, var(--token) lub zagnieżdżony helper).

threshold?

number = 0.62

Jasność OKLCH (0–1), powyżej której powierzchnia jest uznawana za „jasną” (domyślnie 0.62).

Zwraca

string

Wyrażenie oklch(from …) rozstrzygające na czarny lub biały.

Przykład

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