pantoken / plugins/pantoken/colors/src / onColor

ฟังก์ชัน: onColor() ​

onColor(surface, threshold?): string

เบต้า

สีหน้าอ่านได้ — ดำหรือขาว — สำหรับเนื้อหาที่วาง บน surface. นี่คือรูปแบบแบบ CSS เท่านั้นของตัวแปร *-on-color ที่ใช้ซ้ำของ InstUI (วงแหวนโฟกัสบนปุ่มแบรนด์, ตัวอักษรของปุ่ม primary-inverse, ไอคอนบนพื้นผิวมีสี): แทนที่จะใช้โทเค็นอินเวิร์สคงที่ มันเลือกความคอนทราสต์จากพื้นผิวนั้นเอง เพื่อให้ยังถูกต้องเมื่อตัวพื้นผิวเปลี่ยนแปลงได้

มันอ่านค่าแสง (lightness) ของพื้นผิวใน OKLCH ผ่านไวยากรณ์สีเชิงสัมพันธ์แล้วจับให้เป็น 0 (ดำ) หรือ 1 (ขาว) ที่ threshold โดยใช้เทคนิคการ clamp ของ calc(… * infinity) — ไม่มี JS, ไม่มีค่า hex คงที่

พารามิเตอร์ ​

surface ​

string

สีพื้นหลังที่เนื้อหาวางอยู่บน (ตัวอักษรจริง, var(--token), หรือ helper ที่ซ้อนกัน)

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