Komme i gang

Pantoken tar designtokenene og ikonene fra Instructure UI, løser dem én gang, og omformer den ene modellen til pakker for mange plattformer: vanlige stilark, SCSS og Less, React og Vue og Svelte, Tailwind og Panda, native Swift og Kotlin, WordPress og Drupal, Figma, og mer.

Installer den minste pakken som passer for oppgaven. Alt er også re-eksportert av den samlende pantoken-pakken, så du kan starte der og snevre inn senere.

Generer et startprosjekt

Den raskeste måten å prøve pantoken på: generer et startprosjekt med det allerede installert og koblet inn.

npx create-pantoken-app

Plattformer: components (ren HTML/CSS), react, vue, svelte, web-components, angular. Se @pantoken/scaffold for --dir <path> og programmatisk bruk.

Bruker du en AI-kodeagent? Ingen installasjon nødvendig — pek den direkte mot skillen:

Hent create.pantoken.app/SKILL.md og følg den for å sette opp pantoken i dette prosjektet.

Hvis du heller vil koble pantokens agent-regler permanent inn i repoet (AGENTS.md, editor-regler, en lokal kopi av denne skillen), kjør npx @pantoken/ai init i stedet.

Tokemodellen

Tokenene er CSS-tilpassede egenskaper navngitt --instui-<group>-<name>, for eksempel --instui-color-background-brand eller --instui-spacing-space-md. Tre temaer leveres: rebrand (standard, med light-dark() der lys og mørk varierer), canvas, og canvasHighContrast. Ikoner er <image>-tokenene (--instui-icon-<name>) avledet fra Lucide pluss Instructures egne glyfer.

Style en webapp

Installer stilarket og importer det én gang. Det definerer alle --instui-*-egenskaper, så du refererer til dem direkte fra din egen CSS.

npm i @pantoken/css

import "@pantoken/css/inject";

.button {
  background: var(--instui-color-background-brand);
  padding: var(--instui-spacing-space-md);
}

Bruk ikoner hvor som helst

Webkomponenten fungerer i alle rammeverk, uten portering.

npm i @pantoken/web-components

import "@pantoken/web-components";

<instui-icon name="check-mark"></instui-icon>

CSS-tokens

Ikoner er CSS-tilpassede egenskaper (--instui-icon-<name>). Last stilarket én gang og referer til et hvilket som helst ikon som en mask-image eller background-image — ingen import per ikon nødvendig.

.my-icon {
  mask-image: var(--instui-icon-check-mark);
}

JavaScript — enkeltikon vs. hele settet

@pantoken/icons eksponerer to navngitte eksporter. Bruk iconsByName for å hente ett ikon uten å iterere gjennom hele arrayet:

import { iconsByName } from "@pantoken/icons";

const icon = iconsByName.get("check-mark"); // only one lookup
icon?.svg; // inline SVG markup

Bruk icons når du trenger hele settet (f.eks. for å bygge en velger):

import { icons } from "@pantoken/icons";

icons.length; // ~1,800
icons.filter((i) => i.source === "lucide");

Begge eksportene laster hele IR ved modul-initialisering — det finnes ingen per-ikon tree-shaking på dette nivået. For slank CSS-only lasting, bruk CDN picker for å generere en kombinert URL for kun ikonene du trenger.

Generer for en native plattform

CLI-en skriver tokenskilde inn i et mål-repo. Ingen installasjon utover kjøreren:

npx @pantoken/cli generate swift --out ./ios/Tokens --icons arrow-left,check-mark

Se pantoken CLI for alle mål.

VS Code forfattertips

@pantoken/pantoken leverer nå VS Code custom-data-filer slik at downstream-prosjekter kan få klasse- og tokencompletion i HTML/CSS uten å installere en pantoken-spesifikk utvidelse.

1. Installer den samlende pakken:

npm i @pantoken/pantoken

1. Pek VS Code mot den medfølgende custom-data JSON fra ditt consumer-arbeidsområde:

{
  "html.customData": ["./node_modules/@pantoken/pantoken/dist/html-custom-data.json"],
  "css.customData": ["./node_modules/@pantoken/pantoken/dist/css-custom-data.json"]
}

1. Last inn VS Code på nytt (eller kjør "Developer: Reload Window") for å bruke de nye dataene.

Dette aktiverer forslag for instui-* klasse-tokens (og -modifier klasse-tokens) pluss --instui-* tilpassede egenskaper.

Hva videre

• Pakkeoversikten — hvilken pakke du skal bruke, etter oppgave.
• @pantoken/ai — installer agent-ressurser og regler i et consumer-repo.
• Arkitektur — hvordan tokemodellen, kjernen og outputtene henger sammen.
• API-referanse — alle eksporterte symboler, generert fra kilden.