--- url: /conventions/web-components.md --- # `@pantoken/web-components` Shadow-DOM custom elements built over the `@pantoken/components` CSS. A `wrapper(tag, css, render, display)` covers pure-presentational elements; behavioral elements are bespoke classes. ## Runtime graph must stay Node-free This package ships to the browser (the docs client registers it). Anything in the runtime graph is bundled into the client. A **value** import of a postcss-based `@cssdoc/*` package makes rolldown inject a `createRequire`/`node:module` shim into `dist/index.mjs`, which throws `createRequire is not a function` at app init and kills all client JS. Keep `@cssdoc/*` value imports out of `src/` — type-only imports are fine (erased at build); value imports belong in build scripts and tests. ## Shadow CSS is co-located `.css` → `?inline` * Shadow CSS lives in co-located `src/**/*.css` files — the lint, format, and docs source of truth. * Elements import their co-located CSS with `?inline`; Vite+ bundles `@tsdown/css`, which returns the processed stylesheet as a tree-shakeable string for the shadow `` + markup from `render(host)`. `invoker: true` forwards the host's `popovertarget`/`command` to the inner `

Grid List

``` Import `@pantoken/interactions/segmented-control.iife.js` for DOM-ready registration, or call `initSegmentedControl(fieldset, { size: "md", isOverflown: true })` from `@pantoken/interactions` and call `cleanup()` when removing it. The CSS and native radio choices work without JS; overflow arrows need the behavior. The selected item uses the two-layer design shadow from the semantic drop-shadow colors; it is a distinct active-item shadow rather than an existing `--instui-elevation-*` composite. Overflow buttons use the upstream elevation3 component tokens through `--pantoken-segmented-overflow-shadow`. ### Skeleton loading The `skeleton-loader.css` subpath styles one decorative Text, Avatar, or Image shape. Text accepts `-size-xxs` through `-size-xxl`; Avatar and Image are medium-sized. Each optional `.skeleton-row` adds one text line without changing the size. The CSS shimmer stops after three 1.5-second sweeps and stays static when the user prefers reduced motion. It works before JavaScript loads. Place shapes only where query-dependent content will appear, not over server-known navigation, filters, headings, or controls. A skeleton is not a progress meter or an action-busy state. Keep existing content visible during background refreshes; use a spinner or button busy state for actions. The parent application owns loading, loaded, empty, and error markup. Provide one empty status region per page and a separate empty alert in the server HTML, both **outside** the busy content region: ```html

``` Call the parent-level behavior when the request state changes. It updates `aria-busy` and the two pre-existing announcements, but it never replaces content or moves focus: ```ts import { initSkeletonLoading } from "@pantoken/interactions"; const wrapper = document.querySelector(".instui-skeleton-loading")!; const loading = initSkeletonLoading(wrapper.querySelector("[data-skeleton-region]")!, { status: wrapper.querySelector("[data-skeleton-status]")!, error: wrapper.querySelector("[data-skeleton-error]")!, }); loading.setLoading("Loading courses"); // announces after 400ms, unless loading finishes first loading.setLoaded("24 courses"); // swap in the real content separately // For an empty result, use setEmpty("No courses found"); for failure, setError("Couldn't load courses. Retry"). loading.cleanup(); // when the owning region is removed ``` If using the per-component interactions bundle instead of the direct import, dispatch a `pantoken:skeleton-state` event on the `[data-skeleton-region]` element with `detail: { state: "loading" | "loaded" | "empty" | "error", message: string }`. Delay *showing* placeholders by 200–500ms for fast requests; the behavior independently delays the loading announcement by 400ms. On passive page loads, leave focus where it is. Only move focus to a newly loaded result when the user's own action requested it. The status node announces results and empty states; the alert node announces failures. Do not combine `aria-busy`, `role="status"`, and `role="alert"` on one element. Lucide Lab's registry can be loaded lazily, then passed to the synchronous token hook: ```ts import { buildTokens } from "@pantoken/core/build"; import { defaultRegistry, lucideLab } from "@pantoken/plugin-lucide-lab"; const registry = await defaultRegistry(); buildTokens({ theme: "rebrand", plugins: [lucideLab({ registry, names: ["burger", "at-sign-circle"] })], }); ``` A few things that used to be plugins now ship in `@pantoken/components`, since so many components need them out of the box: elevation shadows (`--instui-elevation-*`, in `components.css`), the focus-outline ring (in `base.css` — every focusable gets it when pantoken owns the page), and the Instructure brand fonts (Atkinson Hyperlegible Next: `base.css` applies `--instui-font-family-base`; the opt-in `@pantoken/components/fonts.css` loads the `@font-face` woff2s). ## Theme colors `@pantoken/plugin-custom-theme-colors` emits one `[data-pantoken-color="…"]` block per palette (`navy`, `blue`, `green`, `red`, `orange`, `grey`, `plum`, `violet`, `stone`, `sky`, `honey`, `sea`, `aurora`). Each block points the brand primitives (`--instui-primitive-color-navy-*` and `-blue-*`) at the chosen palette. It also re-derives the brand surfaces that upstream flattened to literal hex, keeping their baked alpha through `color-mix()`. Semantic status colors, explicit blue accents, and elevation shadows stay put. Try it in the [swatch-based theming demo](https://stackblitz.com/edit/vitejs-vite-sg9oy7ln?file=index.html). ```html ``` ### Custom brand color Set `data-pantoken-color="custom"` to rebrand from any hex, such as the primary color a Canvas admin types into the Theme Editor. pantoken derives a full 10–200 `--instui-primitive-color-custom-*` scale from it: 1. **Reference curve.** Each step's target lightness is the average OKLCH lightness of the 13 palettes at that step, with 0 fixed at white and 210 at black. So the custom scale's spacing matches the shipped palettes'. 2. **Anchor.** The input lands on the step whose target lightness is nearest its own, then snaps to that exact lightness. `#cccccc` becomes `custom-40` at `#c9c9c9`: close to the input, but not always identical. "Nearest" means nearest step on the curve, not the closest existing palette color. 3. **Fill.** Every other step keeps the input's hue. Its saturation follows the palettes' average saturation curve relative to the anchor, and is reduced only where a color falls outside sRGB. Only `#rgb` and `#rrggbb` are accepted; anything else throws a `TypeError`, so a hex from a form can't inject CSS. At build time, emit the whole rule with the derived primitives already declared: ```ts import { customColorCss, customThemeColors } from "@pantoken/plugin-custom-theme-colors"; customThemeColors({ custom: "#e62429" }); // as a plugin, alongside the 13 palettes customColorCss("#e62429"); // or the custom rule on its own ``` To pick the color at runtime without shipping the token set, precompute the curve and the remap rule at build time. Then use the dependency-free `/scale` entry in the browser, and set only the 20 derived primitives: ```ts // Build time import { customColorReferenceCurve, customColorRemapCss, } from "@pantoken/plugin-custom-theme-colors"; const curve = customColorReferenceCurve(); // JSON-safe const remapCss = customColorRemapCss(); // ship alongside the palette stylesheet ``` ```ts // Browser import { deriveScale } from "@pantoken/plugin-custom-theme-colors/scale"; const { anchorStep, steps } = deriveScale(input.value, curve); style.textContent = `:root[data-pantoken-color="custom"] { ${[...steps] .map(([step, hex]) => `--instui-primitive-color-custom-custom${step}: ${hex};`) .join(" ")} }`; document.documentElement.dataset.pantokenColor = "custom"; ``` The docs site's theme picker, the Canvas theme editor, and the demo above all work this way. See the [API reference](/api/) for each plugin's exports. --- --- url: /api/bundlers/postcss/src.md --- [pantoken-root](../../../index.md) / postcss # postcss ## Compatibility Target: PostCSS. Minimum host version: `8.0.0`. Tested through `8.5.29`. Newer releases require review. [Full compatibility matrix](../../../../compatibility) Experimental `@pantoken/postcss` — a PostCSS plugin that expands an `@pantoken;` at-rule into the full Instructure token stylesheet (`@property` registrations + declarations). Write `@pantoken;` where you want the tokens defined, and the plugin replaces it at build time. ## Interfaces * [PantokenPostcssOptions](interfaces/PantokenPostcssOptions.md) ## Variables * [pantoken](variables/pantoken.md) ## References ### default Renames and re-exports [pantoken](variables/pantoken.md) --- --- url: /api/plugins/pantoken/primitives/src.md --- [pantoken-root](../../../../index.md) / primitives # primitives Beta Opt-in utility classes for the raw pantoken primitive palette (`--instui-primitive-*`). The semantic utilities in `@pantoken/components` deliberately expose only semantic tokens — a color override there is always a role (`bg-brand`), never a raw swatch. This package is the escape hatch: one class per primitive token for the rare case a developer needs the palette directly. Load it on its own (`@pantoken/plugin-primitives/primitives.css`), separate from the semantic layer. ## Example **Build the primitive stylesheet** ```ts import { primitivesCss } from "@pantoken/plugin-primitives"; import { tokens } from "@pantoken/tokens"; const names = (p: string) => tokens.filter((t) => t.name.startsWith(p)).map((t) => t.name); const css = primitivesCss({ color: names("--instui-primitive-color-"), fontFamily: names("--instui-primitive-font-family-"), fontWeight: names("--instui-primitive-font-weight-"), }); // .instui-bg-primitive-color-white { background: var(--instui-primitive-color-white); } ``` ## Interfaces * [PrimitiveTokenNames](interfaces/PrimitiveTokenNames.md) * [PrimitivesOptions](interfaces/PrimitivesOptions.md) ## Functions * [primitivesCss](functions/primitivesCss.md) ## References ### default Renames and re-exports [primitivesCss](functions/primitivesCss.md) --- --- url: /api/plugins/postcss/props-minify/src.md --- [pantoken-root](../../../../index.md) / props-minify # props-minify Beta `@pantoken/plugin-props-minify` — compose prune, flatten, and mangle transforms for `--instui-*` custom properties via a single [applyMinify](functions/applyMinify.md) utility. Each CSS-emitting pipeline (generate scripts, renderers) uses `applyMinify` for a consistent minification surface without taking a direct PostCSS dependency. **Prune + mangle are only safe for self-contained bundles** where all `var(--instui-*)` references and their definitions live in the same output. For separate-file consumers (`@pantoken/css` + `@pantoken/components` loaded independently), apply `{ flatten: true }` only. **Mangle across file boundaries:** pass the same `Map` instance as `mangle.sharedManifest` to every `applyMinify` call that processes CSS files loaded together. Process the token sheet first (it seeds the manifest), then component sheets. ## Examples **Apply all three transforms to a self-contained bundle** ```ts import { applyMinify } from "@pantoken/plugin-props-minify"; const out = applyMinify(css, { prune: true, flatten: true, mangle: true }); ``` **Flatten only (safe for separate-file consumers)** ```ts import { applyMinify } from "@pantoken/plugin-props-minify"; const out = applyMinify(css, { flatten: true }); ``` **Mangle two files with the same mapping** ```ts import { applyMinify } from "@pantoken/plugin-props-minify"; const manifest = new Map(); const tokenCss = applyMinify(rawTokens, { mangle: { sharedManifest: manifest } }); const componentCss = applyMinify(rawComponents, { mangle: { sharedManifest: manifest } }); ``` ## Interfaces * [FlattenPropertyOptions](interfaces/FlattenPropertyOptions.md) * [MangleCustomPropsOptions](interfaces/MangleCustomPropsOptions.md) * [PropsMinifyOptions](interfaces/PropsMinifyOptions.md) ## Type Aliases * [MangleMethod](type-aliases/MangleMethod.md) ## Variables * [flattenProperty](variables/flattenProperty.md) * [mangleCustomProps](variables/mangleCustomProps.md) * [pruneCustomProps](variables/pruneCustomProps.md) ## Functions * [applyMinify](functions/applyMinify.md) --- --- url: /api/plugins/postcss/prune-custom-props/src.md --- [pantoken-root](../../../../index.md) / prune-custom-props # prune-custom-props Beta `@pantoken/plugin-prune-custom-props` — tree-shake unused custom properties from a composed stylesheet. pantoken's `@pantoken/css` emits the whole `--instui-*` token set (≈1,800 icon data-URIs included). A renderer that builds on that layer but only styles a slice of the system would otherwise ship the entire set — so any such renderer wants this. Starting from the `var()` references in real (non-custom-property) declarations, it transitively keeps only the custom properties actually reachable, and drops the matching unused `@property` registrations. It's a standalone PostCSS plugin (run it in your own PostCSS pipeline). The factory returns a plain plugin object, so importing this module pulls in no runtime dependency — `postcss` is only a type. ## Example ```ts import postcss from "postcss"; import { pruneCustomProps } from "@pantoken/plugin-prune-custom-props"; const out = postcss([pruneCustomProps()]).process(css, { from: undefined }).css; ``` ## Variables * [pruneCustomProps](variables/pruneCustomProps.md) ## References ### default Renames and re-exports [pruneCustomProps](variables/pruneCustomProps.md) --- --- url: /api/renderers/react/src.md --- [pantoken-root](../../../index.md) / react # react ## Compatibility Target: React. Current format: `SSR-rendered Icon custom element and token fallback`. Minimum host version: `19.3.0`. Tested through `19.3.0`. Newer releases require review. [Full compatibility matrix](../../../../compatibility) Experimental `@pantoken/react` — thin React helpers over `@pantoken/web-components` and the token CSS. * `` renders the `` custom element (React 19 passes props to custom elements). * `useToken` reads a resolved `--instui-*` value at runtime (SSR-safe: returns the fallback on the server). * `` registers the elements and is where an app can inject the stylesheet. ## Interfaces * [IconProps](interfaces/IconProps.md) * [TokenProviderProps](interfaces/TokenProviderProps.md) ## Functions * [readToken](functions/readToken.md) * [useToken](functions/useToken.md) * [Icon](functions/Icon.md) * [TokenProvider](functions/TokenProvider.md) ## References ### register Re-exports [register](../../angular/src/functions/register.md) *** ### registerLocalized Re-exports [registerLocalized](../../svelte/src/functions/registerLocalized.md) --- --- url: /api/renderers/react-markdown/src.md --- [pantoken-root](../../../index.md) / react-markdown # react-markdown ## Compatibility Target: react-markdown. Current format: `SSR-rendered InstUI heading, icon, and color swatch with React 19.3.0`. Minimum host version: `10.1.0`. Tested through `10.1.0`. Newer releases require review. [Full compatibility matrix](../../../../compatibility) Beta `@pantoken/react-markdown` — render Markdown with Instructure UI components and pantoken icons. The default entry renders GitHub-Flavored Markdown, inline `:icon:` tokens (via `@pantoken/rehype` + `@pantoken/icons`), color-code swatches, and GitHub-style alerts. The MDX provider lives at `@pantoken/react-markdown/mdx`. ## Interfaces * [InstuiMarkdownRenderOptions](interfaces/InstuiMarkdownRenderOptions.md) * [InstuiMarkdownProps](interfaces/InstuiMarkdownProps.md) ## Type Aliases * [AlertMarker](type-aliases/AlertMarker.md) ## Variables * [instuiMarkdownComponents](variables/instuiMarkdownComponents.md) ## Functions * [createInstuiMarkdownComponents](functions/createInstuiMarkdownComponents.md) * [buildIconResolver](functions/buildIconResolver.md) * [parseAlertMarker](functions/parseAlertMarker.md) * [isColorValue](functions/isColorValue.md) * [rehypeColorCodes](functions/rehypeColorCodes.md) * [rehypeGithubAlerts](functions/rehypeGithubAlerts.md) * [InstuiMarkdown](functions/InstuiMarkdown.md) --- --- url: /api/renderers/react-native/src.md --- [pantoken-root](../../../index.md) / react-native # react-native ## Compatibility Target: React Native. Host compatibility has not yet been verified. [Full compatibility matrix](../../../../compatibility) Experimental `@pantoken/react-native` — Instructure design tokens as React Native `StyleSheet`-friendly objects. React Native has no CSS variables, so tokens are fully resolved to concrete values: colours stay hex strings, dimensions become numbers (dp), and icons are excluded. ## Type Aliases * [RNTokenValue](type-aliases/RNTokenValue.md) ## Variables * [light](variables/light.md) * [dark](variables/dark.md) ## Functions * [tokensForScheme](functions/tokensForScheme.md) --- --- url: /r.md --- --- --- url: /api/renderers/rehype/src.md --- [pantoken-root](../../../index.md) / rehype # rehype ## Compatibility Target: rehype. Current format: `HAST + raw SVG`. Minimum host version: `13.0.0`. Tested through `13.0.2`. Newer releases require review. [Full compatibility matrix](../../../../compatibility) Experimental `@pantoken/rehype` — render `:icon:` codes as inline SVG. The plugin walks hast text nodes and replaces `:code:` tokens with an inline SVG element, resolving each code through a chain: any explicit `resolve`, then the built-in `@pantoken/icons` set, then plugin `rehype` resolvers. It ports `rehype-instui-markdown` onto the shared icon manifest. ## Interfaces * [RehypeOptions](interfaces/RehypeOptions.md) ## Functions * [rehypePantokenIcons](functions/rehypePantokenIcons.md) ## References ### default Renames and re-exports [rehypePantokenIcons](functions/rehypePantokenIcons.md) --- --- url: /api/platforms/rust/src.md --- [pantoken-root](../../../index.md) / rust # rust ## Compatibility Target: Rust GUI frameworks. Current format: `Generated egui Color32 accessors and iced_core Color constants compile with the Rust toolchain`. Minimum host version: `1.95.0`. Tested through `1.95.0`. Newer releases require review. [Full compatibility matrix](../../../../compatibility) Experimental `@pantoken/rust` — emit Instructure design tokens as Rust constants for the two mainstream native Rust GUIs: **egui** (`Color32`) and **iced** (`Color`). Colours become the framework's colour type; dimensions become `f32` (px). Web-rendered Rust UIs (Tauri, Dioxus-web, Leptos, Yew) should use `@pantoken/css` instead. ## Interfaces * [RustOptions](interfaces/RustOptions.md) ## Type Aliases * [RustFormat](type-aliases/RustFormat.md) ## Functions * [toRust](functions/toRust.md) * [generateRust](functions/generateRust.md) ## References ### default Renames and re-exports [generateRust](functions/generateRust.md) --- --- url: /public/create-pantoken-app.md description: >- Scaffold a maintained application, or add Instructure design tokens and icons (pantoken) to an existing project with a package manager. Use for web, framework, native, and CMS projects that need dependencies and builds. Do not use for a standalone HTML mockup or sendable email; use create-pantoken-mockup. --- # Scaffold pantoken Set up [pantoken](https://www.npmjs.com/package/@pantoken/pantoken) — a design tokens and icons library for Instructure UI — in the current project. Work through these steps. If the user wants one standalone HTML file, a quick browser prototype, a customer email mockup, or sendable email HTML, stop and use the `create-pantoken-mockup` skill instead. ## About pantoken pantoken is built and used internally at Instructure, then open-sourced; Instructure doesn't provide official warranty or support for it as a product, which is why it's published from [`thedannywahl`](https://github.com/thedannywahl/pantoken) on GitHub and npm ([`@pantoken`](https://www.npmjs.com/org/pantoken)) rather than the `instructure` org/scope — it may move there later. Check either link yourself before proceeding if you want to verify this. ## 1. New project or existing repo? * **Empty directory, or no repo yet** — scaffold a starter with the CLI, then stop (steps 2-3 are already done for you by the template). The CLI has its own interactive prompts, but those only work at a real terminal, so ask the user the questions below the same way you normally would, then pass their answers as flags (plus `--yes`) so the command runs without needing its own prompts: 1. **Platform** — ask the user, offering the supported list: `components` (plain HTML/CSS; `html` is an accepted alias), `react`, `vue`, `svelte`, `web-components`, `angular`, `canvas-theme-editor` (Canvas LMS Theme Editor uploads + an RCE content page template starter; `theme-editor` is an accepted alias). Skip asking only if it's unambiguous from the conversation — route requests like "use pantoken with my Canvas theme editor" or "build RCE page templates" straight to `canvas-theme-editor`. More platforms land over time; if the desired one isn't yet supported by the scaffold CLI, skip the CLI entirely and proceed directly to step 2 to manually install and wire pantoken instead. For `canvas-theme-editor`, after scaffolding, tell the user to: (1) upload the generated `theme.css`/`theme.js` under Canvas's Theme Editor → Advanced, and (2) run `npm run dev` to author RCE page templates in the local TinyMCE editor, using the **Layouts** toolbar button to start from a bundled starter layout before copying the result into Canvas. If the CLI fails for any reason (non-zero exit, unsupported platform, network error), fall through to step 2 and treat the project as an existing repo, preserving any files already written by the CLI. 2. **Package manager** — if a lockfile already exists in the target directory, use it (see the detection table in step 2); a genuinely empty directory has no lockfile to detect from, so ask the user (npm/pnpm/yarn/bun/deno). 3. **Directory** — ask where to scaffold (default `.` for the current directory; confirm before defaulting to `.` if you're not sure that's what they want). Then run the fully-resolved command, substituting the chosen package manager's "run a package's CLI" form from step 2's table for `npx`, and passing `--yes` so the CLI never falls back to its own interactive prompts: ```sh npx @pantoken/ai scaffold --dir --yes ``` This writes a minimal starter (`package.json`, entry file(s), README) for the chosen platform with pantoken already installed and wired in, and also installs pantoken's agent assets (AGENTS.md, editor/agent rules, skills) into the same directory. If you only want the starter project without the agent assets, run `npx create-pantoken-app --dir --yes` (or `npx @pantoken/scaffold --dir --yes`) directly instead — substituting the chosen package manager's launcher for `npx` on either command. Run `npm install` (or the chosen package manager's install) in the target directory afterward. * **Existing repo you want to add pantoken to** — continue to step 2. ## 2. Determine the target Ask the user what kind of project they're building, unless it's unambiguous from the repo. Offer: * **Native web (plain HTML/CSS, no framework) — default** → `@pantoken/components` * A JS framework (React, Vue, Svelte, Angular, React Native, Next.js) * A build tool only, styling from raw tokens (Tailwind, PostCSS, Vite, Webpack, or plain `@pantoken/css`) * A native/CMS ecosystem (Swift, Android, Compose, Flutter, Rust, WordPress, Drupal, Vanilla, Jekyll, Hugo) If the user doesn't answer or has no preference, default to native web (`@pantoken/components`). Corroborate with the repo when possible, and prefer the user's answer if it conflicts with detection: * `package.json` dependencies → web framework (react, vue, svelte, @angular/core, react-native, next, vite, tailwindcss, webpack, postcss). * If no `package.json` is found and the user wants a web project, run `npm init -y` first, then proceed with the native web default (or the chosen framework) — this applies even if the user describes the project as "existing"; trust their named framework and proceed rather than asking for clarification. * Native project files → iOS (`Package.swift`, `*.xcodeproj`), Android (`build.gradle`), Flutter (`pubspec.yaml`), WordPress/Drupal/Vanilla theme dirs. Also detect the package manager from the lockfile present in the repo, and use its equivalent command for every install/run step below instead of assuming npm: | Lockfile found | Package manager | Add package(s) | Run a package's CLI | | -------------------------- | --------------- | -------------------- | -------------------- | | `pnpm-lock.yaml` | pnpm | `pnpm add ` | `pnpm dlx ` | | `yarn.lock` | yarn | `yarn add ` | `yarn dlx ` | | `bun.lock`/`bun.lockb` | bun | `bun add ` | `bunx ` | | `deno.lock` | deno | `deno add npm:` | `deno run npm:` | | `package-lock.json` / none | npm | `npm i ` | `npx ` | If no lockfile exists yet, default to npm (or whatever the user prefers). ## 3. Install If `components.json` exists or the user explicitly requests shadcn, use the indexed registry to discover and install Pantoken CSS styles: ```sh npx shadcn@latest search @pantoken --query npx shadcn@latest view @pantoken/ npx shadcn@latest add @pantoken/ ``` Registry items provide CSS and usage metadata, not React components. Use `@instructure/ui-*` when the user needs full React components. Continue with direct package installation for non-shadcn projects. Use the package manager detected in step 2 for every command below (the examples use `npm i`; substitute `pnpm add`, `yarn add`, or `bun add` as appropriate). Follow this decision checklist in order, then run one install command with all collected packages: 1. **Is it native web** (plain HTML/CSS, no framework and no build tool detected)? Install only `@pantoken/components` — it ships the token CSS baked in, so no separate `@pantoken/css` install is needed — and stop: ```sh npm i @pantoken/components ``` 2. **Is it Next.js?** Collect `@pantoken/css` plus `@pantoken/next` (do NOT also add `@pantoken/react` — `@pantoken/next` includes the React integration), then add any matching tool packages (Tailwind, Vite, etc.) from the table below. 3. **Otherwise**, collect `@pantoken/css` first, then add the framework package and every matching tool row's package from the table. Framework rows (React, Vue, etc.) and tool rows (Tailwind, PostCSS, Vite, Webpack) are all additive — collect every matching row's package alongside `@pantoken/css`. 4. If the user wants to use `` in any web framework project (React, Vue, Vite, etc.), also collect `@pantoken/web-components` — regardless of which framework rows already matched. For example: * A Next.js project also using Tailwind installs `@pantoken/css @pantoken/next @pantoken/tailwind`. * A React project also using Vite installs `@pantoken/css @pantoken/react @pantoken/vite`. | Detected | Install | | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Native web (default) | `@pantoken/components` | | React | `@pantoken/react`; if the user also wants full InstUI components (buttons, modals, etc.), additionally install the specific `@instructure/ui-*` packages needed, e.g. `@instructure/ui-buttons @instructure/ui-modal` (see for the full package list) | | Vue / Svelte / Angular | `@pantoken/vue` / `@pantoken/svelte` / `@pantoken/angular` + `@pantoken/web-components` (always install `@pantoken/web-components` alongside the framework package here — it's required for icon support in these three, not optional) | | React Native | `@pantoken/react-native` | | Next.js | `@pantoken/next` — Next.js projects do NOT also need `@pantoken/react`; `@pantoken/next` includes the React integration. Do not install both. | | Vite | `@pantoken/vite` | | Tailwind | `@pantoken/tailwind` | | PostCSS / Webpack | `@pantoken/postcss` / `@pantoken/webpack` | | shadcn / Bootstrap | `@pantoken/shadcn` / `@pantoken/bootstrap` | | markdown-it / css-in-js | `@pantoken/markdown-it` / `@pantoken/css-in-js` | | Icons anywhere | `@pantoken/web-components` — for React, Next.js, React Native, and tool-only setups, only add this if the user explicitly wants icon support (`` elements); for Vue, Svelte, and Angular it's always required (see that row) | For native / CMS targets, no install — run the CLI (step 5). If the project contains both a `package.json` and native/CMS files, treat it as a web project and follow the web install steps above; only skip to step 5 if there is no `package.json` and no JS framework detected. ## 4. Wire it up * Native web (default): import `base.css` + `components.css` from `@pantoken/components` (e.g. `import "@pantoken/components/base.css"; import "@pantoken/components/components.css";`), then apply classes like `class="instui-button"` to markup. * Other web entry: add `import "@pantoken/css/inject";` (or `@import "@pantoken/css/style.css";`). * Next: wrap the config with `withPantoken(...)` and import the CSS in the root layout. * Vite: add the `pantoken()` plugin. Tailwind: add `pantokenPreset()` to `presets`. * Web components: `import "@pantoken/web-components";` then use ``. * Verify the app renders and `getComputedStyle(document.documentElement).getPropertyValue('--instui-color-background-brand')` is non-empty. If the property is empty, check that the token CSS import (`@pantoken/components/base.css` or `@pantoken/css/inject`) appears before any component imports in the entry file, and that the dev server was restarted after install. Report the specific failure to the user with corrective steps. ## 5. Native / other ecosystems ```sh npx @pantoken/cli generate --out [--icons a,b] [--theme rebrand] ``` Substitute `pnpm dlx`, `yarn dlx`, `bunx`, or `deno run npm:` for `npx` per the package manager detected in step 2 (or from the choice made in step 1 if you're still inside the new-project flow). ## Conventions to follow afterward * Style with `var(--instui-*)` references, not hard-coded colours, so light/dark and high-contrast theming keeps working. * Resolve real token names from `@pantoken/tokens`; never invent them. --- --- url: /api/formats/scope/src.md --- [pantoken-root](../../../index.md) / scope # scope Beta `@pantoken/scope` — run several pantoken themes and color schemes in one document. Pantoken's CSS keys themes to a `data-pantoken-theme` attribute that matches *any* element, not just `:root`, so theming is a property of a subtree rather than of the page. This package is the runtime half of that contract: * [resolveScope](functions/resolveScope.md) walks up from an element to find the theme, scheme, and color in effect — the auto-detection half. * [createScope](functions/createScope.md) declares a scope explicitly, with its own persisted state and its own frame message channel — the manual-configuration half that stops two instances colliding. * [ensureProperties](functions/ensureProperties.md) injects the document-global `@property` registrations once, however many instances ask for them. Node-free by design: this ships to the browser. ## Interfaces * [ScopeConfig](interfaces/ScopeConfig.md) * [ResolvedScope](interfaces/ResolvedScope.md) * [ScopeMessage](interfaces/ScopeMessage.md) * [CreateScopeOptions](interfaces/CreateScopeOptions.md) * [PantokenScope](interfaces/PantokenScope.md) * [ConnectScopeOptions](interfaces/ConnectScopeOptions.md) ## Type Aliases * [Scheme](type-aliases/Scheme.md) ## Variables * [DEFAULT_INSTANCE](variables/DEFAULT_INSTANCE.md) * [INSTANCE_ATTR](variables/INSTANCE_ATTR.md) * [SCOPE_ATTRS](variables/SCOPE_ATTRS.md) ## Functions * [ensureProperties](functions/ensureProperties.md) * [hasProperties](functions/hasProperties.md) * [observeScope](functions/observeScope.md) * [resolveScope](functions/resolveScope.md) * [resolveInstance](functions/resolveInstance.md) * [resolveScheme](functions/resolveScheme.md) * [getScope](functions/getScope.md) * [frameTargetOrigin](functions/frameTargetOrigin.md) * [createScope](functions/createScope.md) * [connectScope](functions/connectScope.md) * [isScheme](functions/isScheme.md) ## References ### BOUNDARY_ATTR Re-exports [BOUNDARY_ATTR](../../css/src/variables/BOUNDARY_ATTR.md) *** ### BOUNDARY_CLASS Re-exports [BOUNDARY_CLASS](../../css/src/variables/BOUNDARY_CLASS.md) *** ### COLOR_ATTR Re-exports [COLOR_ATTR](../../css/src/variables/COLOR_ATTR.md) *** ### SCHEME_ATTR Re-exports [SCHEME_ATTR](../../css/src/variables/SCHEME_ATTR.md) *** ### THEME_ATTR Re-exports [THEME_ATTR](../../css/src/variables/THEME_ATTR.md) *** ### colorClass Re-exports [colorClass](../../css/src/variables/colorClass.md) *** ### schemeClass Re-exports [schemeClass](../../css/src/variables/schemeClass.md) *** ### themeClass Re-exports [themeClass](../../css/src/variables/themeClass.md) --- --- url: /conventions/scoping.md --- # Scoping: several pantokens on one page Pantoken used to assume it owned the document. Themes were `:root[data-pantoken-theme="…"]`, `@property` registrations were global, `color-scheme` was set on ``, storage keys were unnamespaced, and theme broadcasts swept every iframe on the page. Two pantoken instances on one page — the docs site and the canvas-theme-editor preview, say — therefore fought, and whichever wrote last won. Theming is now a property of a **subtree**, not of the page. ## The contract Five attributes, defined once in `packages/utils/src/scope.ts` and exposed at the dependency-free `@pantoken/utils/scope` entry. `@pantoken/css` selects on them; `@pantoken/scope` writes them. | Attribute | Class twin | Meaning | | ------------------------ | -------------------------- | ---------------------------------------------------------- | | `data-pantoken-theme` | `.--pantoken-theme-` | Roots a theme scope. Matches **any** element, not `:root`. | | `data-pantoken-scheme` | `.--pantoken-scheme-` | Pins the subtree to `light` or `dark`. | | `data-pantoken-color` | `.--pantoken-color-` | Selects a custom brand color. | | `data-pantoken-boundary` | `.--pantoken-boundary` | Ancestor resolution stops here. | | `data-pantoken-instance` | — | Names the owning instance. | Every selector is emitted in both forms, because some hosts sanitize `data-*` out of authored content but leave `class` alone — Canvas RCE being the one that forced it. The class twin follows the repo's global-modifier convention and is repeated three times for (0,3,0) specificity, so a scope class outranks any component-modifier compound that sets tokens. The attribute wins when both sit on one element. `resolveScope` reads both, so the runtime and the stylesheet never disagree about what is in effect. Declarations land in four cascade layers, lowest first: ```css @layer pantoken.base, pantoken.theme, pantoken.scheme, pantoken.color; ``` The layers only matter when several attributes sit on the *same* element — scheme must beat theme there. Between different elements, plain inheritance decides: the nearest ancestor that declares a token wins for its subtree. ## The sheets Load these two instead of a single `style.*.css` when more than one theme must be active: * `@pantoken/css/properties.css` — the `@property` registrations. **Load once per document.** Registrations are document-global: a second copy silently redefines every token's initial value for the whole page. `ensureProperties()` makes a repeat call a no-op. * `@pantoken/css/scope.css` — a shared base block plus one complete token block per theme. Includes the scheme pins below. * `@pantoken/css/schemes.css` — just the scheme pins (343 bytes), for layering onto a sheet that didn't bundle them. A single-theme page should keep using `style.lean.css`; it is much smaller. ### Why theme blocks are complete, not diffs The docs sheet used to emit non-default themes as *only the tokens that differ* from rebrand. That is correct when exactly one theme block can ever apply. Under subtree scoping it is wrong: a `canvas` scope nested inside a `canvasHighContrast` scope would inherit high-contrast values for every token the canvas block omitted. So `multiScopeCss` partitions tokens by whether they actually vary across the emitted theme set. Invariant tokens go in the shared base once. **Varying tokens are repeated in full in every theme block.** A test asserts the blocks declare identical token sets — that parity is the nesting-safety invariant, and breaking it reintroduces the bug silently. ## Color schemes `color-scheme` is an ordinary inherited CSS property, so one rule keyed to the scope selector resolves `light-dark()` for everything below it: ```css @layer pantoken.scheme { [data-pantoken-scheme="dark"], :where(*).--pantoken-scheme-dark... { color-scheme: dark; } } ``` That is the entire mechanism, and it is why a light subtree and a dark subtree can coexist. Nothing needs an inline style, so a host that can only add a class or an attribute still gets per-subtree schemes. An earlier version of this sheet re-declared every themed token flattened to one branch — 87 kb to do what the browser already does from a single declaration. If you find yourself generating a per-token override table for a scheme, that's the mistake. The behaviour this rests on — that `light-dark()` inside a custom property resolves against the *consuming descendant's* inherited `color-scheme`, not the element the token was declared on — is browser-verified by `formats/css/tests/manual/scope-test.html`. Re-run that page after any change to the scoped emitters; unit tests can only check the emitted strings, not the cascade. ## Sizing Measured over the three shipped themes, lean (no icons): | | bytes | gzip | | ------------------------------------------------------- | ----: | ---: | | `style.lean.css` (one theme) | 285 K | 25 K | | `properties.lean.css` + `scope.lean.css` (three themes) | 572 K | 47 K | | `schemes.css` | 343 | 143 | Of 2,921 tokens, only **786 vary across themes** — the other 73% are emitted once, in the shared base block and the `@property` registrations. The repetition that remains is irreducible: custom properties resolve by inheritance, not by lookup, so values that differ per subtree must physically exist on each subtree's root. Emitting complete theme blocks rather than diffs is close to free, and the reason is worth knowing: `canvas` already differs from `rebrand` in 764 of those 786 tokens, and `canvasHighContrast` in 785. The diff *is* the full set. Completeness buys nesting safety for 1–3%. ## The runtime ```ts import { createScope, resolveScope } from "@pantoken/scope"; // Manual configuration — the way to avoid a collision in the first place. createScope(appEl, { instanceId: "app", theme: "rebrand", scheme: "dark" }); createScope(previewEl, { instanceId: "preview", theme: "canvas", scheme: "light", boundary: true, // nothing outside can theme what is inside }); // Auto-detection — what is in effect here? resolveScope(someDescendant); // { theme, scheme, color, instanceId, element, bounded } ``` Each field resolves independently, so a subtree can override the scheme while still inheriting the theme. Resolution reads the boundary element's own attributes and then stops. The registry is keyed per **document**, so an iframe gets its own. Storage keys are `pantoken::`. Frames opt in with `scope.attachFrame(iframe)` rather than being found by a document-wide sweep, and messages carry `instanceId` so a receiver can reject another instance's. ## Rules * Never read `document.documentElement` to decide what theme or scheme applies. Use `resolveScope` / `resolveScheme` from the element you actually care about. That global read is what desynchronises two instances. * Never write a bare `pantoken-theme` storage key. Namespace it by instance. * Never `querySelectorAll` the whole document for frames to broadcast to. Scope the query to your own scope element and skip frames owned by another instance. * Don't run `applyMinify(css, { flatten: true })` over a scoped sheet. Flattening turns `@property` into **unlayered** `:root` declarations, which outrank `@layer pantoken.theme` and break scoping. * Use a hard boundary (`boundary: true`, a shadow root, or an iframe) when a subtree must be immune to its surroundings rather than merely override them. ## Instances in this repo | Instance | Owner | | ----------------------------- | -------------------------------------------- | | `docs` | the VitePress site (`docs/.vitepress/theme`) | | `canvas-theme-editor` | the scaffold app's chrome | | `canvas-theme-editor-preview` | its preview iframe (a boundary) | --- --- url: /api/formats/scss/src.md --- [pantoken-root](../../../index.md) / scss # scss Experimental `@pantoken/scss` — Instructure design tokens as SCSS variables. [toScss](functions/toScss.md) converts any IR; [scss](variables/scss.md) is the ready-made `rebrand` variable set. A static file is published at `@pantoken/scss/tokens.scss`. ## Interfaces * [ToScssOptions](interfaces/ToScssOptions.md) ## Variables * [scss](variables/scss.md) ## Functions * [toScss](functions/toScss.md) ## References ### Mode Re-exports [Mode](../../../packages/core/src/type-aliases/Mode.md) *** ### default Renames and re-exports [scss](variables/scss.md) --- --- url: /api/renderers/shadcn/src.md --- [pantoken-root](../../../index.md) / shadcn # shadcn ## Compatibility Target: shadcn/ui CSS variables. Current format: `Tailwind 4.3.3 compiles the Pantoken primary theme alias`. Minimum host version: `4.3.3`. Tested through `4.3.3`. Newer releases require review. [Full compatibility matrix](../../../../compatibility) Experimental `@pantoken/shadcn` — theme shadcn/ui with Instructure tokens. [toShadcnCss](functions/toShadcnCss.md) emits a `:root` block pointing shadcn's CSS variables at `var(--instui-*)`. Drop it in alongside `@pantoken/css` (which defines the custom properties) and shadcn components adopt the Instructure look. Icons align for free — shadcn and Instructure both use Lucide. ## Interfaces * [ToShadcnCssOptions](interfaces/ToShadcnCssOptions.md) ## Variables * [shadcnCss](variables/shadcnCss.md) * [shadcnTailwindV4Css](variables/shadcnTailwindV4Css.md) * [SHADCN_TO_INSTUI](variables/SHADCN_TO_INSTUI.md) ## Functions * [toShadcnCss](functions/toShadcnCss.md) * [toShadcnTailwindV4Css](functions/toShadcnTailwindV4Css.md) ## References ### default Renames and re-exports [shadcnCss](variables/shadcnCss.md) --- --- url: /api/plugins/pantoken/simple-icons/src.md --- [pantoken-root](../../../../index.md) / simple-icons # simple-icons Beta `@pantoken/plugin-simple-icons` — bring Simple Icons brand glyphs into pantoken. The plugin defines a `tokens` hook (emit selected brand glyphs as `` tokens, so they flow to CSS and native too) *and* a `rehype` hook (resolve `:brand:` codes at render). Same plugin, either layer — the generalized form of the `mcp-stack/portal` icon factory. ## Interfaces * [SimpleIcon](interfaces/SimpleIcon.md) * [SimpleIconsOptions](interfaces/SimpleIconsOptions.md) ## Type Aliases * [SimpleIconsRegistry](type-aliases/SimpleIconsRegistry.md) ## Functions * [toExportName](functions/toExportName.md) * [defaultRegistry](functions/defaultRegistry.md) * [simpleIcons](functions/simpleIcons.md) ## References ### default Renames and re-exports [simpleIcons](functions/simpleIcons.md) --- --- url: /api/plugins/pantoken/stacking/src.md --- [pantoken-root](../../../../index.md) / stacking # stacking Beta `@pantoken/plugin-stacking` — named z-index depths. InstUI's `View` exposes a stacking scale (`deepest`, `below`, `above`, `topmost`) so layers stack predictably instead of by hand-tuned magic numbers. This plugin emits `--instui-stacking-` tokens, resolved to concrete z-index values from the shipped `--instui-component-view-stacking-*` tokens, for consumers using the lower-level `@pantoken/css`/`@pantoken/tokens` pipeline directly. The matching `.instui-stack-` utility classes now live in `@pantoken/components`' own `stacking` utility. ## Example ```ts import { buildTokens } from "@pantoken/core/build"; import { stacking } from "@pantoken/plugin-stacking"; const tokens = buildTokens({ theme: "rebrand", plugins: [stacking()] }); // → includes --instui-stacking-topmost: … ``` ## Interfaces * [StackingOptions](interfaces/StackingOptions.md) ## Variables * [STACKING_LEVELS](variables/STACKING_LEVELS.md) ## Functions * [stacking](functions/stacking.md) ## References ### default Renames and re-exports [stacking](functions/stacking.md) --- --- url: /api/renderers/storybook/src.md --- [pantoken-root](../../../index.md) / storybook # storybook ## Compatibility Target: Storybook theming. Current format: `Storybook ThemeVars constructor accepts light and dark Pantoken themes`. Minimum host version: `8.6.14`. Tested through `8.6.14`. Newer releases require review. [Full compatibility matrix](../../../../compatibility) Experimental `@pantoken/storybook` — a Storybook theme built from Instructure tokens. [pantokenStorybookTheme](functions/pantokenStorybookTheme.md) returns a plain `ThemeVars`-shaped object (so `@storybook/theming` stays an optional peer) with colours resolved concretely from the IR. Pass it to Storybook's `manager`/`preview` theme. ## Type Aliases * [StorybookTheme](type-aliases/StorybookTheme.md) ## Functions * [pantokenStorybookTheme](functions/pantokenStorybookTheme.md) ## References ### default Renames and re-exports [pantokenStorybookTheme](functions/pantokenStorybookTheme.md) --- --- url: /api/formats/stylus/src.md --- [pantoken-root](../../../index.md) / stylus # stylus Experimental `@pantoken/stylus` — Instructure design tokens as Stylus variables. [toStylus](functions/toStylus.md) converts any IR; [stylus](variables/stylus.md) is the ready-made `rebrand` variable set. A static file is published at `@pantoken/stylus/tokens.styl`. ## Interfaces * [ToStylusOptions](interfaces/ToStylusOptions.md) ## Variables * [stylus](variables/stylus.md) ## Functions * [toStylus](functions/toStylus.md) ## References ### Mode Re-exports [Mode](../../../packages/core/src/type-aliases/Mode.md) *** ### default Renames and re-exports [stylus](variables/stylus.md) --- --- url: /api/renderers/svelte/src.md --- [pantoken-root](../../../index.md) / svelte # svelte ## Compatibility Target: Svelte. Current format: `Icon action component compiles and SSR renders on Svelte 4 and 5`. Minimum host version: `4.2.20`. Tested through `5.57.2`. Newer releases require review. [Full compatibility matrix](../../../../compatibility) Experimental `@pantoken/svelte` — Svelte helpers over `@pantoken/web-components`. `icon` is a Svelte action that renders an Instructure glyph into an element. `readToken` reads a resolved `--instui-*` value (SSR-safe). The custom elements also work directly once `register()` has run. ## Interfaces * [ActionResult](interfaces/ActionResult.md) ## Functions * [readToken](functions/readToken.md) * [icon](functions/icon.md) * [registerLocalized](functions/registerLocalized.md) ## References ### register Re-exports [register](../../angular/src/functions/register.md) --- --- url: /api/design/swatches/src.md --- [pantoken-root](../../../index.md) / swatches # swatches Experimental `@pantoken/swatches` — export Instructure colours as designer swatch palettes. Swatches are a flat reduction of the tokens to named colours, delivered *directly to a designer* to import into their tool. This is not an interchange format (use `@pantoken/dtcg` or `@pantoken/figma` for that) — it's a terminal palette file: Adobe ASE, GIMP `.gpl`, or Sketch `.sketchpalette`. ## Interfaces * [ToGplOptions](interfaces/ToGplOptions.md) * [Swatch](interfaces/Swatch.md) * [Rgb](interfaces/Rgb.md) * [SketchPalette](interfaces/SketchPalette.md) * [ToSvgOptions](interfaces/ToSvgOptions.md) ## Type Aliases * [Mode](type-aliases/Mode.md) ## Variables * [swatches](variables/swatches.md) ## Functions * [toAse](functions/toAse.md) * [toGpl](functions/toGpl.md) * [hexToRgb](functions/hexToRgb.md) * [toSwatches](functions/toSwatches.md) * [toSketchPalette](functions/toSketchPalette.md) * [toSvg](functions/toSvg.md) --- --- url: /api/platforms/swift/src.md --- [pantoken-root](../../../index.md) / swift # swift ## Compatibility Target: Swift iOS. Current format: `UIKit SwiftPM module, runtime token check, and compiled Icons.xcassets`. Tested environment: `Xcode 27.0 (27A266a), Swift 6.4, iOS Simulator SDK/runtime 27.0, iPhone 18 Pro, arm64 iOS 15 deployment target`. Runtime tested only on iOS Simulator 27.0; this does not establish an iOS 15 runtime floor. No watchOS or tvOS claim. [Full compatibility matrix](../../../../compatibility) Experimental `@pantoken/swift` — emit Instructure design tokens as Swift via Style Dictionary. This is pantoken's native proof: it flattens the IR to concrete, single-mode values (`@pantoken/core`'s `toStyleDictionary`), keeps the natively-typed tokens (colours, dimensions, numbers), and hands them to `@pantoken/sd-config`. Swapping `platform` to `flutter`/`compose` reuses the same path. The generated Swift uses UIKit and targets iOS. `mise run verify:swift:syntax` only parses its source; `mise run verify:swift:host` needs full Xcode and the iOS Simulator SDK to type-check it. ## Interfaces * [GenerateSwiftOptions](interfaces/GenerateSwiftOptions.md) ## Functions * [toSwift](functions/toSwift.md) * [generateSwift](functions/generateSwift.md) ## References ### default Renames and re-exports [generateSwift](functions/generateSwift.md) --- --- url: /api/bundlers/tailwind/src.md --- [pantoken-root](../../../index.md) / tailwind # tailwind ## Compatibility Target: Tailwind CSS. Minimum host version: `4.0.17`. Tested through `4.3.3`. Newer releases require review. [Full compatibility matrix](../../../../compatibility) Experimental `@pantoken/tailwind` — a Tailwind CSS preset that maps Instructure design tokens into the theme. Every token is exposed as a `var(--instui-*)` reference (not a concrete value), so Tailwind utilities like `bg-background-base` theme through the same CSS custom properties that `@pantoken/css` emits — light/dark and high-contrast all keep working. ## Interfaces * [TailwindPreset](interfaces/TailwindPreset.md) * [PantokenPresetOptions](interfaces/PantokenPresetOptions.md) ## Functions * [pantokenPreset](functions/pantokenPreset.md) ## References ### default Renames and re-exports [pantokenPreset](functions/pantokenPreset.md) --- --- url: /guide/cli.md --- # The pantoken CLI `@pantoken/cli` provides `pantoken generate `, which writes token source into a target repo, and `pantoken add `, a convenience wrapper around the shadcn registry. Reach for `generate` when a platform needs generated code rather than a runtime dependency — native apps, CMS themes, and static-site generators. ```sh npx pantoken generate --out [--theme ] [--icons a,b,c] ``` For a project configured with shadcn, this delegates to `shadcn add @pantoken/` and registers the indexed namespace when necessary: ```sh npx pantoken add button ``` Use the official shadcn `list`, `search`, and `view` commands for discovery. Registry items install Pantoken CSS styles and metadata, not React components. ## Targets | Target | Output | | ----------- | --------------------------------------------------------------------------------- | | `swift` | Swift source under `Sources/` plus a `Package.swift` SwiftPM manifest stub. | | `android` | Android XML resource files. | | `compose` | A Jetpack Compose Kotlin file. | | `flutter` | A Flutter Dart file. | | `rust` | A `tokens.rs` for egui (default) or iced (`--format iced`). | | `wordpress` | A block-theme `theme.json`. | | `vanilla` | A Vanilla Forums `variables.json`. | | `drupal` | Drupal theme assets. | | `jekyll` | Jekyll site data. | | `hugo` | Hugo site data. | | `swatches` | Color swatches — `ase` (default), `gpl`, `sketch`, or `svg` via `--format`. | | `icon-font` | An icon web font (TTF, WOFF2), its CSS, and a codepoints map. | | `pendo` | The Instructure-styled `global.css` for Pendo guides. | ## Common flags * `--out ` — where to write (default `./pantoken-out`). * `--theme ` — `rebrand` (default), `canvas`, or `canvasHighContrast`. * `--icons a,b,c` — icon names to emit as native assets, for targets that support them. * `--class ` — the generated type or package name, for targets that need one. * `--format ` — the output format, for `swatches` and `rust`. ## Examples ```sh # iOS tokens plus two icons, in the Canvas theme. npx pantoken generate swift --out ./ios/Tokens --theme canvas --icons arrow-left,check-mark # A WordPress block theme's theme.json. npx pantoken generate wordpress --out ./wp-content/themes/mytheme # An egui palette for a Rust app. npx pantoken generate rust --out ./src/tokens.rs --format egui ``` Several targets also expose a plain function, so you can call them from your own build instead of the CLI. See the [API reference](/api/) for each platform package. --- --- url: /api/plugins/postcss/theme-custom-media/src.md --- [pantoken-root](../../../../index.md) / theme-custom-media # theme-custom-media Beta `@pantoken/plugin-theme-custom-media` — author with theme custom-idents (`@media (theme: )`) and/or `@media (--theme-*)` aliases, then emit concrete CSS for a chosen target theme. The plugin expands built-in `--theme-*` and `--breakpoint-*` aliases, prunes non-target theme branches, strips matching `theme:*` clauses from kept queries, unwraps always-true theme-only media wrappers, and removes `@custom-media --theme-*`/`--breakpoint-*` declarations from emitted CSS. ## Interfaces * [ThemeCustomMediaOptions](interfaces/ThemeCustomMediaOptions.md) ## Type Aliases * [Theme](type-aliases/Theme.md) ## Variables * [themeCustomMedia](variables/themeCustomMedia.md) ## References ### default Renames and re-exports [themeCustomMedia](variables/themeCustomMedia.md) --- --- url: /api/renderers/tinymce/src.md --- [pantoken-root](../../../index.md) / tinymce # tinymce ## Compatibility Target: TinyMCE PluginManager. Current format: `Pantoken plugin registration and callback initialization`. Minimum host version: `8.9.2`. Tested through `8.9.3`. Newer releases require review. [Full compatibility matrix](../../../../compatibility) ## Interfaces * [CssDocEntry](interfaces/CssDocEntry.md) * [PageLayoutImagePlaceholder](interfaces/PageLayoutImagePlaceholder.md) * [PageLayout](interfaces/PageLayout.md) * [LogoMeta](interfaces/LogoMeta.md) * [TaggedIcon](interfaces/TaggedIcon.md) * [GlyphSyncTarget](interfaces/GlyphSyncTarget.md) * [ContentClassesPluginOptions](interfaces/ContentClassesPluginOptions.md) * [LayoutsPluginOptions](interfaces/LayoutsPluginOptions.md) * [LayoutImageAttributes](interfaces/LayoutImageAttributes.md) * [PantokenPluginOptions](interfaces/PantokenPluginOptions.md) * [TinymceStrings](interfaces/TinymceStrings.md) ## Type Aliases * [Product](type-aliases/Product.md) * [PantokenFontSize](type-aliases/PantokenFontSize.md) * [LayoutImageResolver](type-aliases/LayoutImageResolver.md) ## Variables * [pageLayouts](variables/pageLayouts.md) * [logos](variables/logos.md) * [products](variables/products.md) * [PANTOKEN_ICON_PACK_NAME](variables/PANTOKEN_ICON_PACK_NAME.md) * [ICON_SOURCES](variables/ICON_SOURCES.md) * [SOURCE_LABELS](variables/SOURCE_LABELS.md) * [PRODUCT_LABELS](variables/PRODUCT_LABELS.md) * [CONTENT_CLASSES_PLUGIN_NAME](variables/CONTENT_CLASSES_PLUGIN_NAME.md) * [PANTOKEN_COMMANDS](variables/PANTOKEN_COMMANDS.md) * [FULLSCREEN_FOOTER_PLUGIN_NAME](variables/FULLSCREEN_FOOTER_PLUGIN_NAME.md) * [FULLSCREEN_FOOTER_STATUSBAR_NAME](variables/FULLSCREEN_FOOTER_STATUSBAR_NAME.md) * [ICONS_COMMAND](variables/ICONS_COMMAND.md) * [DEFAULT_ICON_TRIGGER](variables/DEFAULT_ICON_TRIGGER.md) * [LAYOUTS_PLUGIN_NAME](variables/LAYOUTS_PLUGIN_NAME.md) * [LAYOUTS_TOOLBAR_NAME](variables/LAYOUTS_TOOLBAR_NAME.md) * [PANTOKEN_PLUGIN_NAME](variables/PANTOKEN_PLUGIN_NAME.md) * [PANTOKEN_TOOLBAR_NAME](variables/PANTOKEN_TOOLBAR_NAME.md) * [PANTOKEN_ICON](variables/PANTOKEN_ICON.md) * [SEARCHREPLACE_FOOTER_PLUGIN_NAME](variables/SEARCHREPLACE_FOOTER_PLUGIN_NAME.md) * [SEARCHREPLACE_FOOTER_STATUSBAR_NAME](variables/SEARCHREPLACE_FOOTER_STATUSBAR_NAME.md) * [SUP_SUB_PLUGIN_NAME](variables/SUP_SUB_PLUGIN_NAME.md) * [SUP_SUB_TOOLBAR_NAME](variables/SUP_SUB_TOOLBAR_NAME.md) * [pageTemplates](variables/pageTemplates.md) * [VISUALBLOCKS_FOOTER_PLUGIN_NAME](variables/VISUALBLOCKS_FOOTER_PLUGIN_NAME.md) * [VISUALBLOCKS_FOOTER_STATUSBAR_NAME](variables/VISUALBLOCKS_FOOTER_STATUSBAR_NAME.md) * [TINYMCE_STRINGS](variables/TINYMCE_STRINGS.md) ## Functions * [pantokenHtmlCompletion](functions/pantokenHtmlCompletion.md) * [pantokenHtmlLinter](functions/pantokenHtmlLinter.md) * [pantokenContentCssUrls](functions/pantokenContentCssUrls.md) * [injectContentStylesheet](functions/injectContentStylesheet.md) * [retargetContentStylesheets](functions/retargetContentStylesheets.md) * [findEntry](functions/findEntry.md) * [listComponents](functions/listComponents.md) * [listUtilities](functions/listUtilities.md) * [getModifierSuggestions](functions/getModifierSuggestions.md) * [validateClassToken](functions/validateClassToken.md) * [registerPantokenIconPack](functions/registerPantokenIconPack.md) * [loadAllIcons](functions/loadAllIcons.md) * [getIconCdnFile](functions/getIconCdnFile.md) * [getUsedIconCdnFiles](functions/getUsedIconCdnFiles.md) * [humanizeIconName](functions/humanizeIconName.md) * [buildIconMarkup](functions/buildIconMarkup.md) * [getIconImageSrc](functions/getIconImageSrc.md) * [filterIcons](functions/filterIcons.md) * [normalizeGlyphHtml](functions/normalizeGlyphHtml.md) * [injectUsedGlyphAssets](functions/injectUsedGlyphAssets.md) * [registerGlyphSync](functions/registerGlyphSync.md) * [logoVariantLabel](functions/logoVariantLabel.md) * [filterLogos](functions/filterLogos.md) * [getLogoCdnFile](functions/getLogoCdnFile.md) * [buildLogoMarkup](functions/buildLogoMarkup.md) * [getUsedLogoCdnFiles](functions/getUsedLogoCdnFiles.md) * [createComponentsPlugin](functions/createComponentsPlugin.md) * [createContentClassesPlugin](functions/createContentClassesPlugin.md) * [createFullscreenFooterPlugin](functions/createFullscreenFooterPlugin.md) * [createIconsPlugin](functions/createIconsPlugin.md) * [materializeLayout](functions/materializeLayout.md) * [createLayoutsPlugin](functions/createLayoutsPlugin.md) * [createLogosPlugin](functions/createLogosPlugin.md) * [createPantokenPlugin](functions/createPantokenPlugin.md) * [createSearchReplaceFooterPlugin](functions/createSearchReplaceFooterPlugin.md) * [createSupSubPlugin](functions/createSupSubPlugin.md) * [createTemplatesPlugin](functions/createTemplatesPlugin.md) * [createVisualBlocksFooterPlugin](functions/createVisualBlocksFooterPlugin.md) --- --- url: /api/formats/tokens/src.md --- [pantoken-root](../../../index.md) / tokens # tokens Beta `@pantoken/tokens` — the canonical resolved token IR, vendored as static JSON. The default export is the `rebrand` theme; every theme is available by name and via [byTheme](functions/byTheme.md). Raw Tokens Studio JSON lives at `@pantoken/tokens/raw`. ## Variables * [tokens](variables/tokens.md) * [rebrandTokens](variables/rebrandTokens.md) * [canvasTokens](variables/canvasTokens.md) * [canvasHighContrastTokens](variables/canvasHighContrastTokens.md) * [themes](variables/themes.md) ## Functions * [byTheme](functions/byTheme.md) ## References ### Theme Re-exports [Theme](../../../packages/core/src/type-aliases/Theme.md) *** ### Token Re-exports [Token](../../../packages/core/src/interfaces/Token.md) *** ### TokenMeta Re-exports [TokenMeta](../../../packages/core/src/interfaces/TokenMeta.md) *** ### TokenModify Re-exports [TokenModify](../../../packages/core/src/interfaces/TokenModify.md) --- --- url: /api/plugins/pantoken/transition/src.md --- [pantoken-root](../../../../index.md) / transition # transition Beta `@pantoken/plugin-transition` — the `--instui-transition-duration`/`--instui-transition-timing` tokens behind InstUI's `Transition` utility. The CSS itself (the `.instui-transition` base rule plus the `fade`/`scale`/`slide-*` state classes) lives in `@pantoken/components`' own `transition` utility now; this plugin only bakes the two duration/timing tokens into a token IR for consumers using the lower-level `@pantoken/css` + `@pantoken/tokens` pipeline directly. ## Example ```ts import { buildTokens } from "@pantoken/core/build"; import { transition } from "@pantoken/plugin-transition"; const tokens = buildTokens({ theme: "rebrand", plugins: [transition()] }); // → includes --instui-transition-duration: 300ms, --instui-transition-timing: ease-in-out ``` ## Interfaces * [TransitionOptions](interfaces/TransitionOptions.md) ## Functions * [transition](functions/transition.md) ## References ### default Renames and re-exports [transition](functions/transition.md) --- --- url: /api/ai/pantoken-ai/src/type-aliases/AgentTool.md --- [pantoken-root](../../../../index.md) / [ai/pantoken-ai/src](../index.md) / AgentTool # Type Alias: AgentTool > **AgentTool** = `"agents"` | `"llms"` | `"cursor"` | `"copilot"` | `"windsurf"` | `"claude"` Alpha An agent/editor tool pantoken can install assets for. --- --- url: /api/renderers/react-markdown/src/type-aliases/AlertMarker.md --- [pantoken-root](../../../../index.md) / [renderers/react-markdown/src](../index.md) / AlertMarker # Type Alias: AlertMarker > **AlertMarker** = `"NOTE"` | `"TIP"` | `"IMPORTANT"` | `"WARNING"` | `"CAUTION"` Beta GitHub-style blockquote alert markers (`> [!NOTE]`). --- --- url: /api/packages/utils/src/type-aliases/ColorUtilityEntry.md --- [pantoken-root](../../../../index.md) / [packages/utils/src](../index.md) / ColorUtilityEntry # Type Alias: ColorUtilityEntry > **ColorUtilityEntry** = `string` | readonly \[`name`: `string`, `value`: `string`] Beta One semantic colour family entry: a bare name (resolved against `--instui-color--`) or an explicit `[name, value]` pair — the second element is `var()`-wrapped if it's a `--custom-prop` name, or used verbatim otherwise (a `light-dark(…)` expression, a raw keyword like `transparent`). --- --- url: /api/formats/interactions/src/type-aliases/CommandHandler.md --- [pantoken-root](../../../../index.md) / [formats/interactions/src](../index.md) / CommandHandler # Type Alias: CommandHandler > **CommandHandler** = (`command`, `source`) => `void` Callback invoked when a `command` event (or fallback click) resolves to a target. ## Parameters ### command `string` ### source `Element` | `null` ## Returns `void` --- --- url: /api/plugins/pantoken/colors/src/type-aliases/CssColor.md --- [pantoken-root](../../../../../index.md) / [plugins/pantoken/colors/src](../index.md) / CssColor # Type Alias: CssColor > **CssColor** = `string` Beta A CSS color: a literal (`#1d354f`, `rebeccapurple`), a `var(--token)`, or a nested helper result. --- --- url: /api/formats/css/src/type-aliases/CssEmitTarget.md --- [pantoken-root](../../../../index.md) / [formats/css/src](../index.md) / CssEmitTarget # Type Alias: CssEmitTarget > **CssEmitTarget** = `"all"` | `"properties"` | `"declarations"` Beta Which half of the sheet to emit. `@property` registrations are document-global — the last registration of a given name wins for the whole document — so two full sheets on one page fight over every concrete token. Emitting registrations once (`"properties"`) and each theme as declarations only (`"declarations"`) lets several themes coexist. --- --- url: /api/formats/dtcg/src/type-aliases/DtcgNode.md --- [pantoken-root](../../../../index.md) / [formats/dtcg/src](../index.md) / DtcgNode # Type Alias: DtcgNode > **DtcgNode** = { `$value`: `string`; `$type?`: `string`; } | {\[`key`: `string`]: `DtcgNode`; } Beta A DTCG token leaf or group. --- --- url: /api/platforms/email/src/type-aliases/EmailClient.md --- [pantoken-root](../../../../index.md) / [platforms/email/src](../index.md) / EmailClient # Type Alias: EmailClient > **EmailClient** = `"generic"` | `"outlook"` | `"gmail"` | `"webkit"` Experimental Supported email client capability profiles. --- --- url: /api/packages/core/src/type-aliases/IconResolver.md --- [pantoken-root](../../../../index.md) / [packages/core/src](../index.md) / IconResolver # Type Alias: IconResolver > **IconResolver** = (`code`) => [`IconEntry`](../interfaces/IconEntry.md) | `undefined` Beta Maps an icon code to an [IconEntry](../interfaces/IconEntry.md), or `undefined` when it has no match. ## Parameters ### code `string` ## Returns [`IconEntry`](../interfaces/IconEntry.md) | `undefined` --- --- url: /api/packages/model/src/type-aliases/IconResolver.md --- [pantoken-root](../../../../index.md) / [packages/model/src](../index.md) / IconResolver # Type Alias: IconResolver > **IconResolver** = (`code`) => [`IconEntry`](../interfaces/IconEntry.md) | `undefined` Beta Maps an icon code to an [IconEntry](../interfaces/IconEntry.md), or `undefined` when it has no match. ## Parameters ### code `string` ## Returns [`IconEntry`](../interfaces/IconEntry.md) | `undefined` --- --- url: /api/formats/interactions/src/type-aliases/InPlaceEditInputType.md --- [pantoken-root](../../../../index.md) / [formats/interactions/src](../index.md) / InPlaceEditInputType # Type Alias: InPlaceEditInputType > **InPlaceEditInputType** = `"text"` | `"number"` | `"email"` | `"url"` | `"tel"` | `"search"` Text-like input types that can be meaningfully hinted on a contenteditable field. --- --- url: /api/renderers/tinymce/src/type-aliases/LayoutImageResolver.md --- [pantoken-root](../../../../index.md) / [renderers/tinymce/src](../index.md) / LayoutImageResolver # Type Alias: LayoutImageResolver > **LayoutImageResolver** = (`placeholder`, `layout`) => [`LayoutImageAttributes`](../interfaces/LayoutImageAttributes.md) | `undefined` Resolves a provider-neutral layout image slot for a particular consumer. ## Parameters ### placeholder [`PageLayoutImagePlaceholder`](../interfaces/PageLayoutImagePlaceholder.md) ### layout [`PageLayout`](../interfaces/PageLayout.md) ## Returns [`LayoutImageAttributes`](../interfaces/LayoutImageAttributes.md) | `undefined` --- --- url: /api/plugins/pantoken/logos/src/type-aliases/LogoColorMode.md --- [pantoken-root](../../../../../index.md) / [plugins/pantoken/logos/src](../index.md) / LogoColorMode # Type Alias: LogoColorMode > **LogoColorMode** = `"color"` | `"current-color"` | `"dark"` | `"full-color"` | `"full-color-bg"` | `"full-color-reversed"` | `"light"` | `"reversed"` | `"reversed-bg"` Beta A logo color treatment. --- --- url: /api/plugins/pantoken/logos/src/type-aliases/LogoLang.md --- [pantoken-root](../../../../../index.md) / [plugins/pantoken/logos/src](../index.md) / LogoLang # Type Alias: LogoLang > **LogoLang** = `"ar"` | `"el"` | `"fa"` | `"he"` | `"hi"` | `"hy"` | `"jp"` | `"ko"` | `"ru"` | `"th"` | `"uk"` | `"zh"` Beta A trailing language code on a localized wordmark variant, e.g. `"horizontal-full-color-ar"`. --- --- url: /api/plugins/pantoken/logos/src/type-aliases/LogoLayout.md --- [pantoken-root](../../../../../index.md) / [plugins/pantoken/logos/src](../index.md) / LogoLayout # Type Alias: LogoLayout > **LogoLayout** = `"horizontal"` | `"icon"` | `"icon-single-dot"` | `"icon-three-dot"` | `"stacked"` Beta A logo layout — the arrangement of mark and wordmark. --- --- url: /api/plugins/pantoken/lucide-lab/src/type-aliases/LucideLabNode.md --- [pantoken-root](../../../../../index.md) / [plugins/pantoken/lucide-lab/src](../index.md) / LucideLabNode # Type Alias: LucideLabNode > **LucideLabNode** = \[`tag`: `string`, `attrs`: `Record`<`string`, `string` | `number`>] One SVG element in a Lucide icon-node array. --- --- url: /api/plugins/pantoken/lucide-lab/src/type-aliases/LucideLabRegistry.md --- [pantoken-root](../../../../../index.md) / [plugins/pantoken/lucide-lab/src](../index.md) / LucideLabRegistry # Type Alias: LucideLabRegistry > **LucideLabRegistry** = `Record`<`string`, `unknown`> A registry of named Lucide Lab icon-node arrays. --- --- url: /api/plugins/postcss/mangle-custom-props/src/type-aliases/MangleMethod.md --- [pantoken-root](../../../../../index.md) / [plugins/postcss/mangle-custom-props/src](../index.md) / MangleMethod # Type Alias: MangleMethod > **MangleMethod** = `"base26"` | `"base36"` | `"numeric"` Beta Short-name generation strategy for [mangleCustomProps](../variables/mangleCustomProps.md). --- --- url: /api/plugins/postcss/props-minify/src/type-aliases/MangleMethod.md --- [pantoken-root](../../../../../index.md) / [plugins/postcss/props-minify/src](../index.md) / MangleMethod # Type Alias: MangleMethod > **MangleMethod** = `"base26"` | `"base36"` | `"numeric"` Beta Short-name generation strategy for [mangleCustomProps](../variables/mangleCustomProps.md). --- --- url: /api/design/swatches/src/type-aliases/Mode.md --- [pantoken-root](../../../../index.md) / [design/swatches/src](../index.md) / Mode # Type Alias: Mode > **Mode** = `"light"` | `"dark"` Experimental The colour mode to resolve when flattening `light-dark()` values. --- --- url: /api/formats/dtcg/src/type-aliases/Mode.md --- [pantoken-root](../../../../index.md) / [formats/dtcg/src](../index.md) / Mode # Type Alias: Mode > **Mode** = `"light"` | `"dark"` Beta The colour mode to resolve when flattening `light-dark()` values. --- --- url: /api/platforms/vanilla/src/type-aliases/Mode.md --- [pantoken-root](../../../../index.md) / [platforms/vanilla/src](../index.md) / Mode # Type Alias: Mode > **Mode** = `"light"` | `"dark"` Experimental The colour mode to resolve when flattening `light-dark()` values. --- --- url: /api/platforms/wordpress/src/type-aliases/Mode.md --- [pantoken-root](../../../../index.md) / [platforms/wordpress/src](../index.md) / Mode # Type Alias: Mode > **Mode** = `"light"` | `"dark"` Experimental The colour mode to resolve when flattening `light-dark()` values. --- --- url: /api/packages/core/src/type-aliases/Mode.md --- [pantoken-root](../../../../index.md) / [packages/core/src](../index.md) / Mode # Type Alias: Mode > **Mode** = `"light"` | `"dark"` Beta The colour mode to collapse `light-dark()` to. --- --- url: /api/packages/utils/src/type-aliases/Mode.md --- [pantoken-root](../../../../index.md) / [packages/utils/src](../index.md) / Mode # Type Alias: Mode > **Mode** = `"light"` | `"dark"` Beta The colour mode to collapse `light-dark()` to. --- --- url: /api/formats/interactions/src/type-aliases/OnCommand.md --- [pantoken-root](../../../../index.md) / [formats/interactions/src](../index.md) / OnCommand # Type Alias: OnCommand > **OnCommand** = (`target`, `handler`) => `void` Command-event wiring function: bind one target to a handler, with click fallback when needed. ## Parameters ### target `HTMLElement` ### handler [`CommandHandler`](CommandHandler.md) ## Returns `void` --- --- url: /api/bundlers/panda/src/type-aliases/PandaCategory.md --- [pantoken-root](../../../../index.md) / [bundlers/panda/src](../index.md) / PandaCategory # Type Alias: PandaCategory > **PandaCategory** = `"colors"` | `"spacing"` | `"sizes"` | `"radii"` | `"fontSizes"` | `"fontWeights"` | `"lineHeights"` | `"durations"` | `"shadows"` Experimental The Panda token categories this preset populates. --- --- url: >- /api/plugins/pantoken/custom-theme-colors/src/type-aliases/PantokenColorNamespace.md --- [pantoken-root](../../../../../index.md) / [plugins/pantoken/custom-theme-colors/src](../index.md) / PantokenColorNamespace # Type Alias: PantokenColorNamespace > **PantokenColorNamespace** = *typeof* [`COLOR_KEYS`](../variables/COLOR_KEYS.md)\[`number`] | *typeof* [`CUSTOM_COLOR_KEY`](../variables/CUSTOM_COLOR_KEY.md) Beta A supported custom theme color namespace. --- --- url: /api/renderers/tinymce/src/type-aliases/PantokenFontSize.md --- [pantoken-root](../../../../index.md) / [renderers/tinymce/src](../index.md) / PantokenFontSize # Type Alias: PantokenFontSize > **PantokenFontSize** = `"xs"` | `"sm"` | `"md"` | `"lg"` | `"xl"` Semantic text sizes accepted by the pantoken font-size command. --- --- url: /api/renderers/tinymce/src/type-aliases/Product.md --- [pantoken-root](../../../../index.md) / [renderers/tinymce/src](../index.md) / Product # Type Alias: Product > **Product** = `"canvas"` | `"igniteai"` | `"instructure"` | `"learnplatform"` | `"mastery"` | `"pantoken"` | `"parchment"` An Instructure product with a logo. --- --- url: /api/plugins/pantoken/logos/src/type-aliases/Product.md --- [pantoken-root](../../../../../index.md) / [plugins/pantoken/logos/src](../index.md) / Product # Type Alias: Product > **Product** = `"canvas"` | `"igniteai"` | `"instructure"` | `"learnplatform"` | `"mastery"` | `"pantoken"` | `"parchment"` Beta An Instructure product with a logo. --- --- url: /api/renderers/react-native/src/type-aliases/RNTokenValue.md --- [pantoken-root](../../../../index.md) / [renderers/react-native/src](../index.md) / RNTokenValue # Type Alias: RNTokenValue > **RNTokenValue** = `string` | `number` Experimental A React Native token value: a colour/string or a numeric dimension. --- --- url: /api/platforms/rust/src/type-aliases/RustFormat.md --- [pantoken-root](../../../../index.md) / [platforms/rust/src](../index.md) / RustFormat # Type Alias: RustFormat > **RustFormat** = `"egui"` | `"iced"` Experimental The Rust GUI framework to target. --- --- url: /api/ai/pantoken-ai/src/type-aliases/ScaffoldPlatform.md --- [pantoken-root](../../../../index.md) / [ai/pantoken-ai/src](../index.md) / ScaffoldPlatform # Type Alias: ScaffoldPlatform > **ScaffoldPlatform** = keyof *typeof* `SCAFFOLDS` Alpha A platform pantoken can scaffold a starter project for. --- --- url: /api/formats/css/src/type-aliases/Scheme.md --- [pantoken-root](../../../../index.md) / [formats/css/src](../index.md) / Scheme # Type Alias: Scheme > **Scheme** = `"light"` | `"dark"` Beta A color scheme a scope can be pinned to. --- --- url: /api/formats/scope/src/type-aliases/Scheme.md --- [pantoken-root](../../../../index.md) / [formats/scope/src](../index.md) / Scheme # Type Alias: Scheme > **Scheme** = `"light"` | `"dark"` Beta A color scheme a scope can be pinned to. --- --- url: /api/packages/utils/src/type-aliases/Scheme.md --- [pantoken-root](../../../../index.md) / [packages/utils/src](../index.md) / Scheme # Type Alias: Scheme > **Scheme** = `"light"` | `"dark"` Beta A color scheme a scope can be pinned to. --- --- url: /api/plugins/pantoken/simple-icons/src/type-aliases/SimpleIconsRegistry.md --- [pantoken-root](../../../../../index.md) / [plugins/pantoken/simple-icons/src](../index.md) / SimpleIconsRegistry # Type Alias: SimpleIconsRegistry > **SimpleIconsRegistry** = `Record`<`string`, `unknown`> Beta A Simple Icons registry: the module's named `si*` exports, or any compatible map. --- --- url: /api/packages/plugin-kit/src/type-aliases/Stage.md --- [pantoken-root](../../../../index.md) / [packages/plugin-kit/src](../index.md) / Stage # Type Alias: Stage > **Stage** = `"tokens"` | `"icons"` | `"css"` | `"rehype"` | `"native"` Beta The plugin hook stages, recorded as capabilities. --- --- url: /api/renderers/storybook/src/type-aliases/StorybookTheme.md --- [pantoken-root](../../../../index.md) / [renderers/storybook/src](../index.md) / StorybookTheme # Type Alias: StorybookTheme > **StorybookTheme** = `object` & `Record`<`string`, `string`> Experimental A Storybook theme object (a subset of `ThemeVars`). ## Type Declaration ### base > **base**: [`Mode`](../../../../packages/core/src/type-aliases/Mode.md) --- --- url: /api/renderers/css-in-js/src/type-aliases/StyledTheme.md --- [pantoken-root](../../../../index.md) / [renderers/css-in-js/src](../index.md) / StyledTheme # Type Alias: StyledTheme > **StyledTheme** = `Record`<`string`, `string`> Experimental A CSS-in-JS theme object: camelCased token key → value. --- --- url: /api/packages/core/src/type-aliases/Theme.md --- [pantoken-root](../../../../index.md) / [packages/core/src](../index.md) / Theme # Type Alias: Theme > **Theme** = `"rebrand"` | `"canvas"` | `"canvasHighContrast"` Beta A colour theme available in `@instructure/instructure-design-tokens`. --- --- url: /api/packages/model/src/type-aliases/Theme.md --- [pantoken-root](../../../../index.md) / [packages/model/src](../index.md) / Theme # Type Alias: Theme > **Theme** = `"rebrand"` | `"canvas"` | `"canvasHighContrast"` Beta A colour theme available in `@instructure/instructure-design-tokens`. --- --- url: /api/plugins/postcss/theme-custom-media/src/type-aliases/Theme.md --- [pantoken-root](../../../../../index.md) / [plugins/postcss/theme-custom-media/src](../index.md) / Theme # Type Alias: Theme > **Theme** = `"rebrand"` | `"canvas"` | `"canvasHighContrast"` Beta A theme the plugin can target when emitting concrete CSS. --- --- url: /api/platforms/canvas-theme-editor/src/type-aliases/ThemeMode.md --- [pantoken-root](../../../../index.md) / [platforms/canvas-theme-editor/src](../index.md) / ThemeMode # Type Alias: ThemeMode > **ThemeMode** = `"adaptive"` | `"light"` Alpha Rebrand token mode — ignored for the `canvas`/`canvasHighContrast` variants. --- --- url: /api/platforms/canvas-theme-editor/src/type-aliases/ThemeVariant.md --- [pantoken-root](../../../../index.md) / [platforms/canvas-theme-editor/src](../index.md) / ThemeVariant # Type Alias: ThemeVariant > **ThemeVariant** = `"rebrand"` | `"canvas"` | `"canvasHighContrast"` Alpha A pantoken token theme variant. --- --- url: /api/packages/model/src/type-aliases/UpstreamRef.md --- [pantoken-root](../../../../index.md) / [packages/model/src](../index.md) / UpstreamRef # Type Alias: UpstreamRef > **UpstreamRef** = `string` Beta An upstream reference in `@` form, e.g. `"ui@11.7.4"` or `"design-tokens@v1.5.0"`. --- --- url: /api/packages/utils/src.md --- [pantoken-root](../../../index.md) / utils # utils Beta `@pantoken/utils` — shared, upstream-free helpers used across the pantoken packages: the token reference resolver (with `light-dark()` handling), the two token regexes (typed via `arkregex`), kebab→camel case, hex-colour parsing, SVG sanitization, the pantoken spacing scale, reference-drift validation, and the generic token→utility-class emitters that both `@pantoken/components` (semantic tier) and `@pantoken/plugin-primitives` (raw-palette tier) build on. Depends only on `@pantoken/model` (types) + `arkregex`, so any package can use it without pulling the GitHub-only upstream. The css-tree-backed token syntax validator lives at the separate `@pantoken/utils/token-syntax` entry, not this barrel — `css-tree` bundles a runtime `createRequire()` JSON load that breaks when pulled into a browser/SSR bundle, and this barrel is imported by browser-facing packages (e.g. `@pantoken/components`) for the Node-free helpers above. A pure barrel — every implementation lives in its own discrete module; add new helpers there and re-export them here, don't grow this file. ## Interfaces * [Rgba](interfaces/Rgba.md) * [ResolveOptions](interfaces/ResolveOptions.md) * [SpacingStep](interfaces/SpacingStep.md) * [UtilityOptions](interfaces/UtilityOptions.md) * [ColorUtilityNames](interfaces/ColorUtilityNames.md) * [TokenUtilityGroup](interfaces/TokenUtilityGroup.md) ## Type Aliases * [Mode](type-aliases/Mode.md) * [Scheme](type-aliases/Scheme.md) * [ColorUtilityEntry](type-aliases/ColorUtilityEntry.md) ## Variables * [ELEVATION_NAMES](variables/ELEVATION_NAMES.md) * [FOCUSABLE_SELECTOR](variables/FOCUSABLE_SELECTOR.md) * [VAR_RE](variables/VAR_RE.md) * [LIGHT_DARK_RE](variables/LIGHT_DARK_RE.md) * [THEME_ATTR](variables/THEME_ATTR.md) * [SCHEME_ATTR](variables/SCHEME_ATTR.md) * [COLOR_ATTR](variables/COLOR_ATTR.md) * [BOUNDARY_ATTR](variables/BOUNDARY_ATTR.md) * [INSTANCE_ATTR](variables/INSTANCE_ATTR.md) * [SCOPE_ATTRS](variables/SCOPE_ATTRS.md) * [SCOPE_LAYERS](variables/SCOPE_LAYERS.md) * [BOUNDARY_CLASS](variables/BOUNDARY_CLASS.md) * [SPACING_STEPS](variables/SPACING_STEPS.md) * [SPACING_AUTO_STEP](variables/SPACING_AUTO_STEP.md) ## Functions * [camelCase](functions/camelCase.md) * [parseHexColor](functions/parseHexColor.md) * [elevationDeclarations](functions/elevationDeclarations.md) * [focusOutlineDeclarations](functions/focusOutlineDeclarations.md) * [focusOutlineRules](functions/focusOutlineRules.md) * [extractInstuiRefs](functions/extractInstuiRefs.md) * [tokenNames](functions/tokenNames.md) * [unknownReferences](functions/unknownReferences.md) * [danglingReferences](functions/danglingReferences.md) * [makeResolver](functions/makeResolver.md) * [resolveTokens](functions/resolveTokens.md) * [isScheme](functions/isScheme.md) * [themeClass](functions/themeClass.md) * [schemeClass](functions/schemeClass.md) * [colorClass](functions/colorClass.md) * [themeScopeSelector](functions/themeScopeSelector.md) * [schemeScopeSelector](functions/schemeScopeSelector.md) * [colorScopeSelector](functions/colorScopeSelector.md) * [themeScopeSelectors](functions/themeScopeSelectors.md) * [schemeScopeSelectors](functions/schemeScopeSelectors.md) * [colorScopeSelectors](functions/colorScopeSelectors.md) * [sanitizeSvg](functions/sanitizeSvg.md) * [globalModifierSelector](functions/globalModifierSelector.md) * [colorUtilitiesCss](functions/colorUtilitiesCss.md) * [tokenUtilitiesCss](functions/tokenUtilitiesCss.md) --- --- url: /api/platforms/vanilla/src.md --- [pantoken-root](../../../index.md) / vanilla # vanilla ## Compatibility Target: Vanilla Forums. Host compatibility has not yet been verified. [Full compatibility matrix](../../../../compatibility) Experimental `@pantoken/vanilla` — Instructure design tokens as a Vanilla Forums Foundation `variables.json`. [toVanillaVariables](functions/toVanillaVariables.md) converts any IR; [variables](variables/variables.md) is the ready-made `rebrand` object. Push it to a theme with the Vanilla API: `PUT /themes/{themeID}/assets/variables.json`. ## Interfaces * [ToVanillaOptions](interfaces/ToVanillaOptions.md) ## Type Aliases * [Mode](type-aliases/Mode.md) ## Variables * [variables](variables/variables.md) * [VANILLA_TO_INSTUI](variables/VANILLA_TO_INSTUI.md) ## Functions * [toVanillaVariables](functions/toVanillaVariables.md) ## References ### default Renames and re-exports [variables](variables/variables.md) --- --- url: /api/renderers/pendo/src/variables/addImportant.md --- [pantoken-root](../../../../index.md) / [renderers/pendo/src](../index.md) / addImportant # Variable: addImportant > `const` **addImportant**: {(): [`Plugin`](https://postcss.org/api/#plugin); `postcss`: `true`; } Beta Create the add-`!important` plugin. ## Type Declaration ## Returns [`Plugin`](https://postcss.org/api/#plugin) ### postcss > **postcss**: `true` Required PostCSS plugin marker. ## Example ```ts import postcss from "postcss"; import { addImportant } from "@pantoken/pendo"; const { css } = postcss([addImportant()]).process(".x{color:red}", { from: undefined }); // ".x{color:red !important}" ``` --- --- url: /api/renderers/pendo/src/variables/addScope.md --- [pantoken-root](../../../../index.md) / [renderers/pendo/src](../index.md) / addScope # Variable: addScope > `const` **addScope**: {(`options?`): [`Plugin`](https://postcss.org/api/#plugin); `postcss`: `true`; } Beta Create the `@scope` wrapping plugin. ## Type Declaration ## Parameters ### options? [`AddScopeOptions`](../interfaces/AddScopeOptions.md) ## Returns [`Plugin`](https://postcss.org/api/#plugin) ### postcss > **postcss**: `true` Required PostCSS plugin marker. ## Example ```ts import postcss from "postcss"; import { addScope } from "@pantoken/pendo"; const { css } = postcss([addScope({ selector: "._pendo-step-container" })]) .process(".x{color:red}", { from: undefined }); // "@scope ([class*=\"instui\"]._pendo-step-container) { .x{color:red} }" ``` --- --- url: /api/ai/pantoken-ai/src/variables/AGENT_TOOLS.md --- [pantoken-root](../../../../index.md) / [ai/pantoken-ai/src](../index.md) / AGENT_TOOLS # Variable: AGENT_TOOLS > `const` **AGENT_TOOLS**: readonly [`AgentTool`](../type-aliases/AgentTool.md)\[] Alpha Every installable tool key. --- --- url: /api/ai/pantoken-ai/src/variables/AGENTS_MD.md --- [pantoken-root](../../../../index.md) / [ai/pantoken-ai/src](../index.md) / AGENTS_MD # Variable: AGENTS_MD > `const` **AGENTS_MD**: `string` = `ASSETS.agents` Alpha The `AGENTS.md` content (consumer usage guide). ## Example **Serve the guide from an app route** ```ts import { AGENTS_MD } from "@pantoken/ai"; export function GET() { return new Response(AGENTS_MD, { headers: { "Content-Type": "text/markdown" } }); } ``` --- --- url: /api/formats/components/src/variables/aiGradientCss.md --- [pantoken-root](../../../../index.md) / [formats/components/src](../index.md) / aiGradientCss # Variable: aiGradientCss > `const` **aiGradientCss**: `Definition`\[`"css"`] = `aiGradient.css` Beta The AI gradient utility as a standalone, header-wrapped stylesheet. --- --- url: /api/renderers/web-components/src/variables/alert.md --- [pantoken-root](../../../../index.md) / [renderers/web-components/src](../index.md) / alert # Variable: alert > `const` **alert**: [`ElementDefinition`](../interfaces/ElementDefinition.md) Alpha `` — an inline status message with `role="alert"`. The `variant` attribute maps to the `-color-` modifier (`info`, `success`, `warning`, `danger`). Alerts are elevated by default; set `has-shadow="false"` to flatten one (→ `-without-shadow`, mirroring InstUI's `hasShadow={false}`). The `timeout` attribute (milliseconds) auto-dismisses the alert after that delay — it fades out, removes itself from the DOM, and fires a cancelable bubbling `dismiss` event (call `preventDefault()` on it to keep the alert mounted). The fade states use `@pantoken/components`' `transition` utility; load its stylesheet when using timeout dismissal. Slotted content is the message body. ## Example ```html Your changes were saved.

A flat, inline notice.

``` --- --- url: /api/formats/components/src/variables/alertCss.md --- [pantoken-root](../../../../index.md) / [formats/components/src](../index.md) / alertCss # Variable: alertCss > `const` **alertCss**: `Definition`\[`"css"`] = `alert.css` Beta Standalone `alert` stylesheet — the prefixed CSS for the status message, ready to ship as a `.css` file. --- --- url: /api/renderers/web-components/src/variables/ar.md --- [pantoken-root](../../../../index.md) / [renderers/web-components/src](../index.md) / ar # Variable: ar > `const` **ar**: [`LocaleBundle`](../interfaces/LocaleBundle.md) Alpha Arabic (العربية) locale bundle. --- --- url: /api/renderers/web-components/src/variables/avatar.md --- [pantoken-root](../../../../index.md) / [renderers/web-components/src](../index.md) / avatar # Variable: avatar > `const` **avatar**: [`ElementDefinition`](../interfaces/ElementDefinition.md) Alpha `` — a circular (or rectangular) avatar. `variant` maps to `-color-`, `size` to `-size-`, and `shape="rectangle"` to `-shape-rectangle`; slotted content is the initials, or an `` (use an absolute/CDN `src`) to show a photo. ## Example ```html JS AB ``` --- --- url: /api/formats/components/src/variables/avatarCss.md --- [pantoken-root](../../../../index.md) / [formats/components/src](../index.md) / avatarCss # Variable: avatarCss > `const` **avatarCss**: `Definition`\[`"css"`] = `avatar.css` Beta Standalone `avatar` stylesheet — the prefixed CSS for the avatar, ready to ship as a `.css` file. --- --- url: /api/renderers/web-components/src/variables/badge.md --- [pantoken-root](../../../../index.md) / [renderers/web-components/src](../index.md) / badge # Variable: badge > `const` **badge**: [`ElementDefinition`](../interfaces/ElementDefinition.md) Alpha `` — a small count/status badge. The `variant` attribute maps to the `-color-` modifier; slotted content is the count or label. ## Example ```html 9 ``` --- --- url: /api/formats/components/src/variables/badgeCss.md --- [pantoken-root](../../../../index.md) / [formats/components/src](../index.md) / badgeCss # Variable: badgeCss > `const` **badgeCss**: `Definition`\[`"css"`] = `badge.css` Beta Standalone `badge` stylesheet — the prefixed CSS for the count-and-status badge, ready to ship as a `.css` file. --- --- url: /api/formats/components/src/variables/billboardCss.md --- [pantoken-root](../../../../index.md) / [formats/components/src](../index.md) / billboardCss # Variable: billboardCss > `const` **billboardCss**: `Definition`\[`"css"`] = `billboard.css` Beta Standalone `billboard` stylesheet — the prefixed CSS for the empty-state block, ready to ship as a `.css` file. --- --- url: /api/renderers/bootstrap/src/variables/BOOTSTRAP_TO_INSTUI.md --- [pantoken-root](../../../../index.md) / [renderers/bootstrap/src](../index.md) / BOOTSTRAP_TO_INSTUI # Variable: BOOTSTRAP_TO_INSTUI > `const` **BOOTSTRAP_TO_INSTUI**: `Readonly`<`Record`<`string`, `string`>> Experimental Bootstrap 5 CSS variable → the Instructure token it resolves to. --- --- url: /api/renderers/bootstrap/src/variables/bootstrapCss.md --- [pantoken-root](../../../../index.md) / [renderers/bootstrap/src](../index.md) / bootstrapCss # Variable: bootstrapCss > `const` **bootstrapCss**: `string` Experimental The ready-made bridge stylesheet. --- --- url: /api/formats/css/src/variables/BOUNDARY_ATTR.md --- [pantoken-root](../../../../index.md) / [formats/css/src](../index.md) / BOUNDARY_ATTR # Variable: BOUNDARY_ATTR > `const` **BOUNDARY_ATTR**: `"data-pantoken-boundary"` = `"data-pantoken-boundary"` Beta Attribute marking a scope that ancestor resolution must not cross. --- --- url: /api/packages/utils/src/variables/BOUNDARY_ATTR.md --- [pantoken-root](../../../../index.md) / [packages/utils/src](../index.md) / BOUNDARY_ATTR # Variable: BOUNDARY_ATTR > `const` **BOUNDARY_ATTR**: `"data-pantoken-boundary"` = `"data-pantoken-boundary"` Beta Attribute marking a scope that ancestor resolution must not cross. --- --- url: /api/formats/css/src/variables/BOUNDARY_CLASS.md --- [pantoken-root](../../../../index.md) / [formats/css/src](../index.md) / BOUNDARY_CLASS # Variable: BOUNDARY_CLASS > `const` **BOUNDARY_CLASS**: `"--pantoken-boundary"` = `"--pantoken-boundary"` Beta Class equivalent of `data-pantoken-boundary`. --- --- url: /api/packages/utils/src/variables/BOUNDARY_CLASS.md --- [pantoken-root](../../../../index.md) / [packages/utils/src](../index.md) / BOUNDARY_CLASS # Variable: BOUNDARY_CLASS > `const` **BOUNDARY_CLASS**: `"--pantoken-boundary"` = `"--pantoken-boundary"` Beta Class equivalent of `data-pantoken-boundary`. --- --- url: /api/formats/components/src/variables/breadcrumbCss.md --- [pantoken-root](../../../../index.md) / [formats/components/src](../index.md) / breadcrumbCss # Variable: breadcrumbCss > `const` **breadcrumbCss**: `Definition`\[`"css"`] = `breadcrumb.css` Beta Standalone `breadcrumb` stylesheet — the prefixed CSS for the breadcrumb trail, ready to ship as a `.css` file. --- --- url: /api/formats/components/src/variables/breadcrumbLinkCss.md --- [pantoken-root](../../../../index.md) / [formats/components/src](../index.md) / breadcrumbLinkCss # Variable: breadcrumbLinkCss > `const` **breadcrumbLinkCss**: `Definition`\[`"css"`] = `breadcrumbLink.css` Beta Standalone `breadcrumb.link` stylesheet. --- --- url: /api/renderers/web-components/src/variables/button.md --- [pantoken-root](../../../../index.md) / [renderers/web-components/src](../index.md) / button # Variable: button > `const` **button**: [`ElementDefinition`](../interfaces/ElementDefinition.md) Alpha `` — a token-styled `