pantoken / components

components ​

Beta

@pantoken/components — ett InstUI-liknande CSS-komponentbibliotek, byggt från --instui-*-tokenarna.

De levererade stilmallarna:

  • Base (baseCss) — valfri global dokumentstandard från tokenarna (box-sizing, body reset, sidytans bakgrund, bastextfärg/typsnitt, color-scheme). Den innehåller också focus-outline ringen, så varje fokusbar får en tillgänglig :focus-visible-kontur direkt. Ladda den när pantoken äger sidan.
  • Prose (proseCss) — stilar för renderad markdown/prose HTML (tabeller, rubriker, länkar, listor, kod) scoped till en innehållsrot, så en dokumentationssida eller innehållssektion ser ut som InstUI utan att byta ut DOM mot komponenter. Detta är vad siterenderarna levererar som sin components.css.
  • Components (buttonCss, alertCss, badgeCss, aggregerade av componentsCss) — klassbaserade komponentstilar som appliceras på din egen markup (<button class="instui-button">), för InstUI-utseendet utanför ett komponentramverk. Den --instui-elevation-* skuggskalan (elevationCss) leder detta ark, eftersom tillräckligt många komponenter flyter så att skuggor är en inneboende designegenskap snarare än ett tillägg.
  • Utilities (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, plus en kurerad semantisk-färg/tokenuppsättning) — ett valbart lager av tvärgående klasser. De generiska token→klass-emittorerna (colorUtilitiesCss, tokenUtilitiesCss) finns i @pantoken/utils; detta paket matar dem med de kurerade semantiska namnen, medan @pantoken/plugin-primitives matar den råa paletten.
  • Fonts (valfritt fonts.css) — @font-face-reglerna för Instructure-varumärkets typsnitt. Base applicerar typsnittet; fonts.css laddar woff2-filerna, så texten degraderas snyggt utan dem.

Allt är ren CSS härlett från token-IR, så det följer InstUI via tokenarna utan beroende av InstUI React-paket. För de verkliga, interaktiva komponenterna, använd @pantoken/react-markdown (innehåll) eller @instructure/ui-* (appar).

Detta modul är ett barrel: varje dokumenterat record ligger i sin egen fil under components//utilities//rules//declarations/, författat med lib/ compose-API:t. Registren (COMPONENTS/UTILITIES/RULES/DECLARATIONS) driver aggregering + paritetstestet.

Gränssnitt ​

Variabler ​

Funktioner ​