معماری

pantoken یک کار دارد: توکن‌ها و آیکون‌های طراحی Instructure را یک‌بار حل کند، سپس آن مدل را برای هر هدف بازشکل دهد. لایه‌های زیر آن بازشکل‌دهی را معتبر نگه می‌دارند و بسته‌های منتشرشده را از هر منبع upstream فقط-گیت‌هابی جدا نگه می‌دارند.

لایه‌ها

flowchart TD upstream["@instructure/instructure-design-tokens<br/>(upstream, GitHub-only)"] core["@pantoken/core<br/>buildTokens() / toCss() - resolves upstream into the IR"] tokens["@pantoken/tokens<br/>the IR, vendored as static JSON per theme<br/>(the decoupling point)"] formats["formats/<br/>(css, scss, ...)"] renderers["renderers/<br/>(react, vue, web-components, ...)"] platforms["platforms/<br/>(swift, wordpress, ...)"] design["design/<br/>(figma, swatches)"] bundlers["bundlers/<br/>(vite, tailwind, ...)"] upstream --> core --> tokens tokens --> formats tokens --> renderers tokens --> platforms tokens --> design tokens --> bundlers

• @pantoken/model قراردادهای نوع را نگه می‌دارد، و هیچ چیز دیگری. این منبع حقیقت برای شکل Token و قرارداد پلاگین است، با صفر وابستگی، بنابراین هر بسته‌ای می‌تواند آزادانه به آن وابسته باشد.
• @pantoken/core تنها بسته‌ای است که به منبع upstream دست می‌زند. این بسته توکن‌ها و آیکون‌ها را به IR کانونیکال تبدیل می‌کند و CSS را رندر می‌کند.
• @pantoken/tokens آن IR را در زمان ساخت به‌صورت JSON استاتیک درون‌سپاری می‌کند. این نقطه جداسازی است: بسته‌های پایین‌دست @pantoken/tokens را می‌خوانند، هرگز @pantoken/core را، بنابراین npm i pantoken هرگز به upstream فقط-گیت‌هابی دسترسی پیدا نمی‌کند.
• @pantoken/utils کمک‌کننده‌های مشترک را حمل می‌کند — حل‌کننده var(--x)، رِگِکس‌های ارجاع، تبدیل حروف و رنگ، و چک‌های drift که خروجی تولیدشده را وفادار به IR نگه می‌دارد.

چرا توکن‌ها درون‌سپاری می‌شوند

پکیج توکن upstream روی GitHub است، نه npm. اگر هر بسته‌ی پایین‌دست به آن وابسته می‌شد، npm i pantoken برای هر کسی که آن دسترسی را نداشت شکست می‌خورد. در عوض @pantoken/tokens یک‌بار در زمان ساخت upstream را حل می‌کند و نتیجه را به JSON استاتیک می‌نویسد. بسته‌های منتشرشده آن JSON را حمل می‌کنند، بنابراین از npm به‌خوبی نصب می‌شوند، به semver چسبیده می‌شوند و آفلاین نیز کار می‌کنند.

باکت‌ها

هر باکت پایین‌دست یک روش مصرف IR است:

• formats/ — تبدیل توکن‌ها به یک فایل (CSS، SCSS، Less، Stylus، DTCG).
• renderers/ — یکپارچگی با فِریم‌ورک‌ها و ابزارها (React، Vue، Svelte، MUI، Pendo و غیره).
• bundlers/ — پلاگین‌ها و پریست‌های ابزار ساخت (Vite، Next، Tailwind، Panda، PostCSS، webpack).
• platforms/ — اهداف بومی و سازندگان سایت (Swift، Kotlin، Rust، WordPress، Drupal).
• design/ — payloadها برای ابزارهای طراحی (Figma، پالت‌های رنگ).
• plugins/ — تبدیل‌های اختیاری که خروجی توکن یا CSS را گسترش می‌دهند. مشاهده کنید Plugins.

خروجی تولیدشده

هر بسته‌ای که فایلی منتشر می‌کند آن را در دایرکتوری generated/ مخصوص بسته می‌نویسد که یک کار ساخت بازتولید می‌کند، بنابراین هیچ چیز تولیدشده‌ای کمیت نمی‌شود. یک تسک workspace همه‌ی آن را اعتبارسنجی می‌کند. ببینید Generated output.