pantoken / components

components ​

Bêta

@pantoken/components — llyfrgell gydrannau CSS â golwg InstUI, wedi’i hadeiladu o'r tokenau --instui-*.

Y taflenni steil a anfonir:

  • Base (baseCss) — diofynion dogfen byd-eang dewisol o’r tokenau (box-sizing, ailosod corff, arwyneb tudalen, lliw/testun sylfaen/ffont, color-scheme). Mae hefyd yn cynnwys y cylch canolbwyntio-outline, felly mae gan bob elfen y gellid ei ffókusio allu cyrraedd :focus-visible yn hygyrch allan o’r blwch. Llwythwch ef pan mae pantoken yn berchen ar y dudalen.
  • Prose (proseCss) — steiliau ar gyfer HTML marciadwy/prose a gyflwynir (tablau, penawdau, dolenni, rhestri, cod) wedi’u cwmpasu i ganghennad cynnwys, fel bod tudalen ddogfen neu ran o gynnwys yn edrych fel InstUI heb newid y DOM am gydrannau. Hwn yw'r hyn y mae rendrwyr y safle yn ei anfon fel eu components.css.
  • Components (buttonCss, alertCss, badgeCss, aggregated by componentsCss) — steiliau cydrannau seiliedig ar ddosbarth y gellir eu defnyddio ar eich own markup (<button class="instui-button">), ar gyfer golwg InstUI y tu allan i fframewaith cydran. Mae'r raddfa cysgod --instui-elevation-* (elevationCss) yn arwain y daflen hon, gan fod digon o gydrannau'n hofran fel bod cysgodion yn nodwedd dylunio mewnol yn hytrach na rhywbeth ychwanegol.
  • Utilities (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, plus a curated semantic-colour/token set) — haen ddewisol o ddosbarthiadau traws-gylchol. Mae'r emitwyr token→dosbarth cyffredinol (colorUtilitiesCss, tokenUtilitiesCss) yn byw yn @pantoken/utils; mae'r pecyn hwn yn eu cyflenwi gyda'r enwau semanteg curadur, tra bod @pantoken/plugin-primitives yn cyflenwi'r palette crai.
  • Fonts (opt-in fonts.css) — y rheolau @font-face ar gyfer ffontiau brand Instructure. Mae Base yn gosod y ffont; mae fonts.css yn llwytho y woff2s, felly mae testun yn diraddio'n raslon hebddo.

Mae popeth yn CSS pur a deilliodd o IR y tokenau, felly mae'n dilyn InstUI drwy'r tokenau heb unrhyw ddibyniaeth ar y pecynnau React InstUI. Ar gyfer y cydrannau rhyngweithiol go iawn, defnyddiwch @pantoken/react-markdown (content) neu @instructure/ui-* (apps).

Mae'r modiwl hwn yn 'barrel': mae pob cofnod a ddogfenwyd yn byw yn ei ffeil ei hun o dan components//utilities//rules//declarations/, wedi'i lunio gyda'r API cyfansoddi lib/. Mae'r cofrestriadau (COMPONENTS/UTILITIES/RULES/DECLARATIONS) yn gyrru'r gwaith o grynhoi +'r prawf cydberthynas.

Rhyngwynebau ​

Newidynnau ​

Swyddogaethau ​