pantoken / components

components ​

Beta

@pantoken/components — et InstUI-look CSS-komponentbibliotek, bygget ud fra --instui-* tokens.

De leverede stylesheets:

  • Base (baseCss) — opt-in globale dokumentstandards fra tokens (box-sizing, body reset, page surface, base text colour/font, color-scheme). Det bærer også focus-outline ring, så hver fokusserbar får en tilgængelig :focus-visible outline ud af boksen. Indlæs det når pantoken ejer siden.
  • Prose (proseCss) — styles rendered markdown/prose HTML (tables, headings, links, lists, code) områdebegræns til en content root, så en docs side eller content region ser ud som InstUI uden at bytte DOM'en for komponenter. Dette er hvad site renderers leverer som deres components.css.
  • Components (buttonCss, alertCss, badgeCss, aggregeret af componentsCss) — class-baserede komponent-styles du anvender på dit eget markup (<button class="instui-button">), for InstUI look uden for en komponent-framework. The --instui-elevation-* shadow scale (elevationCss) leder dette sheet, siden nok komponenter flyder at shadows er et indre design-attribut snarere end et tilføjelse.
  • Utilities (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, plus en kurateret semantic-colour/token set) — et opt-in lag af cross-cutting classes. Det generiske token→class emitters (colorUtilitiesCss, tokenUtilitiesCss) bor i @pantoken/utils; denne package fodrer dem de kuraterede semantic navne, mens @pantoken/plugin-primitives fodrer det rå palette.
  • Fonts (opt-in fonts.css) — @font-face regler for Instructure brand fonts. Base anvender font; fonts.css loader woff2s, så tekst nedbrydes elegant uden det.

Alt er ren CSS afledt fra token IR, så det følger InstUI gennem tokens uden afhængighed af InstUI React packages. For de virkelige, interaktive komponenter, brug @pantoken/react-markdown (content) eller @instructure/ui-* (apps).

Dette modul er et barrel: hvert dokumenteret record lever i sin egen fil under components//utilities//rules//declarations/, skrevet med lib/ compose API. De registre (COMPONENTS/UTILITIES/RULES/DECLARATIONS) driver aggregation + parity test.

Grænseflader ​

Variabler ​

Funktioner ​