pantoken / components

components ​

Bèta

@pantoken/components — een InstUI-look CSS-componentbibliotheek, opgebouwd uit de --instui-* tokens.

De meegeleverde stylesheets:

  • Base (baseCss) — opt-in globale document-standaarden afkomstig van de tokens (box-sizing, body reset, pagina-oppervlak, basistekstkleur/lettertype, color-scheme). Draagt ook de focus-outline ring, zodat elk focusbaar element direct een toegankelijke :focus-visible outline krijgt. Laad het wanneer pantoken de pagina beheert.
  • Prose (proseCss) — stijlen voor gerenderde markdown/prose HTML (tabellen, koppen, links, lijsten, code) gescopet naar een content-root, zodat een documentatiepagina of contentgebied eruitziet als InstUI zonder de DOM voor componenten te moeten vervangen. Dit is wat de site-renderers leveren als hun components.css.
  • Components (buttonCss, alertCss, badgeCss, geaggregeerd door componentsCss) — class-gebaseerde componentstijlen die je op je eigen markup toepast (<button class="instui-button">), voor de InstUI-look buiten een componentframework. De --instui-elevation-* schaduwscale (elevationCss) leidt dit stylesheet, omdat genoeg componenten zweven en schaduwen daardoor een intrinsiek ontwerpattribuut zijn in plaats van een toevoeging.
  • Utilities (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, plus een gecureerde semantic-colour/token set) — een opt-in laag van cross-cutting classes. De generieke token→class emitters (colorUtilitiesCss, tokenUtilitiesCss) wonen in @pantoken/utils; dit pakket voedt ze met de gecureerde semantische namen, terwijl @pantoken/plugin-primitives het ruwe kleurenpalet levert.
  • Fonts (opt-in fonts.css) — de @font-face regels voor de Instructure merklettertypen. Base past het lettertype toe; fonts.css laadt de woff2-bestanden, zodat tekst er zonder het lettertype netjes degradeert.

Alles is pure CSS afgeleid van de token-IR, dus het volgt InstUI via de tokens zonder afhankelijkheid van de InstUI React-pakketten. Voor de echte, interactieve componenten, gebruik @pantoken/react-markdown (content) of @instructure/ui-* (apps).

Deze module is een barrel: elk gedocumenteerd record leeft in zijn eigen bestand onder components//utilities//rules//declarations/, geauthoriseerd met de lib/ compose-API. De registries (COMPONENTS/UTILITIES/RULES/DECLARATIONS) sturen aggregatie + de parity-test.

Interfaces ​

Variabelen ​

Functies ​