pantoken / colors

colors ​

بتا

@pantoken/plugin-colors — محاسبات رنگ که صرفاً در CSS انجام می‌شود و رفتار @instructure/ui-color-utils در InstUI را منعکس می‌کند کمک‌کننده‌ها (alpha, darken, lighten, overlayColors).

InstUI آن‌ها را هنگام ساخت با tinycolor2 روی مقادیر هگز مشخص محاسبه می‌کند. pantoken ارجاعات var(--instui-*) را منتشر می‌کند که در مرورگر حل می‌شوند (اغلب از طریق light-dark())، بنابراین محاسبات باید در CSS انجام شوند. هر کمک‌کننده یک رشته رنگ CSS را بر پایه color-mix() و نحو رنگ‌های نسبی — هر دو ویژگی‌های استاندارد مرورگرهای مدرن — می‌سازد؛ بنابراین یک عبارت واحد مقدار توکن را حتی وقتی که یک جفت 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)"

نام‌های مستعار نوع ​

توابع ​