CSS API reference
The CSS API reference covers pantoken's class-based component layer: components, utilities, global rules, and declarations built on the token system.
Components
| Name | Class | Summary |
|---|---|---|
| agent-shell | .instui-agent-shell | A surface container for AI agents. |
| alert | .instui-alert | An inline message with a status colour bar and a masked status glyph from the shared icon set. |
| avatar | .instui-avatar | A user avatar showing initials or an image, circular by default. |
| badge | .instui-badge | A small count or status dot placed over a target's corner. |
| banner | .instui-banner | A dismissible, iconed message surface for page-level or in-context announcements. |
| billboard | .instui-billboard | A large empty-state or call-to-action block: a hero icon or image, a heading, and a message. |
| breadcrumb | .instui-breadcrumb | A breadcrumb trail with separators; the last crumb is the current page. |
| breadcrumb.link | li | A crumb (InstUI Breadcrumb.Link), an <li> in the parent's <ol>; the last one is the current page. |
| button | .instui-button | An accessible action control, styled from the token palette; primary by default. |
| byline | .instui-byline | A media object: a hero figure beside a title and description. |
| calendar | .instui-calendar | A static month grid with navigation, weekday headers, and day cells. |
| calendar.day | .day | A day cell (InstUI Calendar.Day); -today, -selected, and -outside-month mark its state. |
| card | .instui-card | A surface container that accepts arbitrary content. |
| checkbox | .instui-checkbox | A native checkbox and its label, or a switch via -variant-toggle. |
| close-button | .instui-close-button | A transparent icon button that draws its own × glyph, in three sizes plus an inverse variant. |
| context-view | .instui-context-view | An elevated callout with a caret, positionable on any side; works as a native [popover]. |
| drawer-layout | .instui-drawer-layout | A split layout with a collapsible side tray and a primary scrollable content pane. |
| drawer-layout.content | .content | The primary content pane that fills remaining space beside the tray. |
| drawer-layout.tray | .tray | The side panel beside main content, with optional overlay and tray-like surface modifiers. |
| file-drop | .instui-file-drop | A file dropzone with hover, accepted, and rejected states. |
| form-field | .instui-form-field | A form-field wrapper: a label, its controls, and inline, required, or readonly layouts. |
| form-field-group | .instui-form-field-group | A <fieldset> group with a legend, a column or inline layout, and configurable spacing. |
| form-field-messages | .instui-form-field-messages | Field help and validation messages — hint, error, success, and screen-reader-only — with a glyph on error and success. |
| heading | .instui-heading | Heading typography from -level-h1 to -level-h6. |
| img | .instui-img | A styled <img> with display, crop, and effect modifiers that stack. |
| in-place-edit | .instui-in-place-edit | A [contenteditable] that reads as text until focused, then shows input chrome. |
| input-group | .instui-input-group | A facade around a text input with leading and trailing icon slots. |
| link | .instui-link | A styled hyperlink with sizes, an inverse variant for dark backgrounds, and inline or unstyled forms. |
| list | .instui-list | A list with token-driven item spacing. |
| list.item | .instui-list | A list item (InstUI List.Item). |
| mask | .instui-mask | An in-flow overlay that fills its positioned parent and centres its content — e.g. a spinner over a card. For a modal, prefer a native <dialog> (its ::backdrop is the mask). Every one of these modifiers is also available globally (bare, or chained onto any other component) — see the mask global utility. |
| menu | .instui-menu | A dropdown surface of items, groups, and separators. |
| menu.group | .group | A labelled group heading (InstUI Menu.Group/Menu.ItemGroup). |
| menu.item | .item | A menu entry (InstUI Menu.Item); add -disabled, -highlighted, or -active/[aria-checked]. |
| menu.separator | .separator | A divider rule between items (InstUI Menu.Separator). |
| metric | .instui-metric | A labelled statistic — a large value over a caption. |
| modal | .instui-modal | A dialog surface (works on a native <dialog>); header/body/footer parts. |
| modal.body | .body | The content region (InstUI Modal.Body); a lone <img> goes full-bleed. |
| modal.footer | .footer | The actions row (InstUI Modal.Footer). |
| modal.header | .header | The title row (InstUI Modal.Header). |
| number-input | .instui-number-input | A number-input facade with a +/- spinner column. |
| pagination | .instui-pagination | Page navigation: numbered pages, first, previous, next, and last arrows, and an ellipsis for gaps. |
| pagination.page | .page | A page link or button (InstUI Pagination.Page); the current page carries [aria-current]. |
| pill | .instui-pill | A compact status label; add a leading glyph with the shared -icon-<name> form. |
| popover | .instui-popover | An elevated surface for a native [popover], positioned with CSS anchor positioning. |
| progress | .instui-progress | A determinate progress bar with a coloured meter, sizes, and an optional value label. |
| progress-circle | .instui-progress-circle | A circular progress ring driven by --value and --value-max custom properties. |
| radio | .instui-radio | A native radio button and its label. |
| radio-input-group | .instui-radio-input-group | A single-select radio <fieldset>, plain or as a connected segmented toggle. |
| range-input | .instui-range-input | A styled range slider with an inverse value bubble. |
| rating | .instui-rating | A star rating with filled and empty glyphs and an optional numeric label. |
| side-nav-bar | .instui-side-nav-bar | A vertical navigation rail of icon-over-label items, with a minimized icons-only mode. |
| side-nav-bar.item | .item | A navigation entry (InstUI SideNavBar.Item); -selected marks the active one. |
| simple-select | .instui-simple-select | A styled native <select> with a caret, matching the text-input states and sizes. |
| spinner | .instui-spinner | An animated loading ring; give it role="status" and an aria-label. |
| table | .instui-table | A styled data table for th and td plus an optional caption, with hover, fixed, and stacked-card layouts. |
| table.body | tbody | The table's data row group (InstUI Table.Body). |
| table.cell | td | A data cell (InstUI Table.Cell). |
| table.col-header | th | A column-header cell (InstUI Table.ColHeader); the default th styling, overridden by table.row-header for th[scope="row"]. |
| table.head | thead | The table's header row group (InstUI Table.Head). |
| table.row | tr | A table row (InstUI Table.Row). |
| table.row-header | th[scope="row"] | A row-header cell (InstUI Table.RowHeader); styled from the row-header tokens, not the column-header ones. |
| tabs | .instui-tabs | A tabbed panel set: a tab list, selectable tabs, and their panels. |
| tabs.panel | .panel | The content panel for a tab (InstUI Tabs.Panel). |
| tabs.tab | .tab | A single tab button (InstUI Tabs.Tab, configured via the parent Tabs's tab list); -selected marks the active one. |
| tag | .instui-tag | An inline chip for a keyword or filter. |
| text | .instui-text | Body-text typography with size, weight, colour, and style modifiers. |
| text-area | .instui-text-area | A styled, resizable native <textarea> with the same states and sizes as the text input. |
| text-input | .instui-text-input | A styled native <input> — including date, time, and datetime-local, where the browser supplies the picker — with validation states and sizes. |
| toggle-details | .instui-toggle-details | A styled native <details> disclosure with a rotating chevron. |
| toggle-group | .instui-toggle-group | A bordered disclosure built on <details>: a chevron summary row and collapsible content. |
| tooltip | .instui-tooltip | A CSS hover and focus tooltip bubble, positionable on any side. |
| tray | .instui-tray | An edge-pinned panel that slides in from any side; a native [popover] or <dialog>. |
| tree-browser | .instui-tree-browser | A disclosure tree of nested collections and leaf items, with rotating chevrons. |
| view | .instui-view | The View primitive: a neutral box with key-value modifiers for background, border, radius, shadow, display, position, overflow, and cursor. Every one of these modifiers is also available globally (bare, or chained onto any other component) — see the background/border/shadow/display/position/overflow/cursor utilities. |
Utilities
| Name | Class | Summary |
|---|---|---|
| color | .--text-danger | Semantic colour utilities: .--bg-<name>, .--text-<name> (aliased as .--color-<name>), and .--border-<name> for the curated semantic palette. Every one of these also has a component-attached alias modifier (for example -bg-danger on any .instui-<component>). |
| cursor | .--cursor-pointer | cursor as a composable, global class — .--cursor-<value> — usable bare or chained onto any component (.instui-button.--cursor-pointer). |
| gap | .--gap-md | Flex/grid gap utilities on the spacing scale, short (--gap-sm) or long (--gap-small) spelling. Usable bare or chained onto any component (.instui-view.--gap-sm) — components that already set their own gap from a component-specific token may have it overridden. |
| icon | .instui-icon | The icon system: .instui-icon sizing plus the shared -icon-<name> painter that masks a glyph (in currentColor) before any element. |
| layout | .--display-flex | Display and text-align utilities — .--display-<value> and .--text-align-<value> — as composable, global classes, usable bare or chained onto any component. |
| maskglobal | .--mask-overlay | A global, dual copy of the mask component's overlay modifiers — --mask-overlay, --mask-fullscreen, --mask-blur — usable bare or chained onto any component, without wrapping in a .instui-mask element. |
| overflow | .--overflow-x-hidden | overflow-x/overflow-y as composable, global classes — .--overflow-x-<value> / .--overflow-y-<value> — usable bare or chained onto any component. |
| position | .--position-relative | position as a composable, global class — .--position-<value> — usable bare or chained onto any component (.instui-button.--position-relative). |
| responsive | [class*="-hidden-"],[class*="-show-"] | Viewport- or container-width show/hide classes across a themed breakpoint scale. |
| screen-reader-content | .instui-screen-reader-content | Visually hides content while keeping it available to assistive tech (the standard clip pattern). |
| spacing | .--p-md | Margin and padding utilities — .--m<side>-<step> / .--margin-<side>-<step> and .--p<side>-<step> / .--padding-<side>-<step> on the spacing scale (sides t/b/s/e/x/y or none, spelled short or fully long — for example --mb-sm and --margin-bottom-small are the same rule; margin also takes auto). Usable bare or chained onto any component (for example class="instui-view --mb-sm"). |
| stacking | .--stack-topmost | z-index depth utilities — .--stack-<level> (deepest, below, above, topmost) — usable bare or chained onto any component, so layers stack predictably instead of by hand-tuned numbers. |
| transition | .instui-transition.-transition-fade-entering | Animation state classes for the Transition component — .instui-transition and state classes (-transition-fade-entering, -transition-scale-exited, etc.) — usable bare or chained onto any component. |
| truncate | .--truncate | Ellipsis truncation with line clamping controlled by --lines — usable bare or chained onto any component (.instui-button.--truncate). |
| visual-debug | .-with-visual-debug | A layout-debugging outline: compound .-with-visual-debug onto any element to outline the box and its immediate children, so a layout's structure is visible at a glance. |
Rules
| Name | Class | Summary |
|---|---|---|
| base | * | The opt-in global reset: box-sizing, the page surface, base text colour and font, color-scheme, and link defaults. |
| prose | :where(body) | Typographic defaults for raw HTML — headings, paragraphs, lists, links, and code — applied automatically wherever it's imported (default :where(body)); pass options.scope to target a different content root instead (e.g. .vp-doc). |
Plugins
| Name | Class | Summary |
|---|---|---|
| logos | .logos | Instructure product logos as CSS image tokens: --instui-logo-<product>-<layout>-<mode> holds a data-URI SVG, so a logo paints via e.g. background-image: var(--instui-logo-canvas-horizontal-color). |
| primitives | .instui-bg-primitive-color-white | Opt-in utility classes for the raw primitive palette: .instui-bg-/fg-/border-primitive-color-<name> paint a colour from the primitive colour tokens, plus font-family/font-weight utilities for the primitive font tokens. Kept out of the semantic utilities so overrides there stay semantic-only. |
| visual-debug | .-with-visual-debug | A layout-debugging outline: compound .-with-visual-debug onto any element to outline the box and its immediate children, so a layout's structure is visible at a glance. |
layout
| Name | Class | Summary |
|---|---|---|
| wrapper | body[class~="instui-display-flex"] | App-shell row: side nav, container with header, and optional panel. |