Skip to content

Achitekti ​

pantoken gen yon sèl travay: rezoud tokens konsepsyon Instructure yo ak ikòn yo yon sèl fwa, epi re-fòme modèl sa a pou chak sib. Kouch ki anba yo kenbe refòm sa a onèt epi fè pakè yo pibliye lib de nenpòt upstream ki sèlman sou GitHub.

Kouch yo ​

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 kenbe kontra tip yo, e pa anyen lòt. Li se sous verite pou fòm Token ak kontra plugin nan, san okenn depandans, konsa nenpòt pake ka depann sou li lib.
  • @pantoken/core se sèl pake ki manyen sous upstream la. Li rezoud tokens ak ikòn yo nan IR kanonik la epi rann CSS.
  • @pantoken/tokens founi IR sa a kòm JSON estatik nan tan build. Sa a se pwen dekoupaj la: pake downstream yo li @pantoken/tokens, pa janm @pantoken/core, konsa npm i pantoken pa janm ale chèche upstream ki sèlman sou GitHub la.
  • @pantoken/utils pote èd pataje yo — rezolisè var(--x), regex referans yo, konvèsyon ka ak koulè, ak chèk drift yo ki kenbe rezilta jenere yo fidèl ak IR la.

Poukisa tokens yo vann (vendored) ​

Pake token upstream la sou GitHub, pa sou npm. Si chak pake downstream te depann sou li, npm i pantoken ta echwe pou nenpòt moun ki pa gen aksè sa a. Olye de sa @pantoken/tokens rezoud upstream la yon sèl fwa nan tan build epi ekri rezilta a kòm JSON estatik. Pake pibliye yo pote JSON sa a, konsa yo enstale pwòp soti nan npm, fikse sou semver, epi travay offline.

Bokit (Buckets) ​

Chak bokit downstream se yon fason pou konsome IR la:

  • formats/ — tounen tokens yo an yon fichye (CSS, SCSS, Less, Stylus, DTCG).
  • renderers/ — entegrasyon kad ak zouti (React, Vue, Svelte, MUI, Pendo, ak plis).
  • bundlers/ — plugin ak preset zouti build (Vite, Next, Tailwind, Panda, PostCSS, webpack).
  • platforms/ — sib natif ak jeneratè sit (Swift, Kotlin, Rust, WordPress, Drupal).
  • design/ — payloads pou zouti konsepsyon (Figma, echantiyon koulè).
  • plugins/ — transfòmasyon opsyonèl ki elaji token oswa pwodiksyon CSS la. Gade Plugins.

Rezilta jenere ​

Chak pake ki emèt yon fichye ekri li nan yon repètwa generated/ pa-pake ke yon build reprodwi, konsa anyen jenere pa komite. Yon task workspace valide tout sa. Gade Generated output.