pantoken / components

components ​

Beta

@pantoken/components — biblioteka komponentów CSS w stylu InstUI, zbudowana z tokenów --instui-*.

Dostarczone arkusze stylów:

  • Base (baseCss) — dobrowolne globalne ustawienia domyślne dokumentu pochodzące z tokenów (box-sizing, reset body, powierzchnia strony, podstawowy kolor/krój tekstu, color-scheme). Zawiera też obręcz focus-outline, więc każdy element fokusowalny otrzymuje dostępny obrys :focus-visible gotowy do użycia. Załaduj go, gdy pantoken zarządza stroną.
  • Prose (proseCss) — style dla renderowanego markdownu/HTML prozy (tabele, nagłówki, linki, listy, kod) ograniczone do korzenia zawartości, dzięki czemu strona dokumentacji lub obszar treści wygląda jak InstUI bez zamiany DOM na komponenty. To jest to, co rendererzy stron dostarczają jako swoje components.css.
  • Components (buttonCss, alertCss, badgeCss, agregowane przez componentsCss) — oparte na klasach style komponentów, które stosujesz do własnego markupu (<button class="instui-button">), dla wyglądu InstUI poza frameworkiem komponentów. Skala cieni --instui-elevation-* (elevationCss) prowadzi ten arkusz, ponieważ wystarczająca liczba komponentów unosi się, więc cienie są integralną cechą projektu, a nie dodatkiem.
  • Utilities (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, oraz wyselekcjonowany zestaw semantycznych kolorów/tokenów) — warstwa klas międzykontekstowych do dobrowolnego użycia. Ogólne emitery token→klasa (colorUtilitiesCss, tokenUtilitiesCss) znajdują się w @pantoken/utils; ten pakiet dostarcza im wyselekcjonowane semantyczne nazwy, podczas gdy @pantoken/plugin-primitives dostarcza surową paletę.
  • Fonts (dobrowolne fonts.css) — zasady @font-face dla fontów marki Instructure. Base stosuje font; fonts.css ładuje pliki woff2, dzięki czemu tekst degraduje się łagodnie bez nich.

Wszystko jest czystym CSS-em wyprowadzonym z IR tokenów, więc śledzi InstUI poprzez tokeny bez zależności od pakietów React InstUI. Dla rzeczywistych, interaktywnych komponentów użyj @pantoken/react-markdown (content) lub @instructure/ui-* (apps).

Ten moduł jest baryłką: każdy dokumentowany rekord znajduje się w osobnym pliku pod components//utilities//rules//declarations/, tworzony za pomocą API kompozycji lib/. Rejestry (COMPONENTS/UTILITIES/RULES/DECLARATIONS) napędzają agregację i test parytetu.

Interfejsy ​

Zmienne ​

Funkcje ​