pantoken / components

components ​

Beta

@pantoken/components — uma biblioteca de componentes CSS com aparência InstUI, construída a partir dos tokens --instui-*.

As folhas de estilo fornecidas:

  • Base (baseCss) — padrões globais opt-in para o documento derivados dos tokens (box-sizing, reset do body, superfície da página, cor/fonte base do texto, color-scheme). Também contém o anel de foco (focus-outline), então todo elemento focável recebe um contorno acessível :focus-visible por padrão. Carregue-o quando pantoken controlar a página.
  • Prose (proseCss) — estilos para HTML de markdown/prosa renderizado (tabelas, cabeçalhos, links, listas, código) escopados a uma raiz de conteúdo, para que uma página de documentação ou região de conteúdo pareça com InstUI sem trocar o DOM por componentes. É isso que os renderizadores do site fornecem como seu components.css.
  • Components (buttonCss, alertCss, badgeCss, agregados por componentsCss) — estilos de componente baseados em classes que você aplica na sua própria marcação (<button class="instui-button">), para a aparência InstUI fora de um framework de componentes. A escala de sombra --instui-elevation-* (elevationCss) lidera esta folha, já que componentes suficientes flutuam para que sombras sejam um atributo de design intrínseco em vez de um complemento.
  • Utilities (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, além de um conjunto curado de tokens/cores semânticas) — uma camada opt-in de classes transversais. Os emissores genéricos token→classe (colorUtilitiesCss, tokenUtilitiesCss) vivem em @pantoken/utils; este pacote lhes fornece os nomes semânticos curados, enquanto @pantoken/plugin-primitives fornece a paleta bruta.
  • Fonts (opt-in fonts.css) — as regras @font-face para as fontes da marca Instructure. Base aplica a fonte; fonts.css carrega os woff2s, assim o texto degrada graciosamente sem ela.

Tudo é CSS puro derivado do IR de tokens, portanto acompanha o InstUI através dos tokens sem dependência dos pacotes React do InstUI. Para os componentes reais e interativos, use @pantoken/react-markdown (conteúdo) ou @instructure/ui-* (apps).

Este módulo é um barril: cada registro documentado vive em seu próprio arquivo sob components//utilities//rules//declarations/, autorado com a API de composição lib/. Os registros (COMPONENTS/UTILITIES/RULES/DECLARATIONS) impulsionam a agregação + o teste de paridade.

Interfaces ​

Variáveis ​

Funções ​