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 derivados dos tokens (box-sizing, redefinição do body, superfície da página, cor/fonte base do texto, color-scheme). Também carrega o anel de focus-outline, então todo elemento focável recebe uma outline acessível :focus-visible por padrão. Carregue quando pantoken for responsável pela página.
  • Prosa (proseCss) — estilos para HTML renderizado de markdown/prosa (tabelas, cabeçalhos, links, listas, código) escopados a uma raiz de conteúdo, para que uma página de docs ou região de conteúdo pareça InstUI sem trocar o DOM por componentes. É isso que os renderizadores do site entregam como seu components.css.
  • Componentes (buttonCss, alertCss, badgeCss, agregados por componentsCss) — estilos de componente baseados em classes que você aplica ao seu próprio markup (<button class="instui-button">), para o visual 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 intrínseco de design e não um complemento.
  • Utilitários (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, além de um conjunto curado de cores/nomes semânticos de token) — 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.
  • Fontes (opt-in fonts.css) — as regras @font-face para as fontes da marca Instructure. Base aplica a fonte; fonts.css carrega os woff2s, então o texto degrade graciosamente sem ela.

Tudo é CSS puro derivado do IR de tokens, então 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 barrel: cada registro documentado vive em seu próprio arquivo sob components//utilities//rules//declarations/, redigido 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 ​