pantoken / plugins/pantoken/colors/src / onColor

Fonksiyon: onColor() ​

onColor(surface, threshold?): string

Beta

Okunabilir ön plan — siyah veya beyaz — surface üzerine yerleştirilen içerik için. Bu, InstUI'nin tekrarlayan *-on-color varyantlarının (bir marka butonundaki odak halkası, bir primary-inverse butonun metni, renkli bir yüzeydeki simge) yalnızca CSS biçimidir: sabit bir ters token yerine kontrastı yüzeyin kendisinden seçer, böylece yüzey değiştikçe doğru kalır.

Yüzeyin OKLCH aydınlığını relative color söz dizimiyle okur ve calc(… * infinity) clamp hilesini kullanarak threshold noktasında bunu 0 (siyah) veya 1 (beyaz) olarak kilitler — JS yok, sabit hex yok.

Parametreler ​

surface ​

string

Arka plan renginin içerik olarak yerleştiği şey (literal, var(--token) veya iç içe geçmiş bir yardımcı).

threshold? ​

number = 0.62

Yüzeyin "açık" sayılması için OKLCH aydınlığı (0–1) eşik değeri (varsayılan 0.62).

Döndürür ​

string

Siyah veya beyaza çözünen bir oklch(from …) ifadesi.

Örnek ​

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