CSS API 參考

CSS API 參考涵蓋 pantoken 的類別式元件層：基於設計代幣系統的元件、實用程式、全域規則與宣告。

元件

名稱	類別	摘要
agent-shell	.instui-agent-shell	供 AI 代理使用的介面容器。
alert	.instui-alert	帶有狀態色條與來自共享圖示集之遮罩狀態符號的內嵌訊息。
avatar	.instui-avatar	顯示姓名縮寫或圖像的使用者頭像，預設為圓形。
badge	.instui-badge	置於目標角落的小計數或狀態圓點。
banner	.instui-banner	可關閉且帶圖示的訊息面板，用於頁面層級或內嵌情境公告。
billboard	.instui-billboard	大型空狀態或呼籲操作區塊：英雄圖示或圖像、標題與訊息。
breadcrumb	.instui-breadcrumb	帶分隔符的路徑麵包屑；最後一個麵包屑為目前頁面。
breadcrumb.link	li	一個麵包屑（InstUI Breadcrumb.Link），父項的 <li> 中的 <ol>；最後一個為目前頁面。
button	.instui-button	一個可存取的動作控制，採代幣配色樣式；預設為主要樣式。
byline	.instui-byline	媒體物件：標題與描述旁的一個重點圖像。
calendar	.instui-calendar	帶導覽、星期標頭與日期格的靜態月份格。
calendar.day	.day	一個日期儲存格（InstUI Calendar.Day）；-today、-selected 與 -outside-month 標示其狀態。
card	.instui-card	接受任意內容的面板容器。
checkbox	.instui-checkbox	原生核取方塊及其標籤，或透過 -variant-toggle 顯示為切換開關。
close-button	.instui-close-button	透明圖示按鈕，自行繪製 × 符號，有三種尺寸與一種在色彩背景上的變體。
context-view	.instui-context-view	帶箭頭的立體提示，可定位於任一邊；可作為原生 [popover] 使用。
drawer-layout	.instui-drawer-layout	分割佈局，含可收合的側邊抽屜與主可捲動內容窗格。
drawer-layout.content	.content	填滿抽屜旁剩餘空間的主要內容窗格。
drawer-layout.tray	.tray	主內容旁的側邊面板，具有可選的覆蓋層與類似抽屜的表面修飾。
file-drop	.instui-file-drop	具 hover、接受與拒絕狀態的檔案放置區。
form-field	.instui-form-field	表單欄位包裝器：標籤、其控制項，以及內聯、必填或唯讀的佈局。
form-field-group	.instui-form-field-group	帶圖例的 <fieldset> 群組，支援欄或內聯佈局，間距可配置。
form-field-messages	.instui-form-field-messages	欄位說明與驗證訊息 — 提示、錯誤、成功與僅螢幕閱讀器可見；錯誤與成功顯示符號。
heading	.instui-heading	由 -level-h1 到 -level-h6 的標題排版樣式。
img	.instui-img	樣式化的 <img>，具有可堆疊的顯示、裁切與效果修飾。
in-place-edit	.instui-in-place-edit	一個 [contenteditable]，在聚焦前以純文字呈現，聚焦後顯示輸入介面外框。
input-group	.instui-input-group	包覆文字輸入的外觀，帶有前置與後置圖示插槽。
link	.instui-link	樣式化的超連結，具尺寸、深色背景用的反色變體，以及內聯或無樣式形式。
list	.instui-list	具有代幣驅動項目間距的清單。
list.item	.instui-list	一個清單項（InstUI List.Item）。
mask	.instui-mask	一個填滿已定位父元素並將內容置中的內流覆蓋層 — 例如卡片上的載入指示器。對於模態視窗，建議使用原生 <dialog>（其 ::backdrop 為遮罩）。所有這些修飾也可作為全域項使用（裸用或串接到其他元件）— 見 mask 全域實用程式。
menu	.instui-menu	包含項目、群組與分隔符的下拉表面。
menu.group	.group	帶標籤的群組標題（InstUI Menu.Group/Menu.ItemGroup）。
menu.item	.item	一個選單條目（InstUI Menu.Item）；可加上 -disabled、-highlighted 或 -active/[aria-checked]。
menu.separator	.separator	項目之間的分隔線（InstUI Menu.Separator）。
metric	.instui-metric	帶標籤的統計資訊 — 大型數值配以說明標題。
modal	.instui-modal	對話面板表面（可用於原生 <dialog>）；包含標頭/內容/頁腳區塊。
modal.body	.body	內容區域（InstUI Modal.Body）；單一 <img> 將延伸至全寬。
modal.footer	.footer	操作列（InstUI Modal.Footer）。
modal.header	.header	標題列（InstUI Modal.Header）。
number-input	.instui-number-input	帶 +/- 微調按鈕欄的數字輸入外觀。
pagination	.instui-pagination	分頁導覽：編號頁、首頁、上頁、下頁與末頁箭頭，以及表示間隔的省略號。
pagination.page	.page	頁面連結或按鈕（InstUI Pagination.Page）；目前頁面帶有 [aria-current]。
pill	.instui-pill	緊湊的狀態標籤；可用共享的 -icon-<name> 形式加前置符號。
popover	.instui-popover	為原生 [popover] 提供的立體表面，使用 CSS 錨點定位。
progress	.instui-progress	具彩色量尺、尺寸與可選值標籤的確定型進度條。
progress-circle	.instui-progress-circle	由 --value 與 --value-max 自訂屬性驅動的圓形進度環。
radio	.instui-radio	原生的單選按鈕及其標籤。
radio-input-group	.instui-radio-input-group	單選選擇器的 <fieldset>，可為純樣式或連接式分段切換。
range-input	.instui-range-input	具樣式的範圍滑桿，帶反色值提示泡泡。
rating	.instui-rating	以實心與空心圖示顯示星級評分，並可選擇顯示數值標籤。
side-nav-bar	.instui-side-nav-bar	垂直導覽側欄，項目為圖示加標籤，支援縮小為僅顯示圖示的模式。
side-nav-bar.item	.item	一個導覽項目（InstUI SideNavBar.Item）；以 -selected 標示目前啟用的項目。
simple-select	.instui-simple-select	具有 caret 的樣式化原生 <select>，配合文字輸入的狀態與尺寸。
spinner	.instui-spinner	動畫化的載入環；應為其設定 role="status" 與 aria-label。
table	.instui-table	為 th 與 td 提供樣式化資料表，並可加上可選標題，支援懸停、固定與堆疊卡片版面。
table.body	tbody	表格的資料列群組（InstUI Table.Body）。
table.cell	td	資料儲存格（InstUI Table.Cell）。
table.col-header	th	欄位標頭儲存格（InstUI Table.ColHeader）；預設 th 樣式，對 th[scope="row"] 則由 table.row-header 覆蓋。
table.head	thead	表格的表頭列群組（InstUI Table.Head）。
table.row	tr	表格列（InstUI Table.Row）。
table.row-header	th[scope="row"]	列標頭儲存格（InstUI Table.RowHeader）；樣式來自列標頭的 token，而非欄標頭的 token。
tabs	.instui-tabs	分頁面板集合：一組分頁列表、可選取的標籤，以及其對應面板。
tabs.panel	.panel	某分頁的內容面板（InstUI Tabs.Panel）。
tabs.tab	.tab	單一分頁按鈕（InstUI Tabs.Tab，由父層 Tabs 的分頁列表設定）；以 -selected 標示目前啟用的分頁。
tag	.instui-tag	用於關鍵字或篩選的內嵌標籤（chip）。
text	.instui-text	正文文字排版，含尺寸、字重、顏色與樣式修飾。
text-area	.instui-text-area	樣式化且可調整大小的原生 <textarea>，狀態與尺寸與文字輸入相同。
text-input	.instui-text-input	樣式化的原生 <input>，包含 date、time 與 datetime-local（由瀏覽器提供選擇器），並具驗證狀態與尺寸。
toggle-details	.instui-toggle-details	具有旋轉箭頭的樣式化原生 <details> 展開元件。
toggle-group	.instui-toggle-group	基於 <details> 的帶框展開元件：含箭頭的摘要列與可摺疊內容。
tooltip	.instui-tooltip	CSS 懸停與聚焦的工具提示氣泡，可置放於任一側。
tray	.instui-tray	從任一側滑入的邊緣固定面板；可為原生 [popover] 或 <dialog>。
tree-browser	.instui-tree-browser	具有旋轉箭頭的巢狀集合與葉節點項目的展開樹狀結構。
view	.instui-view	View 基本元件：一個中性方塊，提供背景、邊框、圓角、陰影、顯示、定位、溢出與游標的鍵值修飾。這些修飾也能全局使用（裸用或串接於任何元件）——參見 background/border/shadow/display/position/overflow/cursor 等工具函式。

工具

名稱	類別	摘要
color	.--text-danger	語義色彩工具：.--bg-<name>、.--text-<name>（別名為 .--color-<name>）與 .--border-<name>，用於策劃的語義調色。每一項也有元件附屬的別名修飾（例如在任何 .instui-<component> 上的 -bg-danger）。
cursor	.--cursor-pointer	cursor 作為可組合的全局類別 — .--cursor-<value> — 可裸用或串接於任何元件（.instui-button.--cursor-pointer）。
gap	.--gap-md	以間距刻度為基礎的彈性/格線 gap 工具，提供短寫（--gap-sm）或完整寫法（--gap-small）。可裸用或串接於任何元件（.instui-view.--gap-sm）——已由元件特定 token 設定其自身 gap 的元件可能會被覆蓋。
icon	.instui-icon	圖示系統：.instui-icon 大小設定，以及共享的 -icon-<name> 繪製器，會在任何元素之前以遮罩方式渲染字形（在 currentColor 中）。
layout	.--display-flex	顯示與文字對齊工具 — .--display-<value> 與 .--text-align-<value> — 作為可組合的全局類別，可裸用或串接於任何元件。
maskglobal	.--mask-overlay	全局雙重複本的 mask 元件疊層修飾集合 — --mask-overlay, --mask-fullscreen, --mask-blur — 可裸用或串接於任何元件，無需包在 .instui-mask 元素內。
overflow	.--overflow-x-hidden	overflow-x/overflow-y 作為可組合的全局類別 — .--overflow-x-<value> / .--overflow-y-<value> — 可裸用或串接於任何元件。
position	.--position-relative	position 作為可組合的全局類別 — .--position-<value> — 可裸用或串接於任何元件（.instui-button.--position-relative）。
responsive	[class*="-hidden-"],[class*="-show-"]	跨主題斷點刻度的視窗或容器寬度顯示/隱藏類別。
screen-reader-content	.instui-screen-reader-content	在視覺上隱藏內容但仍保留給輔助技術存取（標準剪裁模式）。
spacing	.--p-md	外邊距與內邊距工具 — 在間距刻度上使用 .--m<side>-<step> / .--margin-<side>-<step> 與 .--p<side>-<step> / .--padding-<side>-<step>（邊側 t/b/s/e/x/y 或無，短寫或完整寫法均可 — 例如 --mb-sm 與 --margin-bottom-small 為相同規則；margin 亦接受 auto）。可直接使用或串接到任何元件（例如 class="instui-view --mb-sm"）。
stacking	.--stack-topmost	z-index 深度工具 — .--stack-<level>（deepest, below, above, topmost）— 可直接使用或串接到任何元件，讓圖層堆疊可預測而非依賴手動調整的數值。
transition	.instui-transition.-transition-fade-entering	Transition 元件的動畫狀態類別 — .instui-transition 與狀態類別（-transition-fade-entering, -transition-scale-exited, 等）— 可直接使用或串接到任何元件。
truncate	.--truncate	以行數限制控制的省略號截斷，透過 --lines 調整 — 可直接使用或串接到任何元件（.instui-button.--truncate）。
visual-debug	.-with-visual-debug	版面除錯用外框：將複合的 .-with-visual-debug 串接到任一元素，會描繪該框與其直接子元素，讓版面結構一目了然。

規則

名稱	類別	摘要
base	*	選用的全域重設：box-sizing、頁面表面、基礎文字顏色與字型、color-scheme 以及連結預設樣式。
prose	:where(body)	原生 HTML 的排版預設 — 標題、段落、清單、連結與程式碼 — 在匯入處自動套用（預設 :where(body)）；可傳入 options.scope 以針對不同內容根節點（例如 .vp-doc）。

Plugins

名稱	類別	摘要
logos	.logos	Instructure 產品標誌作為 CSS 圖像 token：--instui-logo-<product>-<layout>-<mode> 包含 data-URI SVG，因此標誌可透過例如 background-image: var(--instui-logo-canvas-horizontal-color) 來繪製。
primitives	.instui-bg-primitive-color-white	原始基礎色板的選用工具類別：.instui-bg-/fg-/border-primitive-color-<name> 從原始色彩 token 塗色，另有 font-family/font-weight 為原始字型 token 的工具。這些保留在語意工具之外以維持語意覆寫的純粹性。
visual-debug	.-with-visual-debug	版面除錯用外框：將複合的 .-with-visual-debug 串接到任一元素，會描繪該框與其直接子元素，讓版面結構一目了然。

layout

名稱	類別	摘要
callout	div[class~="instui-callout"]	內嵌資訊提示，用於短小提醒或註記。
hero	div[class~="instui-hero"]	全寬標題區，包含標題、副標題，以及可選的背景圖像。
page-layout	div[class~="instui-page-layout"]	標準三欄頁面配置，含標頭、側欄與主要內容區。
rubric-note	div[class~="instui-rubric-note"]	結構化筆記，含評分類別與評分指示器。
testimonial	div[class~="instui-testimonial"]	帶引用來源與可選圖片的引用或推薦展示。
two-column	div[class~="instui-two-column"]	左右兩欄佈局，包含左側與右側內容區域。
wrapper	body[class~="instui-display-flex"]	應用殼列：側邊導覽、含標頭的容器，以及可選面板。