pantoken / components

components ​

Beta

@pantoken/components — eine CSS-Komponentenbibliothek im InstUI-Look, aufgebaut aus den --instui-* Tokens.

Die ausgelieferten Stylesheets:

  • Base (baseCss) — optionale globale Dokument-Defaults aus den Tokens (box-sizing, body reset, Seitenoberfläche, Basistextfarbe/-schrift, color-scheme). Enthält außerdem den Fokus-Outline Ring, sodass jedes fokussierbare Element von Haus aus eine zugängliche :focus-visible-Outline erhält. Lade es, wenn pantoken die Seite steuert.
  • Prose (proseCss) — Styles für gerendertes Markdown/Prose-HTML (Tabellen, Überschriften, Links, Listen, Code) auf eine Inhaltswurzel begrenzt, sodass eine Dokumentseite oder ein Inhaltsbereich wie InstUI aussieht, ohne das DOM gegen Komponenten auszutauschen. Das ist, was die Site-Renderer als ihr components.css ausliefern.
  • Components (buttonCss, alertCss, badgeCss, zusammengefasst in componentsCss) — klassenbasierte Komponentenstile, die auf eigenes Markup angewendet werden (<button class="instui-button">), für den InstUI-Look außerhalb eines Komponenten-Frameworks. Die --instui-elevation-* Shadow-Skala (elevationCss) führt dieses Stylesheet an, da genügend Komponenten schwebend sind, sodass Schatten ein intrinsisches Designelement statt eines Add-ons sind.
  • Utilities (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, plus eine kuratierte semantische Farb-/Token-Sammlung) — eine optionale Schicht von querwirkenden Klassen. Die generischen Token→Klassen-Emitter (colorUtilitiesCss, tokenUtilitiesCss) leben in @pantoken/utils; dieses Paket versorgt sie mit den kuratierten semantischen Namen, während @pantoken/plugin-primitives die rohe Palette liefert.
  • Fonts (optional fonts.css) — die @font-face Regeln für die Instructure-Brand-Schriften. Base wendet die Schrift an; fonts.css lädt die woff2s, sodass Text ohne sie degradierend dargestellt wird.

Alles ist reines CSS, abgeleitet aus dem Token-IR, sodass es InstUI über die Tokens nachverfolgt, ohne von den InstUI React-Paketen abhängig zu sein. Für die echten, interaktiven Komponenten verwende @pantoken/react-markdown (Content) oder @instructure/ui-* (Apps).

Dieses Modul ist ein Barrel: Jeder dokumentierte Record lebt in einer eigenen Datei unter components//utilities//rules//declarations/, verfasst mit der lib/ Compose-API. Die Registries (COMPONENTS/UTILITIES/RULES/DECLARATIONS) steuern Aggregation + den Paritäts-Test.

Schnittstellen ​

Variablen ​

Funktionen ​