Skip to content

pantoken / plugins/pantoken/colors/src / onColor

دالة: onColor()

onColor(surface, threshold?): string

بيتا

لون المقدمة المقروء — أسود أو أبيض — للمحتوى الموضوع على surface. هذا هو الشكل المعتمد على CSS فقط من متغيرات *-on-color المتكررة في InstUI (حلقة التركيز على زر العلامة التجارية، نص زر العكس-الأولي، أيقونة على سطح ملوّن): بدلاً من وجود توكن عكسي ثابت، يختار التباين من السطح نفسه، فتبقى القيمة صحيحة مع تغيّر السطح.

يقرأ إضاءة السطح في OKLCH عبر تراكيب الألوان النسبية ويقربها إلى 0 (أسود) أو 1 (أبيض) عند threshold باستخدام خدعة التقويم calc(… * infinity) — بدون جافاسكربت، بدون ألوان هكس ثابتة.

المعلمات

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