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 fournies :

  • Base (baseCss) — valeurs globales optionnelles dérivées des tokens (box-sizing, réinitialisation du body, surface de page, couleur/typographie de base, color-scheme). Elle inclut aussi l’anneau de focus-outline, donc tout élément focalisable obtient par défaut un contour :focus-visible accessible. Charger lorsque pantoken gère la page.
  • Prose (proseCss) — styles pour le HTML rendu par markdown/prose (tableaux, titres, liens, listes, code) scopiés à une racine de contenu, pour qu’une page de docs ou une région de contenu ait l’apparence InstUI sans remplacer le DOM par des composants. C’est ce que les renderers du site livrent comme leur components.css.
  • Composants (buttonCss, alertCss, badgeCss, agrégés par componentsCss) — styles de composants basés sur des classes à appliquer à son propre balisage (<button class="instui-button">), pour l’apparence InstUI hors d’un framework de composants. L’échelle d’ombre --instui-elevation-* (elevationCss) pilote cette feuille, puisque suffisamment de composants flottent pour que les ombres soient un attribut de design intrinsèque plutôt qu’un ajout.
  • Utilitaires (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, plus un jeu curaté de tokens/couleurs sémantiques) — une couche optionnelle de classes transversales. Les émetteurs génériques token→classe (colorUtilitiesCss, tokenUtilitiesCss) résident dans @pantoken/utils; ce package leur fournit les noms sémantiques sélectionnés, tandis que @pantoken/plugin-primitives fournit la palette brute.
  • Polices (optionnel fonts.css) — les règles @font-face pour les polices de la marque Instructure. Base applique la police; fonts.css charge les woff2, donc le texte se dégrade élégamment sans elles.

Tout est du CSS pur dérivé de l’IR des tokens, donc ça suit InstUI via les tokens sans dépendre des paquets React d’InstUI. Pour les vrais composants interactifs, utiliser @pantoken/react-markdown (contenu) 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 ​