Ξεκινώντας

Το Pantoken παίρνει τα design tokens και τα εικονίδια του Instructure UI, τα επιλύει μία φορά και διαμορφώνει αυτό το ενιαίο μοντέλο σε πακέτα για πολλές πλατφόρμες: απλά stylesheets, SCSS και Less, React και Vue και Svelte, Tailwind και Panda, native Swift και Kotlin, WordPress και Drupal, Figma, και άλλα.

Εγκαθιστάται το μικρότερο πακέτο που ταιριάζει στην εργασία σας. Όλα επίσης επανεξάγονται από το ενιαίο πακέτο pantoken, οπότε μπορείτε να ξεκινήσετε από εκεί και να περιορίσετε αργότερα.

Δημιουργία έργου εκκίνησης

Ο ταχύτερος τρόπος για να δοκιμάσετε το pantoken: δημιουργήστε ένα starter project με αυτό ήδη εγκατεστημένο και συνδεδεμένο.

npx create-pantoken-app

Πλατφόρμες: components (απλό HTML/CSS), react, vue, svelte, web-components, angular. Δείτε @pantoken/scaffold για --dir <path> και προγραμματιστική χρήση.

Χρησιμοποιείται AI coding agent; Δεν χρειάζεται εγκατάσταση — δείξτε τον απευθείας στην skill:

Ανάκτησε το create.pantoken.app/SKILL.md και ακολούθησέ το για να ρυθμίσεις το pantoken σε αυτό το έργο.

Αν προτιμάτε να ενσωματώσετε μόνιμα τους κανόνες agent του pantoken στο repo (AGENTS.md, κανόνες editor, τοπικό αντίγραφο αυτής της skill), τρέξτε npx @pantoken/ai init αντ' αυτού.

Το μοντέλο token

Τα tokens είναι CSS custom properties με όνομα --instui-<group>-<name>, για παράδειγμα --instui-color-background-brand ή --instui-spacing-space-md. Τρία θέματα αποστέλλονται: rebrand (το προεπιλεγμένο, με light-dark() όπου διαφέρουν το light και το dark), canvas, και canvasHighContrast. Τα εικονίδια είναι <image> tokens (--instui-icon-<name>) που προέρχονται από το Lucide συν τα προσαρμοσμένα glyphs της Instructure.

Στυλιζάρισμα μιας web εφαρμογής

Εγκαταστήστε το stylesheet και εισάγετέ το μια φορά. Ορίζει κάθε --instui-* ιδιότητα, έτσι μπορείτε να τις αναφέρετε απευθείας από το δικό σας CSS.

npm i @pantoken/css

import "@pantoken/css/inject";

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

Χρήση εικονιδίων οπουδήποτε

Το web component λειτουργεί σε οποιοδήποτε framework, χωρίς porting.

npm i @pantoken/web-components

import "@pantoken/web-components";

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

Σύμβολα CSS

Τα εικονίδια είναι CSS custom properties (--instui-icon-<name>). Φορτώστε το stylesheet μια φορά και αναφερθείτε σε οποιοδήποτε εικονίδιο ως mask-image ή background-image — χωρίς ανάγκη για εισαγωγή ανά εικονίδιο.

.my-icon {
  mask-image: var(--instui-icon-check-mark);
}

JavaScript — μεμονωμένο εικονίδιο vs. ολόκληρο σύνολο

@pantoken/icons αποκαλύπτει δύο ονομαστικές εξαγωγές. Χρησιμοποιήστε iconsByName για να τραβήξετε ένα εικονίδιο χωρίς να διατρέξετε ολόκληρο το array:

import { iconsByName } from "@pantoken/icons";

const icon = iconsByName.get("check-mark"); // only one lookup
icon?.svg; // inline SVG markup

Χρησιμοποιήστε icons όταν χρειάζεστε ολόκληρο το σετ (π.χ. για να χτίσετε έναν picker):

import { icons } from "@pantoken/icons";

icons.length; // ~1,800
icons.filter((i) => i.source === "lucide");

Και οι δύο εξαγωγές φορτώνουν το πλήρες IR κατά την αρχικοποίηση του module — δεν υπάρχει tree-shaking ανά εικονίδιο σε αυτό το επίπεδο. Για ελαφριά φόρτωση μόνο με CSS, χρησιμοποιήστε τον CDN picker για να δημιουργήσετε ένα συνδυασμένο URL μόνο για τα εικονίδια που χρειάζεστε.

Γεννήστε για μια native πλατφόρμα

Το CLI γράφει την πηγή των token σε ένα target repo. Δεν απαιτείται άλλη εγκατάσταση πέραν του runner:

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

Δείτε το pantoken CLI για κάθε στόχο.

Συμβουλές authoring για VS Code

@pantoken/pantoken πλέον αποστέλλει αρχεία VS Code custom-data ώστε downstream projects να έχουν συμπλήρωση κλάσεων και tokens σε HTML/CSS χωρίς να εγκαταστήσουν ειδική επέκταση pantoken.

1. Εγκαταστήστε το ενιαίο πακέτο:

npm i @pantoken/pantoken

1. Δείξτε το VS Code στο αποστελλόμενο custom-data JSON από το workspace του καταναλωτή σας:

{
  "html.customData": ["./node_modules/@pantoken/pantoken/dist/html-custom-data.json"],
  "css.customData": ["./node_modules/@pantoken/pantoken/dist/css-custom-data.json"]
}

1. Επαναφορτώστε το VS Code (ή τρέξτε "Developer: Reload Window") για να εφαρμόσετε τα νέα δεδομένα.

Αυτό ενεργοποιεί προτάσεις για instui-* class tokens (και -modifier class tokens) καθώς και --instui-* custom properties.

Τι ακολουθεί

• Ο χάρτης πακέτων — ποιο πακέτο να χρησιμοποιήσετε ανά εργασία.
• @pantoken/ai — εγκαταστήστε agent assets και κανόνες σε ένα consumer repo.
• Αρχιτεκτονική — πώς το μοντέλο token, το core και τα outputs συνεργάζονται.
• API reference — κάθε εξαγόμενο σύμβολο, παραγόμενο από τον πηγαίο κώδικα.