pantoken / components

components ​

बीटा

@pantoken/components — एक InstUI-styled CSS कॉम्पोनेंट लाइब्रेरी, जो --instui-* टोकन से निर्मित है।

शिप किए गए स्टाइलशीट्स:

  • Base (baseCss) — टोकन्स से ऑप्ट-इन ग्लोबल डॉक्यूमेंट डिफ़ॉल्ट्स (box-sizing, body reset, page surface, बेस टेक्स्ट रंग/फॉन्ट, color-scheme). इसमें फोकस-आउटलाइन रिंग भी शामिल है, इसलिए हर फोकस‑योग्य तत्व को बॉक्स से ही पहुँचयोग्य :focus-visible आउटलाइन मिलता है। इसे तब लोड करें जब pantoken पेज का मालिक हो。
  • Prose (proseCss) — रेंडर किए हुए मार्कडाउन/प्रोसे HTML (टेबल्स, हेडिंग्स, लिंक, लिस्ट्स, कोड) के लिए स्टाइल्स जिन्हें एक कंटेंट रूट तक सीमित किया गया है, ताकि एक डॉक्स पेज या कंटेंट क्षेत्र InstUI जैसा दिखे बिना DOM को कॉम्पोनेंट्स से बदलने के। यही साइट रेंडरर्स अपने components.css के रूप में शिप करते हैं。
  • Components (buttonCss, alertCss, badgeCss, aggregated by componentsCss) — क्लास-आधारित कॉम्पोनेंट स्टाइल्स जिन्हें अपने मार्कअप पर लागू किया जाता है (<button class="instui-button">), InstUI लुक के लिए जब कॉम्पोनेंट फ्रेमवर्क के बाहर उपयोग करें। --instui-elevation-* शैडो स्केल (elevationCss) इस शीट का नेतृत्व करता है, क्योंकि पर्याप्त कॉम्पोनेंट्स फ्लोट करते हैं और शैडो एक आंतरिक डिज़ाइन गुण होते हैं न कि एक जोड़।
  • Utilities (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, plus a curated semantic-colour/token set) — क्रॉस‑कटिंग क्लासेस की एक ऑप्ट‑इन लेयर। सामान्य token→class एमिटर (colorUtilitiesCss, tokenUtilitiesCss) @pantoken/utils में रहते हैं; यह पैकेज उन्हें क्यूरेटेड semantic नाम देता है, जबकि @pantoken/plugin-primitives कच्चा पैलेट फ़ीड करता है।
  • Fonts (opt-in fonts.css) — Instructure ब्रांड फ़ॉन्ट्स के लिए @font-face नियम। Base फ़ॉन्ट लागू करता है; fonts.css woff2s लोड करता है, इसलिए इसके बिना टेक्स्ट शालीनता से डाउनग्रेड हो जाता है।

सब कुछ टोकन IR से व्युत्पन्न शुद्ध CSS है, इसलिए यह टोकन्स के माध्यम से InstUI को ट्रैक करता है और InstUI React पैकेजों पर कोई निर्भरता नहीं रखता। वास्तविक, इंटरैक्टिव कॉम्पोनेंट्स के लिए, @pantoken/react-markdown (content) या @instructure/ui-* (apps) का उपयोग करें।

यह मॉड्यूल एक बैरल है: प्रत्येक दस्तावेजीकृत रिकॉर्ड अपना फ़ाइल में रहता है under components//utilities//rules//declarations/, जो lib/ compose API के साथ लिखा गया है। रजिस्ट्रीज़ (COMPONENTS/UTILITIES/RULES/DECLARATIONS) aggregation और parity टेस्ट चलाते हैं।

इंटरफेस ​

वैरिएबल्स ​

फंक्शन्स ​