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
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.
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.
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.
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].
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.
menu	.instui-menu	A dropdown surface of items, groups, and separators.
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.
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.
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 a --value (0–100) custom property.
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.
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.
tabs	.instui-tabs	A tabbed panel set: a tab list, selectable tabs, and their panels.
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.
truncate	.instui-truncate	Single-line ellipsis truncation, or a multi-line clamp via --lines.

Utilities

Name	Class	Summary
color	.instui-text-danger	Semantic colour utilities: .instui-bg-<name>, .instui-text-<name>, and .instui-stroke-<name> for the curated semantic palette.
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	.instui-display-flex	Display and text-align utilities — .instui-display-<value> and .instui-text-align-<value> — as composable classes.
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).
responsive	.instui-hidden-max-md	Responsive visibility: .instui-hidden-max-<bp> / -hidden-min-<bp> hide by viewport width; the -cq- variants react to a .instui-container ancestor's width instead. Breakpoints sm/md/lg/xl.
screen-reader-content	.instui-screen-reader-content	Visually hides content while keeping it available to assistive tech (the standard clip pattern).
spacing	.instui-p-md	Margin and padding utilities — .instui-m<side>-<step> and .instui-p<side>-<step> on the spacing scale (sides t/b/s/e/x/y or none; margin also takes auto).
view	.instui-view	The View primitive: a neutral box with key-value modifiers for background, border, radius, shadow, display, position, overflow, and cursor.

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	.pantoken-prose	Typographic defaults for raw HTML — headings, paragraphs, lists, links, and code — under the .pantoken-prose scope.

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.
stacking	.instui-stack-topmost	z-index depth utilities: .instui-stack-<level> (deepest, below, above, topmost) set z-index from the --instui-stacking-* scale, so layers stack predictably instead of by hand-tuned numbers.
transition	.instui-transition	Enter/exit animation CSS: put .instui-transition on an element and toggle a .-<type>-<state> class (fade, scale, or slide-{up,down,left,right} × entering/entered/exiting/exited) from your own JS to animate it in and out.
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.