Pensaernïaeth

Mae gan pantoken un swydd: datrys tokenau a eiconau dylunio Instructure unwaith, yna ail-lunio’r model hwnnw ar gyfer pob targed. Mae’r haenau isod yn cadw’r ail-lunio hwnnw’n onest ac yn sicrhau nad yw’r pecynnau cyhoeddedig yn ddibynnol ar unrhyw ffynhonnell GitHub-yn-unig.

Y haenau

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 yn dal y cytundebau math, dim byd arall. Dyma ffynhonnell y gwir ar gyfer siâp Token a’r cytundeb plugin, heb ddibyniaethau, felly gall unrhyw becyn ddibynnu arni’n rhydd.
• @pantoken/core yw’r unig becyn sy’n eich cysylltu â’r ffynhonnell upstream. Mae’n datrys tokenau ac eiconau i’r IR canonig ac yn rendro CSS.
• @pantoken/tokens yn vendorio’r IR hwnnw fel JSON statig yn ystod y broses adeiladu. Dyma bwynt datgysylltu: mae pecynnau lawr afon yn darllen @pantoken/tokens, nid @pantoken/core, felly npm i pantoken byth yn cyrraedd am y ffynhonnell GitHub-yn-unig.
• @pantoken/utils yn cario’r cymorth rhannol — yr var(--x) resolver, y regexau cyfeiriad, trosi achos a lliw, a’r gwiriadau drifft sy’n cadw’r allbwn a gynhyrchir yn ffyddlon i’r IR.

Pam mae tokenau yn cael eu vendorio

Mae’r pecyn tokenau upstream yn byw ar GitHub, nid yn npm. Pe bai pob pecyn lawr afon yn ddibynnol arno, byddai npm i pantoken yn methu i unrhyw un heb y mynediad hwnnw. Yn hytrach mae @pantoken/tokens yn datrys y ffynhonnell unwaith yn ystod y broses adeiladu ac yn ysgrifennu’r canlyniad i JSON statig. Mae’r pecynnau cyhoeddedig yn cario’r JSON hwnnw, felly maent yn gosod yn lan o npm, yn cloi ar semver, ac yn gweithio i ffwrdd o’r rhyngrwyd.

Adrannau

Mae pob blwch lawr afon yn ffordd o ddefnyddio’r IR:

• formats/ — troi’r tokenau yn ffeil (CSS, SCSS, Less, Stylus, DTCG).
• renderers/ — integreiddiadau fframwaith a offer (React, Vue, Svelte, MUI, Pendo, a mwy).
• bundlers/ — ategion a rhagsetiau offer adeiladu (Vite, Next, Tailwind, Panda, PostCSS, webpack).
• platforms/ — targedau hynafiol a gweithwyr-safle (Swift, Kotlin, Rust, WordPress, Drupal).
• design/ — pecynnau ar gyfer offer dylunio (Figma, paletiau lliw).
• plugins/ — trawsnewidiadau dewisol sy’n estyn y allbwn token neu CSS. Gweler Plugins.

Allbwn a gynhyrchwyd

Mae pob pecyn sy’n allyrru ffeil yn ei ysgrifennu i gyfeiriadur generated/ y pecyn penodol a mae proses adeiladu yn ei adlewyrchu, felly nid oes dim a gynhyrchir yn cael ei gofrestru. Mae tasg gweithle yn dilysu popeth. Gweler Allbwn a gynhyrchwyd.