pantoken / components

components ​

Beta

@pantoken/components — una biblioteca de components CSS amb aparença InstUI, construïda a partir dels tokens --instui-*.

Els full d'estils expedits:

  • Base (baseCss) — valors per defecte globals de documents de participació opcional dels tokens (box-sizing, reinici del cos, superfície de pàgina, color/font de text base, color-scheme). També porta l'anella de contorn de focus, per tant cada element enfocable obté un contorn accessible :focus-visible immediat. Carrega-la quan pantoken és propietari de la pàgina.
  • Prosa (proseCss) — estils HTML de markdown/prosa representada (taules, títols, enllaços, llistes, codi) abastats a una arrel de contingut, de manera que una pàgina de docs o una regió de contingut es veu com InstUI sense canviar el DOM per a components. Això és el que els representants del lloc exporten com a seu components.css.
  • Components (buttonCss, alertCss, badgeCss, agregats per componentsCss) — estils de components basats en classes que apliques al teu propi marcat (<button class="instui-button">), per a l'aparença InstUI fora d'un marc de components. L' escala d'ombra --instui-elevation-* (elevationCss) encapçala aquest full, ja que prou components floten que les ombres són un atribut de disseny intrínsec en lloc d'un complement.
  • Utilitats (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, més un conjunt de color semàntic/token revisat) — una capa de participació opcional de classes transversals. Els emissors genèrics de token→classe (colorUtilitiesCss, tokenUtilitiesCss) viuen a @pantoken/utils; aquest paquet els proporciona els noms semàntics revisats, mentre que @pantoken/plugin-primitives alimenta la paleta bruta.
  • Fonts (participació opcional fonts.css) — les regles @font-face pels tipus de lletra de marca d'Instructure. Base aplica la font; fonts.css carrega els woff2s, per tant el text es degrada elegantment sense ella.

Tot és CSS pur derivat de la RI del token, per tant segueix InstUI a través dels tokens sense dependència dels paquets React d'InstUI. Per als components reals i interactius, utilitza @pantoken/react-markdown (contingut) o @instructure/ui-* (aplicacions).

Aquest mòdul és un barril: cada registre documentat viu en el seu propi fitxer sota components//utilities//rules//declarations/, creat amb la lib/ API de composició. Els registres (COMPONENTS/UTILITIES/RULES/DECLARATIONS) impulsen l'agregació + la prova de paritat.

Interfícies ​

Variables ​

Funcions ​