pantoken / colors

colors ​

Beta

@pantoken/plugin-colors — phép toán màu chỉ bằng CSS phản chiếu các helper @instructure/ui-color-utils của InstUI (alpha, darken, lighten, overlayColors).

InstUI tính những giá trị đó vào thời điểm build bằng tinycolor2 trên các giá trị hex cụ thể. pantoken phát hành các tham chiếu var(--instui-*) được giải trong trình duyệt (thường thông qua light-dark()), nên phép toán phải diễn ra trong CSS thay vào đó. Mỗi helper trả về một chuỗi màu CSS được xây dựng từ color-mix() và relative color syntax — đều là các tính năng cơ bản của trình duyệt hiện đại — vì vậy một biểu thức duy nhất sẽ theo dõi token ngay cả khi đó là một cặp light-dark() phụ thuộc vào scheme. Sử dụng chúng ở bất cứ nơi nào bạn sẽ thay vì mã hóa cứng một sắc độ dẫn xuất.

Ví dụ ​

ts
import { alpha, darken } from "@pantoken/plugin-colors";

// A subtle brand-tinted hover, derived from the brand token (mirrors InstUI's ghost hover).
const hover = alpha(darken("var(--instui-color-institutional-brand-button-primary-bgd)", 10), 10);
// → "color-mix(in srgb, hsl(from var(--…brand-…) h s calc(l - 10)) 10%, transparent)"

Bí danh kiểu ​

Hàm ​