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() ו תחביר צבע יחסי — שניהם תכונות מודרניות בסיסיות בדפדפן — כך שביטוי יחיד עוקב אחרי הטוקן אפילו כשהוא זוג 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)"

כינויים של טיפוסים ​

פונקציות ​