pantoken / components

components ​

Beta

@pantoken/components — he r library CSS āhua InstUI, i hangaia mai i ngā tohu --instui-*.

Ngā āhuatanga kāhua kua tukuna:

  • Base (baseCss) — ngā tautuhinga ao tuatahi whiriwhiri (opt-in) i runga i ngā tohu (box-sizing, whakahoki tinana body, mata whārangi, tae kuputuhi/momo momotuhi tūnga, color-scheme). Ka kawe hoki i te rīngi ārahi-kohu (focus-outline), nō reira ia tūnga-a-aro ka whiwhi :focus-visible ātaahua e taea ana te uru mai i te tīmatanga. Tāuria mēnā ko pantoken te kaitiaki o te whārangi.
  • Prose (proseCss) — ngā kāhua mō HTML markdown/prose (ngā ripanga, taitara, hononga, rārangi, waehere) i whakawhānuitia ki tētahi pakiaka ihirangi, kia rite te whārangi tuhinga, te wāhi ihirangi rānei ki te āhua InstUI me te kore e hurihia te DOM hei hanganga. Koinei te mea e tukuna ana e ngā kaiwhakaata pae hei components.css.
  • Components (buttonCss, alertCss, badgeCss, kua kohia e componentsCss) — ngā kāhua wāhanga ā-kīwaha (class-based) hei whakamahi i runga i ōu ake tohu (<button class="instui-button">), mō te āhua InstUI i waho o tētahi anga waahanga. Ko te āhua whēkau (shadow) rahi --instui-elevation-* (elevationCss) e arahina ana tēnei kōwhai, nā te mea he nui ngā wahanga e rere ana, ā, he āhuatanga hoahoa tāpiri tonu ngā atarangi, ehara i te taapiri noa.
  • Utilities (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, me te huinga tohu/tae whakarite) — he paparanga kōwhiri (opt-in) o ngā kāwai whakawhiti-whakararo. Ko ngā kaiwhakakī token→class mōhiohio (colorUtilitiesCss, tokenUtilitiesCss) e noho ana i @pantoken/utils; ka whāngai tēnei pākete i ngā ingoa semantic kua tīpakohia, ā, ko @pantoken/plugin-primitives te kaiwhāngai i te karaehe mata.
  • Fonts (opt-in fonts.css) — ngā ture @font-face mō ngā momotuhi tohu Instructure. Ko te Base e whakamahi ana i te momotuhi; ko fonts.css e uta i ngā woff2, nō reira ka heke ātaahua te kuputuhi mēnā kāore.

He CSS tītī katoa ngā mea, i ahu mai i te token IR, nō reira e whai haere ana ki te InstUI mā ngā tohu me te kore rānei o te whakawhirinaki ki ngā pākete React InstUI. Mō ngā waahanga tūhono tūturu, whakamahia @pantoken/react-markdown (i ngā ihirangi) rānei @instructure/ui-* (i ngā taupānga).

He pou tēnei mō ngā kōwae: ia rekoata kua tuhia e noho ana i tōna ake kōnae i raro i components//utilities//rules//declarations/, i tuhia mā te API whakakotahi lib/. Ko ngā rēhita (COMPONENTS/UTILITIES/RULES/DECLARATIONS) e tarai ana i te kohinga + te whakamātautau parity.

Ngā Atanga ​

Ngā Taipūtī ​

Ngā Mahi ​