pantoken / plugins/pantoken/colors/src / onColor

Fušla: onColor() ​

onColor(surface, threshold?): string

Behta

Luhttu čuovvut — čuoža dahje čalbmi — maide guoskabealde on surface. Dát lea CSS-bara formma InstUI:n ovttasjuvvon *-on-color variantaide (fokus-ringi brand-butttoni, primary-inverse-butttoni girjjis, ikona vástádusvárri dahje čáhppesvuođa): vai fertegoahtit váilemos inverse-token, de searvvo kontrasta dát surface:sta, nu ahte surface váldá, dan go dat čohkká.

Searvvo surface:s OKLCH-lohket relatívala kolora syntaxis ja snáppá dan 0 (čuoža) dahje 1 (čalbmi) dihte threshold vuoigŋa calc(… * infinity) clamp-trikkin — ii JS, ii váilemos hex.

Parametera ​

surface ​

string

Backgrundvárri čáhppesvuođa lea goikká (lávlla, var(--token), dahje juovllainnas borramuš helper).

threshold? ​

number = 0.62

OKLCH-lohket (0–1) gaskkas mii surface liikojuvvo 'lohkkas' (default 0.62).

Gullii / Gávdnat ​

string

Eará oklch(from …) earášvuohta mii gávdná čuoža dahje čalbmi.

Exempel ​

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