pantoken / colors

colors ​

เบต้า

@pantoken/plugin-colors — การคำนวณสีเฉพาะใน CSS ที่สะท้อน @instructure/ui-color-utils ของ InstUI helpers (alpha, darken, lighten, overlayColors).

InstUI คำนวณพวกนี้ในเวลาสร้างด้วย tinycolor2 กับค่าสี hex ที่ชัดเจน pantoken จะส่ง การอ้างอิง var(--instui-*) ที่แก้ค่าได้ในเบราว์เซอร์ (บ่อยครั้งผ่าน light-dark()) ดังนั้น การคำนวณต้องเกิดขึ้นใน CSS แทน แต่ละ helper จะคืนค่าสตริงสีใน CSS ที่ประกอบด้วย color-mix() และ relative color syntax — ทั้งสองเป็นฟีเจอร์มาตรฐานของเบราว์เซอร์สมัยใหม่ — ดังนั้นนิพจน์เดียวจะติดตาม token ได้แม้เมื่อเป็น คู่ light-dark() ที่ขึ้นกับสกีม ใช้งานพวกนี้แทนการเขียนเฉดสีที่คำนวณไว้แบบตายตัว

ตัวอย่าง ​

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

นามแฝงชนิด ​

ฟังก์ชัน ​