pantoken / components

components ​

Beta

@pantoken/components — eit InstUI-utseende CSS-komponentbibliotek, bygd frå --instui-*-tokenane.

Dei leverte stilarkene:

  • Base (baseCss) — valfrie globale dokumentstandardar frå tokenane (box-sizing, body reset, sideflate, grunntekstfarge/skriftsnitt, color-scheme). Den inneheld òg fokus-omrisset (focus-outline) som ring, så alle fokuserbare element får eit tilgjengeleg :focus-visible-omriss utan ekstra arbeid. Last denne når pantoken eig sida.
  • Prose (proseCss) — stilar for rendra markdown/prose HTML (tabellar, overskrifter, lenkjer, listar, kode) avgrensa til ein innhaldsløysing, slik at ei dokumentasjonsside eller eit innhaldsområde ser ut som InstUI utan å bytte ut DOM med komponentar. Dette er det side-render-arane leverer som sine components.css.
  • Components (buttonCss, alertCss, badgeCss, aggregated by componentsCss) — klassebaserte komponentstilar du brukar på eiga markup (<button class="instui-button">), for InstUI-utseendet utanfor eit komponentrammeverk. Den --instui-elevation-* skuggeskalaen (elevationCss) leier dette arket, sidan nokre komponentar flyt og skuggar dermed er ein innebygd designatributt heller enn eit tillegg.
  • Utilities (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, plus a curated semantic-colour/token set) — eit valfritt lag med tverrgåande hjelparklassar. Dei generiske token→klasse-utgjevarane (colorUtilitiesCss, tokenUtilitiesCss) ligg i @pantoken/utils; denne pakken matar dei med dei kuraterte semantiske namna, medan @pantoken/plugin-primitives matar den rå paletten.
  • Fonts (opt-in fonts.css) — reglane for @font-face for Instructure-merkeskriftene. Base gjev skrifta; fonts.css lastar woff2-arkiva, så teksten degraderer grasiøst utan dei.

Alt er rein CSS avleidd frå token-IR, så det følgjer InstUI gjennom tokenane utan avhengnad frå InstUI React-pakkane. For dei verkelege, interaktive komponentane, bruk @pantoken/react-markdown (innhald) eller @instructure/ui-* (appar).

Denne modulen er eit barrel: kvar dokumentert record ligg i si eiga fil under components//utilities//rules//declarations/, forfatta med lib/ compose-API-et. Registria (COMPONENTS/UTILITIES/RULES/DECLARATIONS) styrer aggregering og parity-testen.

Grensesnitt ​

Variablar ​

Funksjonar ​