pantoken / components

components ​

ベータ

@pantoken/components — --instui-* トークンから構築された InstUI 風の CSS コンポーネントライブラリです。

配布されるスタイルシート：

  • Base (baseCss) — トークン由来のオプトインのグローバルドキュメントデフォルト（box-sizing、body のリセット、ページ表面、基本の文字色/フォント、color-scheme）。フォーカスアウトラインのリングも含むため、すべてのフォーカス可能要素はデフォルトでアクセシブルな :focus-visible アウトラインを得ます。pantoken がページを管理する場合に読み込んでください。
  • Prose (proseCss) — マークダウン/本文 HTML（表、見出し、リンク、リスト、コード）をレンダリングするスタイルをコンテンツルートにスコープしたもの。これにより、ドキュメントページやコンテンツ領域が DOM をコンポーネントに置き換えずに InstUI風に見えます。サイトのレンダラーはこれを彼らの 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） — Instructure ブランドフォントの @font-face ルール。Base はフォントを「適用」し、fonts.css は woff2 を「読み込む」ため、読み込まれていない場合でもテキストは段階的にフォールバックします。

すべてはトークン IR から派生した純粋な CSS で、InstUI React パッケージへの依存なしにトークンを通じて InstUI を追跡します。実際の対話的コンポーネントには、@pantoken/react-markdown（コンテンツ）または @instructure/ui-*（アプリ）を使用してください。

このモジュールはバレルです：各ドキュメント化されたレコードは components//utilities//rules//declarations/ の下のそれぞれのファイルにあり、lib/ compose API で作成されています。レジストリ（COMPONENTS/UTILITIES/RULES/DECLARATIONS）が集約とパリティテストを駆動します。

インターフェース ​

変数 ​

関数 ​