pantoken / components

components ​

Bêta

@pantoken/components — une bibliothèque de composants CSS au look InstUI, construite à partir des tokens --instui-*.

Les feuilles de style livrées :

  • Base (baseCss) — valeurs par défaut globales optionnelles du document dérivées des tokens (box-sizing, reset du body, surface de page, couleur/ police de texte de base, color-scheme). Elle transporte aussi l'anneau de focus-outline, de sorte que chaque élément focalisable obtient une outline accessible :focus-visible par défaut. Chargez-la quand pantoken contrôle la page.
  • Prose (proseCss) — styles pour le HTML markdown/prose rendu (tableaux, titres, liens, listes, code) scindés à la racine de contenu, afin qu'une page de documentation ou une région de contenu ressemble à InstUI sans remplacer le DOM par des composants. C'est ce que les renderers de site publient comme leur components.css.
  • Components (buttonCss, alertCss, badgeCss, agrégés par componentsCss) — styles de composants basés sur des classes que l'on applique à son propre balisage (<button class="instui-button">), pour l'apparence InstUI en dehors d'un framework de composants. L'échelle d'ombre --instui-elevation-* (elevationCss) guide cette feuille, puisque suffisamment de composants flottent pour que les ombres soient un attribut de conception intrinsèque plutôt qu'un ajout.
  • Utilities (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, plus un ensemble de couleurs sémantiques/tokens sélectionné) — une couche optionnelle de classes transversales. Les générateurs génériques token→class (colorUtilitiesCss, tokenUtilitiesCss) vivent dans @pantoken/utils; ce package leur fournit les noms sémantiques sélectionnés, tandis que @pantoken/plugin-primitives fournit la palette brute.
  • Fonts (optionnelles fonts.css) — les règles @font-face pour les polices de la marque Instructure. Base applique la police ; fonts.css charge les woff2, de sorte que le texte se dégrade gracieusement sans elles.

Tout est du CSS pur dérivé de l'IR des tokens, donc cela suit InstUI via les tokens sans dépendre des packages React d'InstUI. Pour les composants réels et interactifs, utilisez @pantoken/react-markdown (content) ou @instructure/ui-* (apps).

Ce module est un barrel : chaque enregistrement documenté vit dans son propre fichier sous components//utilities//rules//declarations/, rédigé avec l'API de composition lib/. Les registres (COMPONENTS/UTILITIES/RULES/DECLARATIONS) pilotent l'agrégation + le test de parité.

Interfaces ​

Variables ​

Fonctions ​