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