pantoken / components

components ​

Beta

@pantoken/components — InstUI-tyylinen CSS-komponenttikirjasto, rakennettu --instui-*-tokenien pohjalta.

Toimitetut tyylitaulukot:

  • Base (baseCss) — opt-in globaalit dokumentin oletusarvot tokeneista (box-sizing, body reset, sivun pinta, perustekstin väri/fontti, color-scheme). Sisältää myös focus-outline -renkaan, joten jokainen fokusoitava saa saavutettavan :focus-visible-reunan valmiina. Lataa se, kun pantoken hallitsee sivua.
  • Prose (proseCss) — renderöityä markdown/prose HTML:ää (taulukot, otsikot, linkit, listat, koodi) tyylittävä sheet, rajattuna sisältöjuureen, jotta dokumenttisivu tai sisältöalue näyttää InstUI:lta ilman DOMin vaihtamista komponenteiksi. Tätä tarjoavat sivun renderöijät components.css-muodossa.
  • Components (buttonCss, alertCss, badgeCss, koottuna componentsCss) — luokkaperusteiset komponenttityylit, joita sovelletaan omaan markupkiin (<button class="instui-button">), InstUI-ilmeen saamiseksi komponenttikehysten ulkopuolella. --instui-elevation-*-varjostason (elevationCss) vuoksi tämä sheet johtaa, koska tarpeeksi monet komponentit leijuvat ja varjot ovat suunnittelun olennainen ominaisuus eivätkä lisuke.
  • Utilities (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, plus valikoitu semanttinen-väri/token-setti) — opt-in-kerros poikkileikkaaville luokille. Generiset token→luokka -emitterit (colorUtilitiesCss, tokenUtilitiesCss) sijaitsevat @pantoken/utils; tämä paketti syöttää niille valikoidut semanttiset nimet, kun taas @pantoken/plugin-primitives syöttää raakan paletin.
  • Fonts (opt-in fonts.css) — @font-face-säännöt Instructuren brändifonteille. Base asettaa fontin; fonts.css lataa woff2-tiedostot, joten teksti heikkenee kauniisti ilman niitä.

Kaikki on puhdasta CSS:ää, johon tokenien IR on johdettu, joten se seuraa InstUI:ta tokenien kautta ilman riippuvuutta InstUI React -paketeista. Todellisiin, interaktiivisiin komponentteihin kannattaa käyttää @pantoken/react-markdown (content) tai @instructure/ui-* (apps).

Tämä moduuli on barrel: kukin dokumentoitu record sijaitsee omassa tiedostossaan polussa components//utilities//rules//declarations/, kirjoitettuna lib/-compose-API:lla. Rekisterit (COMPONENTS/UTILITIES/RULES/DECLARATIONS) ohjaavat aggregaatiota + parity-testin ajamista.

Rajapinnat ​

Muuttujat ​

Funktionit ​