pantoken / plugins/pantoken/colors/src / onColor

Функция: onColor() ​

onColor(surface, threshold?): string

Бета

Читаемый передний план — чёрный или белый — для содержимого, размещённого на surface. Это чисто CSS‑форма повторяющихся вариантов *-on-color в InstUI (обводка фокуса на брендовой кнопке, текст primary‑inverse кнопки, значок на цветной поверхности): вместо фиксированного инверсного токена она выбирает контраст исходя из самой поверхности, поэтому остаётся корректной при изменении поверхности.

Она считывает светлоту поверхности в OKLCH через синтаксис относительных цветов и привязывает её к 0 (чёрный) или 1 (белый) при threshold, используя приём с зажимом (calc(… * infinity)) — без JS, без фиксированных hex‑значений.

Параметры ​

surface ​

string

Цвет фона — поверхность, на которой располагается содержимое (литеральная, var(--token) или вложенный хелпер).

threshold? ​

number = 0.62

Порог светлоты в OKLCH (0–1), выше которого поверхность считается «светлой» (по умолчанию 0.62).

Возвращаемое значение ​

string

Выражение oklch(from …), которое разрешается в чёрный или белый.

Пример ​

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