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, плюс кураторский набор семантических цветов/токенов) — опциональный слой сквозных классов. Универсальные эмиттеры token→class (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/, авторизована с помощью compose API lib/. Реестры (COMPONENTS/UTILITIES/RULES/DECLARATIONS) управляют агрегацией и тестом паритета.

Интерфейсы ​

Переменные ​

Функции ​