pantoken / components

components ​

Бета

@pantoken/components — бібліотека CSS-компонентів у стилі InstUI, побудована з токенів --instui-*.

Поставляються такі стилі:

  • Base (baseCss) — необов’язкові глобальні налаштування документа з токенів (box-sizing, скидання body, поверхня сторінки, базовий колір/шрифт тексту, color-scheme). Містить також контур фокусу (focus-outline), тож кожен фокусований елемент отримує доступний контур :focus-visible «з коробки». Завантажуйте його, коли pantoken відповідає за сторінку.
  • Prose (proseCss) — стилі для відображення markdown/prose 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 (content) або @instructure/ui-* (apps).

Цей модуль — барель: кожен документований запис живе у власному файлі під components//utilities//rules//declarations/, створений з використанням compose API lib/. Реєстри (COMPONENTS/UTILITIES/RULES/DECLARATIONS) керують агрегацією + тестом парності.

Інтерфейси ​

Змінні ​

Функції ​