pantoken / plugins/pantoken/colors/src / onColor

Hàm: onColor()

onColor(surface, threshold?): string

Beta

Màu chữ nền có thể đọc được — đen hoặc trắng — cho nội dung đặt trên surface. Đây là dạng chỉ-CSS của các biến thể lặp lại *-on-color trong InstUI (vòng viền focus trên nút thương hiệu, chữ của nút primary-inverse, một biểu tượng trên bề mặt có màu): thay vì một token nghịch đảo cố định, nó chọn độ tương phản từ chính bề mặt, nên luôn đúng khi bề mặt thay đổi.

Nó đọc độ sáng OKLCH của bề mặt qua cú pháp màu tương đối và làm tròn về 0 (đen) hoặc 1 (trắng) tại threshold bằng mẹo clamp calc(… * infinity) — không cần JS, không cần hex cố định.

Tham số

surface

string

Màu nền mà nội dung nằm trên đó (chuỗi nguyên văn, var(--token), hoặc một helper lồng nhau).

threshold?

number = 0.62

Ngưỡng độ sáng OKLCH (0–1) trên đó bề mặt được tính là "sáng" (mặc định 0.62).

Trả về

string

Một biểu thức oklch(from …) cho kết quả là màu đen hoặc trắng.

Ví dụ

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