Skip to content

pantoken / components

components

Beta

@pantoken/components — InstUI-líkan CSS-íhlutalíbraría, byggt úr --instui-* tokenunum.

Sendar stílblaðskrár:

  • Base (baseCss) — valfrjálsar hnattrænar skjalsstillingar frá tokenunum (box-sizing, body endurstilling, síðu yfirborð, grunn textalit/font, color-scheme). Þessi flokka ber líka ábyrgð á focus-outline hringnum, svo hvert fókus-hæft þátt fær aðgengilegan :focus-visible útlín frá kassanum. Hlaða þegar pantoken á síðuna.
  • Prose (proseCss) — stílar fyrir renderaða markdown/prose HTML (töflur, fyrirsagnir, tenglar, listasetningar, kóði) sem eru afmarkaðir við efnisrót, þannig að skjalsíða eða efnissvæði lítur út eins og InstUI án þess að skipta DOM fyrir íhluti. Þetta er það sem síðugerðir senda sem sína components.css.
  • Components (buttonCss, alertCss, badgeCss, safnað í componentsCss) — klasa-bundnir íhlutastílar sem beitt er á eigið markup (<button class="instui-button">), fyrir InstUI útlit utan íhlutaramma. Stigun skugga í --instui-elevation-* (elevationCss) er leiðandi í þessari skrá, þar sem nóg af íhlutum fljóta þannig að skuggar eru innbyggður hönnunarþáttur frekar en viðbót.
  • Utilities (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, auk kurateraðs semantic-lita/token safns) — valfrjáls lag af þverskurðarklössum. Almennu token→class emitterarnir (colorUtilitiesCss, tokenUtilitiesCss) búa í @pantoken/utils; þetta pakkage gefur þeim kurateruð semantic nöfnin, á meðan @pantoken/plugin-primitives gefur hráa litasafnið.
  • Fonts (valfrjálst fonts.css) — @font-face reglurnar fyrir Instructure vörumerkjafonta. Base beitir leturgerðinni; fonts.css hleður woff2 skrárnar, svo texti rýrnar snyrtilega án hennar.

Allt er hreint CSS afleitt úr token IR, svo það fylgir InstUI gegnum tokenin án háðs á InstUI React pakkanum. Fyrir réttu, gagnvirku íhlutina, notaðu @pantoken/react-markdown (efni) eða @instructure/ui-* (forrit).

Þessi eining er barrel: hvert skráða skráningaratriði býr í sinni eigin skrá undir components//utilities//rules//declarations/, ritað með lib/ compose API-inu. Skráningarnar (COMPONENTS/UTILITIES/RULES/DECLARATIONS) knýja samantekt + jafngildispróf.

Viðmót

Breytur

Föll