English

Magyar

English

Magyar

Select theme

Appearance

pantoken / components

components ​

Beta

@pantoken/components — an InstUI-look CSS component library, built from the --instui-* tokens.

The shipped stylesheets:

  • Base (baseCss) — opt-in global document defaults from the tokens (box-sizing, body reset, page surface, base text colour/font, color-scheme). It also carries the focus-outline ring, so every focusable gets an accessible :focus-visible outline out of the box. Load it when pantoken owns the page.
  • Prose (proseCss) — styles rendered markdown/prose HTML (tables, headings, links, lists, code) scoped to a content root, so a docs page or content region looks like InstUI without swapping the DOM for components. This is what the site renderers ship as their components.css.
  • Components (buttonCss, alertCss, badgeCss, aggregated by componentsCss) — class-based component styles you apply to your own markup (<button class="instui-button">), for the InstUI look outside a component framework. The --instui-elevation-* shadow scale (elevationCss) leads this sheet, since enough components float that shadows are an intrinsic design attribute rather than an add-on.
  • Utilities (viewCss, spacingUtilitiesCss, layoutUtilitiesCss, plus a curated semantic-colour/token set) — an opt-in layer of cross-cutting classes. The generic token→class emitters (colorUtilitiesCss, tokenUtilitiesCss) live in @pantoken/utils; this package feeds them the curated semantic names, while @pantoken/plugin-primitives feeds the raw palette.
  • Fonts (opt-in fonts.css) — the @font-face rules for the Instructure brand fonts. Base applies the font; fonts.css loads the woff2s, so text degrades gracefully without it.

Everything is pure CSS derived from the token IR, so it tracks InstUI through the tokens with no dependency on the InstUI React packages. For the real, interactive components, use @pantoken/react-markdown (content) or @instructure/ui-* (apps).

This module is a barrel: each documented record lives in its own file under components//utilities//rules//declarations/, authored with the lib/ compose API. The registries (COMPONENTS/UTILITIES/RULES/DECLARATIONS) drive aggregation + the parity test.

Interfaces ​

Variables ​

Functions ​