pantoken / components

components ​

Βήτα

@pantoken/components — μια βιβλιοθήκη CSS στοιχείων με εμφάνιση InstUI, κατασκευασμένη από τα tokens --instui-*.

Τα παρεχόμενα φύλλα στυλ:

  • Base (baseCss) — προεπιλεγμένα παγκόσμια στυλ εγγράφου με επιλογή ενεργοποίησης από τα tokens (box-sizing, επαναφορά body, επιφάνεια σελίδας, βασικό χρώμα/γραμματοσειρά κειμένου, color-scheme). Περιλαμβάνει επίσης το focus-outline ring, ώστε κάθε στοιχείο με focus να αποκτά προσβάσιμο περίγραμμα :focus-visible από το κουτί. Φορτώστε το όταν pantoken ελέγχει τη σελίδα.
  • Prose (proseCss) — στυλ για αποδοσμένο markdown/prose HTML (πίνακες, επικεφαλίδες, σύνδεσμοι, λίστες, κώδικας) που περιορίζονται σε μια ρίζα περιεχομένου, ώστε μια σελίδα τεκμηρίωσης ή περιοχή περιεχομένου να φαίνεται σαν InstUI χωρίς αντικατάσταση του DOM με components. Αυτό είναι που αποστέλλουν οι site renderers ως το components.css τους.
  • Components (buttonCss, alertCss, badgeCss, συγκεντρωμένα από componentsCss) — στυλ component βάσει κλάσεων που εφαρμόζετε στο δικό σας markup (<button class="instui-button">), για την εμφάνιση InstUI εκτός framework components. Η κλίμακα σκιάς --instui-elevation-* (elevationCss) ηγείται αυτού του φύλλου, αφού αρκετά components αιωρούνται ώστε οι σκιές να είναι εγγενές χαρακτηριστικό σχεδίασης και όχι πρόσθετο.
  • Utilities (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, συν ένα επιμελημένο σύνολο semantic-colour/token) — ένα επίπεδο διατομεακών κλάσεων με επιλογή ενεργοποίησης. Οι γενικοί εκπομποί token→class (colorUtilitiesCss, tokenUtilitiesCss) ζουν στο @pantoken/utils; αυτό το package τους τροφοδοτεί με τα επιμελημένα semantic ονόματα, ενώ το @pantoken/plugin-primitives τροφοδοτεί την ακατέργαστη παλέτα.
  • Fonts (προαιρετικό fonts.css) — οι κανόνες @font-face για τις γραμματοσειρές της μάρκας Instructure. Το Base εφαρμόζει τη γραμματοσειρά· το fonts.css φορτώνει τα woff2, ώστε το κείμενο να υποβαθμίζεται ομαλά χωρίς αυτά.

Όλα είναι καθαρό CSS παραγόμενο από το token IR, οπότε ακολουθεί το InstUI μέσω των tokens χωρίς εξάρτηση από τα πακέτα InstUI React. Για τα πραγματικά, διαδραστικά components, χρησιμοποιήστε @pantoken/react-markdown (content) ή @instructure/ui-* (apps).

Αυτό το module είναι ένα barrel: κάθε τεκμηριωμένη εγγραφή ζει στο δικό της αρχείο κάτω από components//utilities//rules//declarations/, συγγεγραμμένη με το compose API lib/. Τα registries (COMPONENTS/UTILITIES/RULES/DECLARATIONS) οδηγούν την συγκέντρωση + το parity test.

Διεπαφές ​

Μεταβλητές ​

Συναρτήσεις ​