pantoken / components

components ​

Beta

@pantoken/components — et InstUI-inspirert CSS-komponentbibliotek, bygget fra --instui-*-tokensene.

De leverte stilarkene:

  • Base (baseCss) — valgfrie globale dokumentstandarder fra tokensene (box-sizing, body reset, sidens overflate, grunnleggende tekstfarge/ -font, color-scheme). Den inneholder også fokus-omrisset (focus-outline) som ring, så alle fokusbare elementer får et tilgjengelig :focus-visible-omriss rett ut av boksen. Last den når pantoken eier siden.
  • Prose (proseCss) — stiler for rendret markdown/prose HTML (tabeller, overskrifter, lenker, lister, kode) avgrenset til en innholdstopp, slik at en dokumentside eller innholdsregion ser ut som InstUI uten å bytte DOM-en til komponenter. Dette er det site-rendererne leverer som deres components.css.
  • Components (buttonCss, alertCss, badgeCss, aggregert av componentsCss) — klassebaserte komponentstiler du bruker på ditt eget markup (<button class="instui-button">), for InstUI-utseendet utenfor et komponentrammeverk. Den --instui-elevation-* skygge-skalaen (elevationCss) leder dette arkivet, siden nok komponenter flyter slik at skygger er en innebygd designegenskap snarere enn et tillegg.
  • Utilities (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, pluss et kuratert sett med semantiske-farger/tokens) — et valgfrie lag med tverrgående klasser. De generiske token→klasse-emitterne (colorUtilitiesCss, tokenUtilitiesCss) ligger i @pantoken/utils; dette pakken mater dem med de kuraterte semantiske navnene, mens @pantoken/plugin-primitives leverer den rå paletten.
  • Fonts (valgfrie fonts.css) — @font-face-reglene for Instructure-brand-fontene. Base bruker fonten; fonts.css laster woff2-filene, slik at teksten degraderer pent uten dem.

Alt er ren CSS utledet fra token-IR, så det følger InstUI gjennom tokensene uten avhengighet til InstUI React-pakkene. For de ekte, interaktive komponentene, bruk @pantoken/react-markdown (innhold) eller @instructure/ui-* (apper).

Denne modulen er en barrel: hvert dokumenterte register lever i sin egen fil under components//utilities//rules//declarations/, forfattet med lib/ compose-APIet. Registrene (COMPONENTS/UTILITIES/RULES/DECLARATIONS) styrer aggregering + paritetstesten.

Grensesnitt ​

Variabler ​

Funksjoner ​