pantoken / components

components ​

베타

@pantoken/components — --instui-* 토큰으로 빌드된 InstUI 스타일의 CSS 컴포넌트 라이브러리입니다.

제공되는 스타일시트:

  • Base (baseCss) — 토큰에서 파생된 옵트인 전역 문서 기본값(box-sizing, body 리셋, 페이지 표면, 기본 텍스트 색상/폰트, color-scheme). 또한 포커스-아웃라인 링을 포함하여 모든 포커스 가능한 요소가 접근 가능한 :focus-visible 아웃라인을 기본으로 갖습니다. pantoken이 페이지를 소유할 때 로드하세요.
  • Prose (proseCss) — 마크다운/프로즈 HTML(테이블, 제목, 링크, 목록, 코드)에 적용되는 스타일로, 콘텐츠 루트에 스코프되어 문서 페이지나 콘텐츠 영역이 컴포넌트로 DOM을 교체하지 않고도 InstUI처럼 보이게 합니다. 사이트 렌더러들이 그들의 components.css로 제공하는 스타일입니다.
  • Components (buttonCss, alertCss, badgeCss, aggregated by componentsCss) — 자체 마크업에 적용하는 클래스 기반 컴포넌트 스타일 (<button class="instui-button">)으로, 컴포넌트 프레임워크 외부에서도 InstUI 룩을 제공합니다. 이 시트는 충분한 컴포넌트가 떠 있기 때문에 그림자가 고유한 디자인 속성으로 작용하는 --instui-elevation-* 그림자 스케일 (elevationCss)이 주도합니다.
  • Utilities (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, plus a curated semantic-colour/token set) — 횡단적 클래스를 제공하는 옵트인 레이어입니다. 일반적인 token→class 생성기(colorUtilitiesCss, tokenUtilitiesCss)는 @pantoken/utils에 위치하며; 이 패키지는 선별된 semantic 이름을 공급하고, @pantoken/plugin-primitives는 원시 팔레트를 공급합니다.
  • Fonts (opt-in fonts.css) — Instructure 브랜드 폰트에 대한 @font-face 규칙입니다. Base는 폰트를 적용하고, fonts.css은 woff2를 로딩하므로 폰트가 없어도 텍스트가 점진적으로 폴백됩니다.

모든 것은 토큰 IR에서 파생된 순수 CSS이므로 InstUI React 패키지에 의존하지 않고 토큰을 통해 InstUI를 추적합니다. 실제 상호작용형 컴포넌트는 @pantoken/react-markdown(content) 또는 @instructure/ui-*(apps)를 사용하세요.

이 모듈은 배럴입니다: 문서화된 각 레코드는 components//utilities//rules//declarations/ 아래의 별도 파일에 있으며, lib/ compose API로 작성됩니다. 레지스트리들(COMPONENTS/UTILITIES/RULES/DECLARATIONS)이 집계와 동등성 테스트를 구동합니다.

인터페이스 ​

변수 ​

함수 ​