The package map
pantoken is a monorepo of small, single-purpose packages grouped into buckets. Install the one that fits your task, or install the unified pantoken package and import from its subpaths (for example pantoken/css, pantoken/react, pantoken/tailwind).
Core
The shared model and the transformer everything else builds on.
| Package | What it does |
|---|---|
@pantoken/model | Zero-dependency TypeScript types: the Token shape and the plugin contract. |
@pantoken/core | Resolves the upstream tokens and icons into the canonical IR, and renders CSS. |
@pantoken/tokens | The resolved IR vendored as static JSON, per theme, plus the raw Tokens Studio source. |
@pantoken/utils | The token resolver, reference regexes, case and color helpers, drift checks, and the token→utility-class emitters. |
@pantoken/plugin-kit | Build and compose pantoken plugins with definePlugin. |
@pantoken/cli | pantoken generate <target> — emit native and platform source. |
Formats
Turn the tokens into a file format.
| Package | Output |
|---|---|
@pantoken/css | @property-typed CSS with light-dark() and data-URI icons. |
@pantoken/scss | SCSS variables, resolved to a single mode. |
@pantoken/less | Less variables. |
@pantoken/stylus | Stylus variables. |
@pantoken/dtcg | A W3C Design Tokens (DTCG) document. |
@pantoken/tokens | The IR as JavaScript and JSON (also listed under Core). |
@pantoken/icons | An ergonomic view over the icon tokens. |
@pantoken/icon-font | An icon web font (TTF, WOFF2) plus its CSS. |
@pantoken/components | An InstUI-look CSS component library (button, alert, table, and more) plus a base reset with focus ring, prose styling, cross-cutting utilities, and the brand fonts. See Components. |
Renderers
Framework and tool integrations.
| Package | For |
|---|---|
@pantoken/react | React hooks, <Icon>, and a token provider. |
@pantoken/vue, @pantoken/svelte, @pantoken/angular | The web component, wired into each framework. |
@pantoken/react-native | StyleSheet-friendly token objects (no CSS variables). |
@pantoken/web-components | <instui-icon> and styled primitives, framework-agnostic. |
@pantoken/astro | Token setup for Astro sites. |
@pantoken/react-markdown, @pantoken/rehype | Icon tokens and swatches in Markdown. |
@pantoken/markdown-it | A markdown-it plugin for icon codes and color swatches. |
@pantoken/css-in-js | A type-safe theme for styled-components and Emotion. |
@pantoken/mui | A Material UI theme. |
@pantoken/bootstrap, @pantoken/shadcn | CSS-variable bridges for Bootstrap and shadcn/ui. |
@pantoken/foundation | A Sass settings override and CSS overlay for Foundation. |
@pantoken/docusaurus, @pantoken/vitepress | Themes for Docusaurus and VitePress. |
@pantoken/mintlify | A Mintlify docs.json theme (colors + background). |
@pantoken/storybook | A Storybook theme. |
@pantoken/pendo | Instructure-styled global CSS for Pendo guides. |
Bundlers
Build-tool integrations.
| Package | For |
|---|---|
@pantoken/vite | A Vite plugin with virtual modules and CSS injection. |
@pantoken/next | withPantoken for Next.js transpilePackages. |
@pantoken/webpack | A webpack plugin. |
@pantoken/postcss | The @pantoken; at-rule. |
@pantoken/tailwind | A Tailwind preset. |
@pantoken/panda | A Panda CSS preset. |
Platforms
Native and site-generator targets, emitted by the CLI or their own API.
| Package | Output |
|---|---|
@pantoken/swift | Swift source plus a SwiftPM manifest stub. |
@pantoken/android | Android XML resources. |
@pantoken/compose | Jetpack Compose Kotlin. |
@pantoken/flutter | Flutter Dart. |
@pantoken/rust | Rust consts for egui or iced. |
@pantoken/wordpress | A WordPress block-theme theme.json. |
@pantoken/vanilla | A Vanilla Forums variables.json. |
@pantoken/drupal | Drupal theme assets. |
@pantoken/hugo, @pantoken/jekyll | Hugo and Jekyll site data. |
@pantoken/email | Inline-friendly values for HTML email. |
Design
For design tools.
| Package | Output |
|---|---|
@pantoken/figma | A Figma Variables payload. |
@pantoken/swatches | Color swatches (ASE, GPL, Sketch) plus a viewable SVG specimen sheet. |
Plugins
Optional transforms that extend the token or CSS output. See Plugins.
| Package | What it adds |
|---|---|
@pantoken/plugin-stacking | Named z-index depths as tokens + .instui-stack-* classes. |
@pantoken/plugin-visual-debug | The -with-visual-debug layout-debugging outline. |
@pantoken/plugin-simple-icons | Brand icons from simple-icons. |
@pantoken/plugin-logos | Instructure product logos as SVGs, data URIs, and image tokens. |
@pantoken/plugin-prune-custom-props | A PostCSS plugin that drops unused custom properties. |
Tools
Build, docs, and demo infrastructure for the monorepo itself. Most is internal, but the pieces are self-contained, so we document them here and some ship to npm on their own.
| Package | What it does |
|---|---|
@pantoken/aggregate | Generates the unified pantoken package barrel and exports from its dependencies. |
@pantoken/validate-generated | The drift gate: checks every generated stylesheet resolves against the token IR. |
@pantoken/demo | The self-hosted live-demo runner: resolves a @demo spec to an iframe and renders bare HTML/CSS/JS same-origin, token-themed. |
@cssdoc/core (external) | A generic CSS documentation extractor (TSDoc, for CSS): parses doc-comments + the CSS AST into a model the docs emit as the CSS API reference. Lives in its own repo; consumed via a link dependency. |
@pantoken/validate-generated is a run-once script (invoked by pnpm run ready), so it has no API page; the others do.
Dev plugins
Plugins we author for the tools we build with, grouped by host. They're standalone and publishable.
| Package | Plugs into |
|---|---|
@pantoken/typedoc-plugin-demo | TypeDoc: turns a @demo <provider>:<ref> block tag into an embeddable demo fence. |
@pantoken/vite-workspace-orchestrator | Vite: rebuilds upstream workspace packages (and dependents) when their source changes. |