Mula

Pantoken mengambil token reka bentuk dan ikon Instructure UI, menyelesaikannya sekali, dan membentuk semula model tersebut ke dalam pakej untuk banyak platform: helaian gaya biasa, SCSS dan Less, React dan Vue dan Svelte, Tailwind dan Panda, native Swift dan Kotlin, WordPress dan Drupal, Figma, dan banyak lagi.

Pasang pakej terkecil yang sesuai dengan tugas anda. Segala-galanya juga dieksport semula oleh pakej bersepadu pantoken, jadi anda boleh mula di situ dan mempersempit kemudian.

Menyediakan projek permulaan

Cara terpantas untuk mencuba pantoken: rangka projek permulaan yang telah dipasang dan disambungkan.

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 ejen pengekodan AI? Tiada pemasangan diperlukan — tunjukkan terus pada skill itu:

Dapatkan create.pantoken.app/SKILL.md dan ikutinya untuk menyediakan pantoken dalam projek ini.

Jika anda mahu menyambungkan peraturan ejen pantoken ke repositori secara kekal (AGENTS.md, peraturan editor, salinan tempatan skill ini), jalankan npx @pantoken/ai init sebaliknya.

Model token

Token ialah sifat tersuai CSS bernama --instui-<group>-<name>, contohnya --instui-color-background-brand atau --instui-spacing-space-md. Tiga tema disertakan: rebrand (lalai, dengan light-dark() di mana terang dan gelap berbeza), canvas, dan canvasHighContrast. Ikon adalah token <image> (--instui-icon-<name>) yang berasal dari Lucide ditambah glif tersuai Instructure.

Gaya aplikasi web

Pasang helaian gaya dan import sekali. Ia mentakrifkan setiap sifat --instui-*, jadi anda merujuknya terus 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);
}

Gunakan ikon di mana-mana

Komponen web berfungsi dalam mana-mana rangka kerja, tanpa perlu porting.

npm i @pantoken/web-components

import "@pantoken/web-components";

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

Token CSS

Ikon ialah sifat tersuai CSS (--instui-icon-<name>). Muatkan helaian gaya sekali dan rujuk mana-mana ikon sebagai mask-image atau background-image — tiada import per-ikon diperlukan.

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

JavaScript — ikon tunggal vs set penuh

@pantoken/icons mendedahkan dua eksport bernama. Gunakan iconsByName untuk menarik satu ikon tanpa mengulangi keseluruhan array:

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

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

Gunakan icons apabila anda memerlukan set penuh (contohnya untuk membina pemilih):

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

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

Kedua-dua eksport memuatkan IR penuh semasa inisialisasi modul — tiada tree-shaking per-ikon pada peringkat ini. Untuk pemuatan CSS sahaja yang ringkas, gunakan CDN picker untuk menjana URL gabungan hanya bagi ikon yang anda perlukan.

Jana untuk platform native

CLI menulis sumber token ke repositori sasaran. Tiada pemasangan selain pelari:

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

Lihat the pantoken CLI untuk setiap sasaran.

Petua penyuntingan VS Code

@pantoken/pantoken kini disertakan dengan fail custom-data VS Code supaya projek pengguna dapat mendapatkan pelengkap kelas dan token dalam HTML/CSS tanpa memasang sambungan khusus pantoken.

1. Pasang pakej bersepadu:

npm i @pantoken/pantoken

1. Arahkan VS Code ke JSON custom-data yang disertakan dari ruang kerja pengguna 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 semula VS Code (atau jalankan "Developer: Reload Window") untuk menerapkan data baru.

Ini membolehkan cadangan untuk token kelas instui-* (dan token kelas -modifier) serta sifat tersuai --instui-*.

Ke mana seterusnya

• Peta pakej — pakej mana untuk dicapai mengikut tugas.
• @pantoken/ai — pasang aset ejen dan peraturan dalam repositori pengguna.
• Seni bina — bagaimana model token, teras, dan output bersesuaian.
• Rujukan API — setiap simbol yang dieksport, dijana dari sumber.