pantoken / components

components ​

בטא

@pantoken/components — ספריית קומפוננטות CSS במראה InstUI, נבנתה מתוך הטוקנים --instui-*.

גליונות הסגנון המשלוחים:

  • Base (baseCss) — ברירות מחדל גלובליות ההכפפתיות לטוקנים (box-sizing, איפוס גוף, משטח הדף, צבע/גופן טקסט בסיסי, color-scheme). מחזיק גם את טבעת קו המתאר לפוקוס, כך שכל אלמנט שניתן לפוקוס מקבל באופן נגיש קו מתאר :focus-visible מוכנים לשימוש. טען אותו כאשר pantoken שולט בעמוד.
  • Prose (proseCss) — סגנונות עבור HTML ממסמך/פרוזה שנrender-ים (טבלאות, כותרות, קישורים, רשימות, קוד) המקופלים לשורש תוכן, כך שעמוד תיעוד או אזור תוכן ייראו כמו InstUI בלי להחליף את ה‑DOM בקומפוננטות. זה מה שמשרתי האתר משנעים כ־ components.css שלהם.
  • Components (buttonCss, alertCss, badgeCss, מאוגדים על ידי componentsCss) — סגנונות קומפוננטות מבוססי מחלקה שמחילים על הסימון שלכם (<button class="instui-button">), למראה InstUI מחוץ למסגרת קומפוננטות. קנה המידה של צללי --instui-elevation-* (elevationCss) מוביל את הגיליון הזה, כיוון שיש מספיק קומפוננטות צפות ועד כדי כך שצללים הם מאפיין עיצובי פנימי ולא תוספת.
  • Utilities (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, בנוסף למערכת טוקנים/צבע סמנטית ממומנת) — שכבה אופציונלית של מחלקות חוצות-תחום. המפיצים הגנריים token→class (colorUtilitiesCss, tokenUtilitiesCss) חיים ב־@pantoken/utils; החבילה הזו מספקת להם את השמות הסמנטיים המגוררים, בעוד @pantoken/plugin-primitives מספק את הפלטה הגולמית.
  • Fonts (אופציונלי fonts.css) — כללי @font-face עבור גופני המותג של Instructure. Base מיישם את הגופן; fonts.css טוען את ה‑woff2s, כך שהטקסט מתדרדר בעדינות בלעדיהם.

הכל הוא CSS טהור הנגזר מ‑IR של הטוקנים, כך שהוא עוקב אחרי InstUI דרך הטוקנים ללא תלות בחבילות React של InstUI. עבור הקומפוננטות האמיתיות והאינטרקטיביות, השתמש ב־@pantoken/react-markdown (תוכן) או @instructure/ui-* (אפליקציות).

מודול זה הוא חבית: כל רשומה מתועדת חיה בקובץ משלה תחת components//utilities//rules//declarations/, מחוברת באמצעות ממשק ה־compose של lib/. הרישומים (COMPONENTS/UTILITIES/RULES/DECLARATIONS) מניעים אגגרגציה + מבחן שוויון.

ממשקים ​

משתנים ​

פונקציות ​