pantoken / components

components ​

Beta

@pantoken/components — una biblioteca de componentes CSS con aspecto InstUI, construida a partir de los tokens --instui-*.

Las hojas de estilos incluidas:

  • Base (baseCss) — valores globales opt-in para el documento derivados de los tokens (box-sizing, reinicio de body, superficie de la página, color/fuente de texto base, color-scheme). También incluye el anillo de foco-outline, por lo que todo elemento focalizable obtiene de serie un outline accesible :focus-visible. Cárgalo cuando pantoken sea el propietario de la página.
  • Prose (proseCss) — estilos para HTML renderizado desde markdown/prosa (tablas, encabezados, enlaces, listas, código) con ámbito en una raíz de contenido, de modo que una página de docs o una región de contenido parezca InstUI sin intercambiar el DOM por componentes. Esto es lo que los renderizadores del sitio entregan como su components.css.
  • Components (buttonCss, alertCss, badgeCss, agrupado por componentsCss) — estilos de componentes basados en clases que aplicas a tu propio marcado (<button class="instui-button">), para el aspecto InstUI fuera de un framework de componentes. La escala de sombras --instui-elevation-* (elevationCss) lidera esta hoja, ya que suficientes componentes usan elevación y las sombras son un atributo de diseño intrínseco más que un añadido.
  • Utilities (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, además de un conjunto curado de colores/ tokens semánticos) — una capa opt-in de clases transversales. Los emisores genéricos token→clase (colorUtilitiesCss, tokenUtilitiesCss) viven en @pantoken/utils; este paquete les proporciona los nombres semánticos curados, mientras que @pantoken/plugin-primitives suministra la paleta cruda.
  • Fonts (opt-in fonts.css) — las reglas @font-face para las fuentes de la marca Instructure. Base aplica la fuente; fonts.css carga los woff2, de modo que el texto degrada con gracia sin ellos.

Todo es CSS puro derivado del IR de tokens, por lo que sigue a InstUI a través de los tokens sin dependencia de los paquetes React de InstUI. Para los componentes reales e interactivos, usa @pantoken/react-markdown (contenido) o @instructure/ui-* (aplicaciones).

Este módulo es un barrel: cada registro documentado vive en su propio archivo bajo components//utilities//rules//declarations/, redactado con la API de composición lib/. Los registros (COMPONENTS/UTILITIES/RULES/DECLARATIONS) impulsan la agregación + la prueba de paridad.

Interfaces ​

Variables ​

Funciones ​