pantoken / plugins/pantoken/colors/src / onColor

Függvény: onColor()

onColor(surface, threshold?): string

Béta

Az olvasható előtér — fekete vagy fehér — a surface-ra helyezett tartalom számára. Ez az InstUI ismétlődő *-on-color varianciáinak CSS-only formája (fókuszgyűrű egy márka gombján, elsődleges-inverz gomb szövege, ikon egy színes felületen): rögzített inverz token helyett a felülettől veszi az ellentéteket, így helyes marad, ahogy a felület megváltozik.

A felület OKLCH fényerősségét relatív szín szintaxison keresztül olvassa, és rögzíti 0 (fekete) vagy 1 (fehér) helyre threshold nél a calc(… * infinity) clamp trick használatával — nincs JS, nincs rögzített hex.

Paraméterek

surface

string

A háttérszín, amelyen a tartalom ül (szöveges, var(--token), vagy egy beágyazott segítő).

threshold?

number = 0.62

OKLCH fényerősség (0–1), amely felett a felület "könnyűnek" számít (alapértelmezés 0.62).

Visszatérés

string

Egy oklch(from …) kifejezés, amely feketét vagy fehéret eredményez.

Példa

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