pantoken / components

components ​

Beta

@pantoken/components — una libreria di componenti CSS con aspetto InstUI, costruita dai token --instui-*.

I fogli di stile forniti:

  • Base (baseCss) — impostazioni globali opzionali del documento derivate dai token (box-sizing, reset del body, superficie della pagina, colore/font di testo di base, color-scheme). Contiene anche l'anello di focus-outline, quindi ogni elemento focalizzabile ottiene un outline :focus-visible accessibile di default. Caricalo quando pantoken controlla la pagina.
  • Prose (proseCss) — stili per HTML markdown/prosa renderizzato (tabelle, intestazioni, link, elenchi, codice) limitati a una radice di contenuto, così una pagina di documentazione o un'area di contenuto ha l'aspetto InstUI senza sostituire il DOM con componenti. Questo è ciò che i renderer del sito forniscono come loro components.css.
  • Components (buttonCss, alertCss, badgeCss, aggregati da componentsCss) — stili di componenti basati su classi da applicare al proprio markup (<button class="instui-button">), per l'aspetto InstUI al di fuori di un framework di componenti. La scala di ombre --instui-elevation-* (elevationCss) guida questo foglio, poiché molti componenti fluttuano abbastanza da rendere le ombre un attributo intrinseco del design piuttosto che un'aggiunta.
  • Utilities (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, più un set curato di nomi semantici/di token colore) — un livello opzionale di classi trasversali. I generici emitter token→class (colorUtilitiesCss, tokenUtilitiesCss) risiedono in @pantoken/utils; questo package fornisce loro i nomi semantici curati, mentre @pantoken/plugin-primitives fornisce la palette grezza.
  • Fonts (opzionale fonts.css) — le regole @font-face per i font del brand Instructure. Base applica il font; fonts.css carica i woff2, così il testo degrada con grazia se non sono disponibili.

Tutto è puro CSS derivato dall'IR dei token, quindi segue InstUI tramite i token senza dipendere dai pacchetti React di InstUI. Per i componenti reali e interattivi, usare @pantoken/react-markdown (contenuti) o @instructure/ui-* (app).

Questo modulo è un barrel: ogni record documentato vive in un proprio file sotto components//utilities//rules//declarations/, scritto con l'API di composizione lib/. I registri (COMPONENTS/UTILITIES/RULES/DECLARATIONS) guidano l'aggregazione + il test di parità.

Interfacce ​

Variabili ​

Funzioni ​