pantoken / components

components ​

Beta

@pantoken/components — yon bibliyotèk konpozan CSS ki gen aparans InstUI, konstrui soti nan tokens --instui-*.

Fèy stil yo ki vini ak pake a:

  • Base (baseCss) — default dokiman global opsyonèl ki sòti nan tokens yo (box-sizing, reset body, sifas paj la, koulè/font tèks baz, color-scheme). Li pote tou bag kontou fokus la, konsa chak eleman ki ka resevwa fokus gen yon kontou aksesib :focus-visible dirèkteman. Chaje li lè pantoken posede paj la.
  • Prose (proseCss) — stil pou markdown/prose HTML rann (tab, tit, lyen, lis, kòd) ki gen sikwon nan yon rasin kontni, konsa yon paj dokiman oswa yon rejyon kontni sanble ak InstUI san yo pa ranplase DOM la ak konpozan. Sa a se sa randerè sit yo livre kòm components.css yo.
  • Components (buttonCss, alertCss, badgeCss, aggregated by componentsCss) — estil konpozan ki baze sou klas pou aplike sou pwòp makup ou (<button class="instui-button">), pou aparans InstUI deyò yon kad konpozan. Echèl lonbraj --instui-elevation-* la (elevationCss) dirije fichye sa a, paske ase konpozan flote pou lonbraj vin yon atribi konsepsyon entètnik olye ke yon akseswa.
  • Utilities (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, plus a curated semantic-colour/token set) — yon kouch opsyonèl nan klas kwa-koupe. Emetè jeneral token→class yo (colorUtilitiesCss, tokenUtilitiesCss) rete nan @pantoken/utils; pake sa a bay yo non semantic ki kouri, pandan ke @pantoken/plugin-primitives bay palèt yo anbrèf.
  • Fonts (opsyonèl fonts.css) — règleman @font-face pou polis mak Instructure la. Baz aplike polis la; fonts.css chaje woff2 yo, konsa tèks la degrade grasyeuzman san li.

Tout bagay se CSS pwòp ki sòti nan IR token an, konsa li swiv InstUI atravè tokens yo san okenn dependans sou pake React InstUI yo. Pou konpozan reyèl, entèaktif, itilize @pantoken/react-markdown (kontni) oswa @instructure/ui-* (aplikasyon).

Modil sa a se yon barik: chak dosye dokimante rete nan pwòp fichye li anba components//utilities//rules//declarations/, ekri ak API konpozisyon lib/. Rejis yo (COMPONENTS/UTILITIES/RULES/DECLARATIONS) kondwi agregasyon + tès parite a.

Entèfas ​

Varyab ​

Fonksyon ​