Começando

Pantoken pega os design tokens e ícones do Instructure UI, resolve-os uma vez e remodela esse único modelo em pacotes para muitas plataformas: folhas de estilo simples, SCSS e Less, React e Vue e Svelte, Tailwind e Panda, nativo Swift e Kotlin, WordPress e Drupal, Figma e mais.

Instale o menor pacote que atenda à sua tarefa. Tudo também é re-exportado pelo pacote unificado pantoken, então você pode começar por ele e depois afunilar.

Scaffold de um projeto inicial

A maneira mais rápida de experimentar o pantoken: scaffold um projeto inicial com ele já instalado e integrado.

npx create-pantoken-app

Plataformas: components (HTML/CSS simples), react, vue, svelte, web-components, angular. Veja @pantoken/scaffold para --dir <path> e uso programático.

Usando um agente de codificação por IA? Nenhuma instalação necessária — aponte-o diretamente para a skill:

Busque create.pantoken.app/SKILL.md e siga suas instruções para configurar o pantoken neste projeto.

Se preferir integrar permanentemente as regras do agente do pantoken no repositório (AGENTS.md, regras do editor, uma cópia local desta skill), execute npx @pantoken/ai init em vez disso.

O modelo de tokens

Tokens são propriedades customizadas CSS nomeadas --instui-<group>-<name>, por exemplo --instui-color-background-brand ou --instui-spacing-space-md. Três temas são fornecidos: rebrand (o padrão, com light-dark() onde claro e escuro diferem), canvas, e canvasHighContrast. Ícones são tokens <image> (--instui-icon-<name>) derivados do Lucide mais os glifos personalizados da Instructure.

Estilizar uma aplicação web

Instale a folha de estilo e importe-a uma vez. Ela define toda propriedade --instui-*, então você as referencia diretamente do seu próprio CSS.

npm i @pantoken/css

import "@pantoken/css/inject";

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

Usar ícones em qualquer lugar

O web component funciona em qualquer framework, sem necessidade de portar.

npm i @pantoken/web-components

import "@pantoken/web-components";

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

Tokens CSS

Ícones são propriedades customizadas CSS (--instui-icon-<name>). Carregue a folha de estilo uma vez e referencie qualquer ícone como um mask-image ou background-image — não é necessário importar por ícone.

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

JavaScript — ícone único vs. conjunto completo

@pantoken/icons expõe duas exports nomeadas. Use iconsByName para puxar um ícone sem iterar o array completo:

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

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

Use icons quando precisar do conjunto inteiro (por exemplo, para construir um seletor):

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

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

Ambas as exports carregam o IR completo na inicialização do módulo — não há tree-shaking por ícone neste nível. Para carregamento enxuto apenas em CSS, use o CDN picker para gerar uma URL combinada somente para os ícones que você precisa.

Gerar para uma plataforma nativa

O CLI grava a origem dos tokens em um repositório alvo. Nenhuma instalação além do runner:

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

Veja o CLI do pantoken para cada destino.

Dicas de autoria para VS Code

@pantoken/pantoken agora fornece arquivos custom-data do VS Code para que projetos consumidores possam obter conclusão de classes e tokens em HTML/CSS sem instalar uma extensão específica do pantoken.

1. Instale o pacote unificado:

npm i @pantoken/pantoken

1. Aponte o VS Code para o JSON custom-data fornecido a partir do seu workspace consumidor:

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

1. Recarregue o VS Code (ou execute "Developer: Reload Window") para aplicar os novos dados.

Isso habilita sugestões para tokens de classe instui-* (e tokens de classe -modifier) além de propriedades customizadas --instui-*.

Próximos passos

• O mapa de pacotes — qual pacote escolher, por tarefa.
• @pantoken/ai — instale ativos e regras do agente em um repositório consumidor.
• Arquitetura — como o modelo de tokens, core e outputs se encaixam.
• Referência da API — cada símbolo exportado, gerado a partir da fonte.