pantoken / components

components ​

Beta（測試）

@pantoken/components — 一個具有 InstUI 外觀的 CSS 元件庫，從 --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）— 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）驅動聚合與相容性測試。

介面 ​

變數 ​

函式 ​