Iniziare

Pantoken prende i design token e le icone di Instructure UI, li risolve una volta e rimodella quel singolo modello in pacchetti per molte piattaforme: fogli di stile plain, SCSS e Less, React e Vue e Svelte, Tailwind e Panda, native per Swift e Kotlin, WordPress e Drupal, Figma e altro.

Si installa il pacchetto più piccolo che si adatta al compito. Tutto è inoltre riesportato dal pacchetto unificato pantoken, quindi si può iniziare da lì e restringere in seguito.

Scaffold di un progetto starter

Il modo più veloce per provare pantoken: scaffoldare un progetto starter con esso già installato e collegato.

npx create-pantoken-app

Piattaforme: components (HTML/CSS plain), react, vue, svelte, web-components, angular. Vedi @pantoken/scaffold per --dir <path> e uso programmatico.

Si sta usando un agente di coding AI? Nessuna installazione necessaria — puntalo direttamente verso la skill:

Recupera create.pantoken.app/SKILL.md e segui le istruzioni per configurare pantoken in questo progetto.

Se si preferisce collegare permanentemente le regole dell'agente di pantoken nel repo (AGENTS.md, regole dell'editor, una copia locale di questa skill), eseguire invece npx @pantoken/ai init.

Il modello dei token

I token sono proprietà personalizzate CSS chiamate --instui-<group>-<name>, per esempio --instui-color-background-brand o --instui-spacing-space-md. Tre temi sono forniti: rebrand (il predefinito, con light-dark() dove light e dark differiscono), canvas, e canvasHighContrast. Le icone sono token <image> (--instui-icon-<name>) derivati da Lucide più i glifi personalizzati di Instructure.

Stilizzare una web app

Installare il foglio di stile e importarlo una sola volta. Definisce ogni proprietà --instui-*, quindi si possono referenziare direttamente dal proprio CSS.

npm i @pantoken/css

import "@pantoken/css/inject";

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

Usare le icone ovunque

Il componente web funziona in qualsiasi framework, senza porting.

npm i @pantoken/web-components

import "@pantoken/web-components";

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

Token CSS

Le icone sono proprietà personalizzate CSS (--instui-icon-<name>). Caricare il foglio di stile una volta e riferirsi a qualsiasi icona come mask-image o background-image — nessun import per singola icona necessario.

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

JavaScript — icona singola vs. set completo

@pantoken/icons espone due export nominati. Usare iconsByName per prelevare una singola icona senza iterare l'intero array:

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

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

Usare icons quando è necessario l'intero set (es. per costruire un selettore):

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

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

Entrambi gli export caricano l'IR completo all'inizializzazione del modulo — non esiste tree-shaking per singola icona a questo livello. Per un caricamento snello solo CSS, usare il CDN picker per generare un URL combinato solo per le icone necessarie.

Generare per una piattaforma nativa

La CLI scrive la sorgente dei token in un repo target. Nessuna installazione oltre al runner:

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

Vedi la CLI di pantoken per ogni target.

Suggerimenti per authoring in VS Code

@pantoken/pantoken ora fornisce file di custom-data per VS Code così i progetti downstream possono ottenere il completamento per classi e token in HTML/CSS senza installare un'estensione specifica per pantoken.

1. Installare il pacchetto unificato:

npm i @pantoken/pantoken

1. Puntare VS Code sul JSON di custom-data fornito dal pacchetto, dal proprio workspace consumer:

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

1. Ricaricare VS Code (o eseguire "Developer: Reload Window") per applicare i nuovi dati.

Questo abilita suggerimenti per token di classe instui-* (e token di classe -modifier) oltre a proprietà personalizzate --instui-*.

Dove andare dopo

• La mappa dei pacchetti — quale pacchetto raggiungere, per compito.
• @pantoken/ai — installare asset e regole dell'agente in un repo consumer.
• Architettura — come il modello dei token, il core e gli output si integrano.
• Riferimento API — ogni simbolo esportato, generato dalla sorgente.