A csomagtérkép

A pantoken egy monorepo, amely apró, egy célra szolgáló csomagokból áll, csoportokba rendezve. Telepítsd azt, amelyik a feladatodhoz illik, vagy telepítsd az egyesített pantoken csomagot, és importálj annak alútvonalaiból (például pantoken/css, pantoken/react, pantoken/tailwind).

Mag

A közös modell és a transzformer, amelyre minden más épül.

Csomag	Mit csinál
@pantoken/model	Függőség nélküli TypeScript típusok: a Token alakja és a plugin-szerződés.
@pantoken/core	A feljebb lévő tokeneket és ikonokat feloldja a kanonikus IR-be, és CSS-t renderel.
@pantoken/tokens	A feloldott IR statikus JSON-ként csomagolva, témánként, valamint a nyers Tokens Studio forrás.
@pantoken/utils	A token-feloldó, hivatkozási reguláris kifejezések, kis- és nagybetűs, valamint színsegédek, drift-ellenőrzések és a token→segédosztály-kibocsátók.
@pantoken/plugin-kit	Pantoken pluginok építése és összeállítása definePlugin segítségével.
@pantoken/cli	pantoken generate <target> — natív és platformforrás kibocsátása.

Formátumok

Alakítsd át a tokeneket egy fájlformátumra.

Csomag	Kimenet
@pantoken/css	@property-típusos CSS light-dark() és data-URI ikonokkal.
@pantoken/scss	SCSS változók, egyetlen módra feloldva.
@pantoken/less	Less változók.
@pantoken/stylus	Stylus változók.
@pantoken/dtcg	Egy W3C Design Tokens (DTCG) dokumentum.
@pantoken/tokens	Az IR JavaScriptként és JSON-ként (a Mag alatt is szerepel).
@pantoken/icons	Egy ergonomikus nézet az ikon-tokenek felett.
@pantoken/icon-font	Egy ikon webfont (TTF, WOFF2) a hozzá tartozó CSS-sel.
@pantoken/components	Egy InstUI-megjelenésű CSS komponenskönyvtár (button, alert, table és mások), valamint egy alap reset fókuszgyűrűvel, prose-stílussal, keresztmetszeti segédosztályokkal és a márka betűtípusokkal. Lásd: Komponensek.

Renderelők

Keretrendszer- és eszközintegrációk.

Csomag	Mihez
@pantoken/react	React hookok, <Icon> és egy token-provider.
@pantoken/vue, @pantoken/svelte, @pantoken/angular	A webkomponens, minden keretrendszerhez bekötve.
@pantoken/react-native	StyleSheet-barát token-objektumok (CSS változók nélkül).
@pantoken/web-components	<instui-icon> és stílusozott primitívek, keretrendszer-független.
@pantoken/astro	Token-beállítás Astro oldalakhoz.
@pantoken/react-markdown, @pantoken/rehype	Ikon-tokenek és színminták Markdownban.
@pantoken/markdown-it	Egy markdown-it plugin ikonkódokhoz és színmintákhoz.
@pantoken/css-in-js	Egy típusbiztos téma styled-componentshez és Emotionhöz.
@pantoken/mui	Egy Material UI téma.
@pantoken/bootstrap, @pantoken/shadcn	CSS-változó hidak Bootstraphoz és shadcn/ui-hoz.
@pantoken/foundation	Sass-beállítás felülírás és CSS-réteg a Foundationhöz.
@pantoken/docusaurus, @pantoken/vitepress	Témák Docusaurushoz és VitePresshez.
@pantoken/mintlify	Egy Mintlify docs.json téma (színek + háttér).
@pantoken/storybook	Egy Storybook téma.
@pantoken/pendo	Instructure-stílusú globális CSS Pendo útmutatókhoz.

Bundler-ek

Build-eszköz integrációk.

Csomag	Mihez
@pantoken/vite	Egy Vite plugin virtuális modulokkal és CSS-injekcióval.
@pantoken/next	withPantoken Next.js transpilePackages számára.
@pantoken/webpack	Egy webpack plugin.
@pantoken/postcss	A @pantoken; at-szabály.
@pantoken/tailwind	Egy Tailwind preset.
@pantoken/panda	Egy Panda CSS preset.

Platformok

Natív és oldalgenerátor célok, amelyeket a CLI vagy a saját API-juk bocsát ki.

Csomag	Kimenet
@pantoken/swift	Swift forrás egy SwiftPM manifest-csonkkal.
@pantoken/android	Android XML erőforrások.
@pantoken/compose	Jetpack Compose Kotlin.
@pantoken/flutter	Flutter Dart.
@pantoken/rust	Rust constok egui-hoz vagy iced-hez.
@pantoken/wordpress	Egy WordPress blokk-téma theme.json.
@pantoken/vanilla	Egy Vanilla Forums variables.json.
@pantoken/drupal	Drupal téma-eszközök.
@pantoken/hugo, @pantoken/jekyll	Hugo és Jekyll oldal-adatok.
@pantoken/email	Inline-barát értékek HTML e-mailhez.

Design

Tervezőeszközökhöz.

Csomag	Kimenet
@pantoken/figma	Egy Figma Variables payload.
@pantoken/swatches	Színminták (ASE, GPL, Sketch), valamint egy megtekinthető SVG mintalap.

Pluginok

Opcionális transzformációk, amelyek kiterjesztik a token- vagy CSS-kimenetet. Lásd: Pluginok.

Csomag	Mit ad hozzá
@pantoken/plugin-stacking	Elnevezett z-index mélységek tokenként + .instui-stack-* osztályok.
@pantoken/plugin-visual-debug	A -with-visual-debug elrendezés-hibakereső körvonal.
@pantoken/plugin-simple-icons	Márkaikonok a simple-icons csomagból.
@pantoken/plugin-logos	Instructure termék-logók SVG-ként, data URI-ként és képi tokenként.
@pantoken/plugin-prune-custom-props	Egy PostCSS plugin, amely eltávolítja a nem használt egyéni tulajdonságokat.

Eszközök

Build-, dokumentációs és demó-infrastruktúra magához a monorepohoz. A legtöbb belső használatra van, de a darabok önállóak, így itt dokumentáljuk őket, és néhány önmagában is elérhető az npm-en.

Csomag	Mit csinál
@pantoken/aggregate	Generálja az egyesített pantoken csomag-barrelt és exports a függőségeiből.
@pantoken/validate-generated	A drift-kapu: ellenőrzi, hogy minden generált stíluslap feloldódik a token IR-hez képest.
@pantoken/demo	A saját üzemeltetésű élő-demó futtató: feloldja a @demo specifikációt egy iframe-be, és nyers HTML/CSS/JS-t renderel same-origin módon, token-témával.
@cssdoc/core (külső)	Egy általános CSS-dokumentáció-kinyerő (TSDoc, de CSS-hez): a doc-kommenteket + a CSS AST-t egy modellbe elemzi, amelyet a dokumentáció CSS API-referenciaként bocsát ki. Saját repóban él; link-függőségen keresztül használjuk.

A @pantoken/validate-generated egy egyszer futó szkript (a pnpm run ready hívja meg), így nincs API-oldala; a többinek van.

Dev pluginok

Pluginok, amelyeket az általunk használt eszközökhöz írunk, host szerint csoportosítva. Önállóak és publikálhatók.

Csomag	Mihez csatlakozik
@pantoken/typedoc-plugin-demo	TypeDoc: egy @demo <provider>:<ref> blokk-taget beágyazható demó-kerítéssé alakít.
@pantoken/vite-workspace-orchestrator	Vite: újraépíti a feljebb lévő workspace-csomagokat (és a rájuk épülőket), amikor a forrásuk megváltozik.