Έναρξη

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

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

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

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

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. Τρία themes διατίθενται: rebrand (το προεπιλεγμένο, με light-dark() όπου το light και το dark διαφέρουν), canvas, και canvasHighContrast. Τα icons είναι <image> tokens (--instui-icon-<name>) παραγόμενα από το Lucide συν τα προσαρμοσμένα glyphs της Instructure.

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

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

npm i @pantoken/css

import "@pantoken/css/inject";

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

Χρησιμοποιήστε icons οπουδήποτε

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

npm i @pantoken/web-components

import "@pantoken/web-components";

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

CSS tokens

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

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

JavaScript — μεμονωμένο icon vs. ολόκληρο σετ

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

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

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

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

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

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

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

Παραγωγή για native πλατφόρμα

Το CLI γράφει την πηγή των token στο στόχο repo. Καμία εγκατάσταση πέρα από τον runner:

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

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

Συμβουλές συγγραφής για 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 και κανόνες σε ένα consumer repo.
• Αρχιτεκτονική — πώς ταιριάζουν το μοντέλο token, το core και τα outputs.
• Αναφορά API — κάθε εξαγόμενο σύμβολο, παραγόμενο από την πηγή.