Kezdeti lépések

A pantoken az Instructure UI dizájntokenjeit és ikonjait veszi, egyszer feloldja őket, majd ezt az egyetlen modellt sokféle platformhoz alakítja át csomagokká: egyszerű stíluslapokká, SCSS-sé és Less-szé, Reacthez, Vue-hoz és Svelte-hez, Tailwindhez és Pandához, natív Swifthez és Kotlinhoz, WordPresshez és Drupalhoz, Figmához és sok máshoz.

A feladathoz illő legkisebb csomagot telepítsd. Mindent újraexportál az egységes pantoken csomag is, így itt is elkezdheted, és később szűkítheted.

A tokenmodell

A tokenek --instui-<group>-<name> nevű CSS egyéni tulajdonságok, például --instui-color-background-brand vagy --instui-spacing-space-md. Három téma érhető el: rebrand (az alapértelmezett, light-dark() tokenekkel ott, ahol a világos és a sötét eltér), canvas és canvasHighContrast. Az ikonok <image> tokenek (--instui-icon-<name>), amelyek a Lucide-ból és az Instructure egyedi glifáiból származnak.

Webalkalmazás stílusozása

Telepítsd a stíluslapot, és importáld egyszer. Minden --instui-* tulajdonságot definiál, így közvetlenül hivatkozhatsz rájuk a saját CSS-edből.

npm i @pantoken/css

import "@pantoken/css/inject";

.button {
  background: var(--instui-color-background-brand);
  padding: var(--instui-spacing-space-md);
}

Ikonok használata bárhol

A webkomponens bármelyik keretrendszerben működik, portolás nélkül.

npm i @pantoken/web-components

import "@pantoken/web-components";

<instui-icon name="check-mark"></instui-icon>

Generálás natív platformra

A CLI a tokenforrást egy célrepóba írja. A futtatón kívül nincs szükség telepítésre:

npx pantoken generate swift --out ./ios/Tokens --icons arrow-left,check-mark

Az összes célhoz lásd a pantoken CLI-t.

Hogyan tovább

• A csomagtérkép – melyik csomagot érdemes választani feladat szerint.
• Architektúra – hogyan illeszkedik össze a tokenmodell, a mag és a kimenetek.
• API-hivatkozás – minden exportált szimbólum, a forrásból generálva.