pantoken / colors

colors ​

Beta（測試）

@pantoken/plugin-colors — 僅限 CSS 的色彩運算，模仿 InstUI 的 @instructure/ui-color-utils helpers（alpha, darken, lighten, overlayColors）。

InstUI 在建置時以 tinycolor2 對具體的十六進位值進行計算。pantoken 發出可在瀏覽器中解析的 var(--instui-*) 參照（通常透過 light-dark()），因此運算必須改由 CSS 來完成。每個 helper 回傳由 color-mix() 與 相對色彩語法 所建構的 CSS 色彩字串——兩者都是現代瀏覽器的基本功能——因此即使標記是由配色方案決定的 light-dark() 配對，單一表達式也能追蹤該 token。當你本來會硬編派生色階時，就使用它們。

範例 ​

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

型別別名 ​

函式 ​