pantoken / plugins/pantoken/colors/src / onColor

Ֆունկցիա: onColor()

onColor(surface, threshold?): string

Բետա

Ընթեռնելի դիմային գույնը — սեւ կամ սպիտակ — այն բովանդակության համար, որը տեղադրված է on surface. Սա InstUI–ի կրկնվող *-on-color տարբերակների (բրենդ բութոնի վրա ֆոկուսային օղակ, primary-inverse բութոնի տեքստ, գույնավորված մակերեսի վրա իկոն) միայն CSS ձեւն է․ ֆիքսված հակադիր տոկենի փոխարեն այն վերցնում է կոնտրաստը անմիջապես մակերեսից, ուստի ճիշտ է մնում երբ մակերեսը փոխվում է.

Այն ընթերցում է մակերեսի OKLCH լուսավորությունը հարաբերական գույնի սինթաքսով և սեղմելով համապատասխանեցնում է այն 0 (սեւ) կամ 1 (սպիտակ)–ին threshold ժամանակ՝ օգտագործելով calc(… * infinity) clamp հնարքը — առանց JS–ի, առանց ֆիքսված hex:

Պարամետրեր

surface

string

Հայելի՛ի (background) գույնը այն մակերեսն է, որի վրա սնամեջ է բովանդակությունը (իսկական, var(--token) կամ նեստացված օգնիչ):

threshold?

number = 0.62

OKLCH լուսավորության (0–1) այն շեմը, որի վրա մակերեսը համարվում է «թեթև» (նախորոշված 0.62).

Վերադարձվող արժեք

string

oklch(from …) արտահայտություն, որը լուծվում է սեւի կամ սպիտակի՝

Օրինակ

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