pantoken / components

components ​

بيتا

@pantoken/components — مكتبة مكونات CSS بمظهر InstUI، مبنية من توكنات --instui-*.

نماذج الأنماط المرفقة:

  • Base (baseCss) — إعدادات افتراضية اختيارية للمستند من التوكنات (box-sizing، إعادة ضبط body، سطح الصفحة، لون/خط النص الأساسي، color-scheme). كما يتضمن حلقة خط البيان (focus-outline)، لذا كل عنصر يمكن التركيز عليه يحصل على مخطط :focus-visible سهل الوصول مباشرةً. حمّله عندما تملك pantoken الصفحة.
  • Prose (proseCss) — أنماط لـ HTML المترجم/النصي (جداول، عناوين، روابط، قوائم، كود) موزَّعة في جذر المحتوى، بحيث تبدو صفحة الوثائق أو منطقة المحتوى بمظهر InstUI دون استبدال DOM بالمكونات. هذا ما تسلمه محركات الموقع كـ components.css.
  • Components (buttonCss, alertCss, badgeCss, مجمعة بواسطة componentsCss) — أنماط مكونات قائمة على الأصناف تطبقها على العلامات الخاصة بك (<button class="instui-button">)، لمظهر InstUI خارج إطار المكونات. يتصدر هذا الملف مقياس الظل --instui-elevation-* (elevationCss)، لأن عدداً كافياً من المكونات يطفو بحيث تصبح الظلال صفة تصميم جوهرية وليس إضافة اختيارية.
  • Utilities (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, بالإضافة إلى مجموعة من الأسماء الدلالية/التوكنات المختارة) — طبقة اختيارية من الأصناف العابرة. مولدات التوكن→الأصناف العامة (colorUtilitiesCss, tokenUtilitiesCss) موجودة في @pantoken/utils; هذه الحزمة تزودها بالأسماء الدلالية المنقّحة، بينما @pantoken/plugin-primitives تزودها باللوحة الأولية.
  • Fonts (اختياري fonts.css) — قواعد @font-face لخطوط علامة Instructure التجارية. يقوم Base بتطبيق الخط؛ و fonts.css يحمل ملفات woff2، لذا يتدرج النص بشكل مقبول عند غيابها.

كل شيء هو CSS نقي مستمد من IR التوكنات، لذلك يواكب InstUI عبر التوكنات دون اعتماد على حزم React الخاصة بـ InstUI. للمكونات التفاعلية الحقيقية، استخدم @pantoken/react-markdown (المحتوى) أو @instructure/ui-* (التطبيقات).

هذه الوحدة عبارة عن برّميل: كل سجل موثق موجود في ملفه الخاص تحت components//utilities//rules//declarations/، مؤلف باستخدام واجهة تأليف lib/. تسير السجلات (COMPONENTS/UTILITIES/RULES/DECLARATIONS) التجميع والاختبار المتطابق.

واجهات ​

المتغيرات ​

الدوال ​