pantoken / components

components ​

Beta

@pantoken/components — pustaka komponen CSS bergaya InstUI, dibangun dari token --instui-*.

Stylesheet yang dikirim:

  • Base (baseCss) — default dokumen global opsional dari token (box-sizing, reset body, permukaan halaman, warna/jenis huruf teks dasar, color-scheme). Ini juga membawa cincin focus-outline, sehingga setiap elemen yang bisa difokus mendapatkan outline :focus-visible yang dapat diakses langsung. Muatkan saat pantoken mengelola halaman.
  • Prose (proseCss) — gaya untuk HTML markdown/prosa yang dirender (tabel, heading, tautan, daftar, kode) yang dibatasi ke root konten, sehingga halaman dokumen atau area konten terlihat seperti InstUI tanpa mengganti DOM dengan komponen. Inilah yang dikirim renderer situs sebagai components.css mereka.
  • Components (buttonCss, alertCss, badgeCss, digabung oleh componentsCss) — gaya komponen berbasis kelas yang diterapkan pada markup sendiri (<button class="instui-button">), untuk tampilan InstUI di luar kerangka komponen. Skala bayangan --instui-elevation-* (elevationCss) memimpin lembar ini, karena cukup banyak komponen yang mengambang sehingga bayangan menjadi atribut desain intrinsik daripada tambahan.
  • Utilities (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, ditambah set token/warna semantik yang dikurasi) — lapisan opsional kelas lintas-potong. Pemancar token→kelas generik (colorUtilitiesCss, tokenUtilitiesCss) berada di @pantoken/utils; paket ini memberi mereka nama semantik yang dikurasi, sementara @pantoken/plugin-primitives memberi palet mentah.
  • Fonts (opsional fonts.css) — aturan @font-face untuk font merek Instructure. Base menerapkan font; fonts.css memuat woff2s, sehingga teks menurun dengan baik tanpa font tersebut.

Semua murni CSS yang diturunkan dari IR token, jadi mengikuti InstUI melalui token tanpa ketergantungan pada paket React InstUI. Untuk komponen interaktif yang sesungguhnya, gunakan @pantoken/react-markdown (konten) atau @instructure/ui-* (aplikasi).

Modul ini adalah barrel: setiap record terdokumentasi berada di file sendiri di bawah components//utilities//rules//declarations/, ditulis dengan API komposisi lib/. Registri (COMPONENTS/UTILITIES/RULES/DECLARATIONS) mendorong agregasi + tes parity.

Antarmuka ​

Variabel ​

Fungsi ​