pantoken / components

components ​

Beta

@pantoken/components — 一个具有 InstUI 风格的 CSS 组件库，由 --instui-* 令牌构建。

随附的样式表：

  • Base (baseCss) — 来自令牌的可选全局文档默认（box-sizing、body 重置、页面表面、基础文本颜色/字体、color-scheme）。它还包含焦点轮廓环，因此每个可聚焦元素开箱即获得可访问的 :focus-visible 轮廓。在 pantoken 管理页面时加载它。
  • Prose (proseCss) — 用于呈现 markdown/散文 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，而无需依赖 InstUI React 包。要使用真实的交互式组件，请使用 @pantoken/react-markdown（内容）或 @instructure/ui-*（应用）。

此模块是一个 barrel：每个有文档的记录位于 components//utilities//rules//declarations/ 下的单独文件中，使用 lib/ compose API 编写。注册表（COMPONENTS/UTILITIES/RULES/DECLARATIONS）驱动聚合和一致性测试。

接口 ​

变量 ​

函数 ​