pantoken / colors

colors ​

बीटा

@pantoken/plugin-colors — केवल CSS-आधारित रंग गणित जो InstUI के @instructure/ui-color-utils सहायक फ़ंक्शनों की नकल करता है (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)"

टाइप एलियास ​

फंक्शन्स ​