Comenzando

Pantoken toma los tokens de diseño e iconos de Instructure UI, los resuelve una vez y remodela ese único modelo en paquetes para muchas plataformas: hojas de estilo simples, SCSS y Less, React y Vue y Svelte, Tailwind y Panda, nativo Swift y Kotlin, WordPress y Drupal, Figma y más.

Instala el paquete más pequeño que se ajuste a tu tarea. Todo también se reexporta mediante el paquete unificado pantoken, por lo que puedes empezar allí y afinar después.

Crear un proyecto inicial

La forma más rápida de probar pantoken: generar un proyecto inicial con él ya instalado y configurado.

npx create-pantoken-app

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

¿Usando un agente de codificación AI? No se necesita instalación — apúntalo directamente a la skill:

Recupera create.pantoken.app/SKILL.md y síguelo para configurar pantoken en este proyecto.

Si prefieres integrar permanentemente las reglas del agente de pantoken en el repositorio (AGENTS.md, reglas del editor, una copia local de esta skill), ejecuta npx @pantoken/ai init en su lugar.

El modelo de tokens

Los tokens son propiedades personalizadas de CSS llamadas --instui-<group>-<name>, por ejemplo --instui-color-background-brand o --instui-spacing-space-md. Se incluyen tres temas: rebrand (el predeterminado, con light-dark() donde difieren claro y oscuro), canvas y canvasHighContrast. Los iconos son tokens <image> (--instui-icon-<name>) derivados de Lucide más los glifos personalizados de Instructure.

Estilar una aplicación web

Instala la hoja de estilo e impórtala una vez. Define cada propiedad --instui-*, por lo que las referencias se hacen directamente desde tu propio CSS.

npm i @pantoken/css

import "@pantoken/css/inject";

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

Usar iconos en cualquier lugar

El componente web funciona en cualquier framework, sin necesidad de portar.

npm i @pantoken/web-components

import "@pantoken/web-components";

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

Tokens CSS

Los iconos son propiedades personalizadas de CSS (--instui-icon-<name>). Carga la hoja de estilo una vez y referencia cualquier icono como mask-image o background-image — no se necesita importación por icono.

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

JavaScript — icono único vs. conjunto completo

@pantoken/icons expone dos exportaciones con nombre. Usa iconsByName para obtener un icono sin iterar sobre todo el array:

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

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

Usa icons cuando necesites el conjunto completo (p. ej., para construir un selector):

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

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

Ambas exportaciones cargan la IR completa en la inicialización del módulo — no hay tree-shaking por icono a este nivel. Para una carga ligera solo con CSS, usa el CDN picker para generar una URL combinada solo con los iconos que necesitas.

Generar para una plataforma nativa

El CLI escribe la fuente de tokens en un repositorio destino. No se necesita instalación más allá del runner:

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

Consulta el CLI de pantoken para cada destino.

Pistas para autoría en VS Code

@pantoken/pantoken ahora incluye archivos de datos personalizados para VS Code para que los proyectos consumidores puedan obtener autocompletado de clases y tokens en HTML/CSS sin instalar una extensión específica de pantoken.

1. Instala el paquete unificado:

npm i @pantoken/pantoken

1. Señala VS Code al JSON de datos personalizados incluido desde tu espacio de trabajo consumidor:

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

1. Recarga VS Code (o ejecuta "Developer: Reload Window") para aplicar los nuevos datos.

Esto habilita sugerencias para tokens de clase instui-* (y tokens de clase -modifier) además de propiedades personalizadas --instui-*.

¿A dónde después?

• El mapa de paquetes — qué paquete elegir según la tarea.
• @pantoken/ai — instalar activos y reglas del agente en un repositorio consumidor.
• Arquitectura — cómo encajan el modelo de tokens, el núcleo y las salidas.
• Referencia API — cada símbolo exportado, generado desde la fuente.