Peta paket

pantoken adalah monorepo dari paket-paket kecil dan bertujuan tunggal yang dikelompokkan ke dalam bucket. Pasang yang sesuai dengan tugas Anda, atau pasang paket terpadu pantoken dan impor dari subpath-nya (misalnya pantoken/css, pantoken/react, pantoken/tailwind).

Inti

Model bersama dan transformer yang menjadi dasar semuanya.

Package	Apa yang dilakukannya
@pantoken/model	Tipe TypeScript tanpa dependensi: bentuk Token dan kontrak plugin.
@pantoken/core	Menyelesaikan token dan ikon hulu menjadi IR kanonik, dan merender CSS.
@pantoken/tokens	IR yang sudah diselesaikan yang dijual sebagai JSON statis, per tema, plus sumber Tokens Studio mentah.
@pantoken/utils	Resolver token, regex referensi, helper kasus dan warna, pemeriksaan drift, dan emitter token→utility-class.
@pantoken/plugin-kit	Membangun dan menggabungkan plugin pantoken dengan definePlugin.
@pantoken/cli	pantoken generate <target> — menghasilkan sumber native dan platform.

Format

Mengubah token menjadi format file.

Package	Output
@pantoken/css	CSS bertipe @property dengan light-dark() dan ikon data-URI.
@pantoken/scss	Variabel SCSS, diselesaikan ke satu mode.
@pantoken/less	Variabel Less.
@pantoken/stylus	Variabel Stylus.
@pantoken/dtcg	Dokumen W3C Design Tokens (DTCG).
@pantoken/tokens	IR sebagai JavaScript dan JSON (juga tercantum di bawah Inti).
@pantoken/icons	Tampilan ergonomis atas token ikon.
@pantoken/icon-font	Font web ikon (TTF, WOFF2) dan CSS-nya.
@pantoken/components	Perpustakaan komponen CSS berpenampilan InstUI (button, alert, table, dan lainnya) plus reset dasar dengan focus ring, styling prose, utilitas lintas-potong, dan font brand. Lihat Components.

Renderer

Integrasi framework dan alat.

Package	Untuk
@pantoken/react	Hook React, <Icon>, dan penyedia token.
@pantoken/vue, @pantoken/svelte, @pantoken/angular	Komponen web, dipasang ke masing-masing framework.
@pantoken/react-native	Objek token ramah StyleSheet (tanpa variabel CSS).
@pantoken/web-components	<instui-icon> dan primitif bergaya, tanpa ketergantungan framework.
@pantoken/astro	Pengaturan token untuk situs Astro.
@pantoken/react-markdown, @pantoken/rehype	Token ikon dan swatch dalam Markdown.
@pantoken/markdown-it	Plugin markdown-it untuk kode ikon dan color swatches.
@pantoken/css-in-js	Tema bertipe untuk styled-components dan Emotion.
@pantoken/mui	Tema Material UI.
@pantoken/bootstrap, @pantoken/shadcn	Jembatan variabel-CSS untuk Bootstrap dan shadcn/ui.
@pantoken/foundation	Override pengaturan Sass dan overlay CSS untuk Foundation.
@pantoken/docusaurus, @pantoken/vitepress	Tema untuk Docusaurus dan VitePress.
@pantoken/mintlify	Tema Mintlify docs.json (warna + latar).
@pantoken/storybook	Tema Storybook.
@pantoken/pendo	CSS global bergaya Instructure untuk panduan Pendo.

Bundler

Integrasi alat build.

Package	Untuk
@pantoken/vite	Plugin Vite dengan modul virtual dan injeksi CSS.
@pantoken/next	withPantoken untuk Next.js transpilePackages.
@pantoken/webpack	Plugin webpack.
@pantoken/postcss	At-rule @pantoken;.
@pantoken/tailwind	Preset Tailwind.
@pantoken/panda	Preset Panda CSS.

Platform

Target native dan generator situs, dihasilkan oleh CLI atau API mereka sendiri.

Package	Output
@pantoken/swift	Sumber Swift plus stub manifest SwiftPM.
@pantoken/android	Resource XML Android.
@pantoken/compose	Jetpack Compose Kotlin.
@pantoken/flutter	Flutter Dart.
@pantoken/rust	Rust consts untuk egui atau iced.
@pantoken/wordpress	Tema block WordPress theme.json.
@pantoken/vanilla	variables.json untuk Vanilla Forums.
@pantoken/drupal	Asset tema Drupal.
@pantoken/hugo, @pantoken/jekyll	Data situs Hugo dan Jekyll.
@pantoken/email	Nilai ramah-inline untuk email HTML.

Desain

Untuk alat desain.

Package	Output
@pantoken/figma	Payload Figma Variables.
@pantoken/swatches	Swatch warna (ASE, GPL, Sketch) plus lembar spesimen SVG yang dapat dilihat.

Plugin

Transform opsional yang memperluas output token atau CSS. Lihat Plugins.

Package	Apa yang ditambahkan
@pantoken/plugin-stacking	Kedalaman z-index bernama sebagai token --instui-stacking-*.
@pantoken/plugin-visual-debug	Outline debugging tata letak -with-visual-debug.
@pantoken/plugin-simple-icons	Ikon merek dari simple-icons.
@pantoken/plugin-logos	Logo produk Instructure sebagai SVG, data URI, dan token gambar.
@pantoken/plugin-prune-custom-props	Plugin PostCSS yang menghapus custom properties yang tidak terpakai.

Alat

Infrastruktur build, docs, dan demo untuk monorepo itu sendiri. Kebanyakan bersifat internal, tetapi komponennya mandiri, jadi didokumentasikan di sini dan beberapa dipublikasikan ke npm secara terpisah.

Package	Apa yang dilakukannya
@pantoken/aggregate	Menghasilkan paket barel terpadu pantoken dan exports dari dependensinya.
@pantoken/validate-generated	Gerbang drift: memeriksa setiap stylesheet yang dihasilkan resolves terhadap IR token.
@pantoken/demo	Runner demo live self-hosted: menyelesaikan spesifikasi @demo ke iframe dan merender HTML/CSS/JS bare same-origin, bertema token.
@cssdoc/core (eksternal)	Ekstraktor dokumentasi CSS generik (TSDoc, untuk CSS): mem-parsing doc-comment + AST CSS menjadi model yang didorong sebagai referensi API CSS dokumen. Berada di repo sendiri; dikonsumsi sebagai dependensi link.

@pantoken/validate-generated adalah skrip sekali-jalankan (dipanggil oleh pnpm run ready), jadi tidak memiliki halaman API; yang lainnya ada.

AI

Aset pengaturan AI untuk konsumen. Ini untuk proyek yang menggunakan pantoken, bukan untuk mengembangkan pantoken itu sendiri.

• @pantoken/ai memasang AGENTS.md, llms.txt, dan aturan asisten/editor (Cursor, Copilot, Windsurf, Claude Code) ke dalam repositori konsumen.

Plugin pengembang

Plugin yang kami buat untuk alat yang kami bangun, dikelompokkan menurut host. Mereka berdiri sendiri dan dapat dipublikasikan.

Package	Terhubung ke
@pantoken/typedoc-plugin-demo	TypeDoc: mengubah tag blok @demo <provider>:<ref> menjadi fence demo yang dapat disematkan.
@pantoken/vite-workspace-orchestrator	Vite: membangun ulang paket workspace hulu (dan dependennya) ketika sumbernya berubah.