Memulai

Pantoken mengambil token desain dan ikon Instructure UI, menyelesaikannya sekali, dan membentuk ulang model itu menjadi paket untuk banyak platform: stylesheet biasa, SCSS dan Less, React dan Vue dan Svelte, Tailwind dan Panda, native Swift dan Kotlin, WordPress dan Drupal, Figma, dan lainnya.

Pasang paket terkecil yang sesuai dengan tugas Anda. Semua juga diekspor ulang oleh paket terpadu pantoken, jadi Anda bisa memulai dari situ dan mempersempit nanti.

Membuat proyek starter

Cara tercepat mencoba pantoken: buat proyek starter yang sudah terpasang dan terhubung.

npx create-pantoken-app

Platform: components (HTML/CSS biasa), react, vue, svelte, web-components, angular. Lihat @pantoken/scaffold untuk --dir <path> dan penggunaan programatik.

Menggunakan agen pengkodean AI? Tidak perlu instalasi — arahkan agen tersebut langsung ke skill:

Ambil create.pantoken.app/SKILL.md dan ikuti isinya untuk menyiapkan pantoken di proyek ini.

Jika ingin menghubungkan aturan agen pantoken ke repo secara permanen (AGENTS.md, aturan editor, salinan lokal skill ini), jalankan npx @pantoken/ai init sebagai gantinya.

Model token

Token adalah properti kustom CSS bernama --instui-<group>-<name>, misalnya --instui-color-background-brand atau --instui-spacing-space-md. Tiga tema dikirim: rebrand (default, dengan light-dark() tempat tema terang dan gelap berbeda), canvas, dan canvasHighContrast. Ikon adalah token <image> (--instui-icon-<name>) yang berasal dari Lucide ditambah glif kustom Instructure.

Menata aplikasi web

Pasang stylesheet dan impor sekali. Itu mendefinisikan setiap properti --instui-*, sehingga Anda merujuknya langsung dari CSS Anda sendiri.

npm i @pantoken/css

import "@pantoken/css/inject";

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

Menggunakan ikon di mana saja

Web component bekerja di framework mana pun, tanpa porting.

npm i @pantoken/web-components

import "@pantoken/web-components";

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

Token CSS

Ikon adalah properti kustom CSS (--instui-icon-<name>). Muat stylesheet sekali dan rujuk ikon apa pun sebagai mask-image atau background-image — tidak perlu impor per-ikon.

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

JavaScript — satu ikon vs. seluruh set

@pantoken/icons mengekspos dua ekspor bernama. Gunakan iconsByName untuk menarik satu ikon tanpa mengiterasi seluruh array:

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

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

Gunakan icons ketika Anda membutuhkan seluruh set (mis. untuk membangun pemilih):

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

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

Kedua ekspor memuat IR penuh saat inisialisasi modul — tidak ada tree-shaking per-ikon pada tingkat ini. Untuk pemuatan ramping hanya-CSS, gunakan CDN picker untuk menghasilkan URL gabungan hanya untuk ikon yang Anda butuhkan.

Menghasilkan untuk platform native

CLI menulis sumber token ke repo target. Tidak perlu instalasi selain runner:

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

Lihat the pantoken CLI untuk setiap target.

Petunjuk authoring VS Code

@pantoken/pantoken kini mengirimkan file custom-data VS Code sehingga proyek downstream dapat mendapatkan pelengkapan kelas dan token di HTML/CSS tanpa memasang ekstensi khusus pantoken.

1. Pasang paket terpadu:

npm i @pantoken/pantoken

1. Arahkan VS Code ke JSON custom-data yang dikirim dari workspace konsumen Anda:

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

1. Muat ulang VS Code (atau jalankan "Developer: Reload Window") untuk menerapkan data baru.

Ini mengaktifkan saran untuk token kelas instui-* (dan token kelas -modifier) serta properti kustom --instui-*.

Selanjutnya ke mana

• Peta paket — paket mana yang dicapai untuk tugas tertentu.
• @pantoken/ai — pasang aset agen dan aturan di repo konsumen.
• Arsitektur — bagaimana model token, core, dan output saling cocok.
• Referensi API — setiap simbol yang diekspor, dihasilkan dari sumber.