CSS Dokumentacja API

Dokumentacja API CSS obejmuje warstwę komponentów opartą na klasach pantoken: komponenty, utility, reguły globalne i deklaracje zbudowane na systemie tokenów.

Komponenty

Nazwa	Klasa	Podsumowanie
agent-shell	.instui-agent-shell	Powierzchnia kontenera dla agentów AI.
alert	.instui-alert	Wiadomość w linii z kolorowym paskiem statusu i zamaskowanym piktogramem statusu z udostępnionego zestawu ikon.
avatar	.instui-avatar	Awatar użytkownika pokazujący inicjały lub obraz, domyślnie w kształcie koła.
badge	.instui-badge	Mała kropka z licznikiem lub wskaźnikiem statusu umieszczona na rogu celu.
banner	.instui-banner	Możliwa do zamknięcia, z ikoną powierzchnia komunikatu do ogłoszeń na poziomie strony lub kontekstowych.
billboard	.instui-billboard	Duży blok stanu pustego lub wezwania do działania: ikona/obraz hero, nagłówek i wiadomość.
breadcrumb	.instui-breadcrumb	Ścieżka okruszków z separatorami; ostatni okruszek to bieżąca strona.
breadcrumb.link	li	Okruszek (InstUI Breadcrumb.Link), <li> w <ol> rodzica; ostatni jest bieżącą stroną.
button	.instui-button	Dostępny kontroler akcji, stylizowany z palety tokenów; domyślnie primary.
byline	.instui-byline	Obiekt medialny: figura hero obok tytułu i opisu.
calendar	.instui-calendar	Statyczna siatka miesiąca z nawigacją, nagłówkami dni tygodnia i komórkami dni.
calendar.day	.day	Komórka dnia (InstUI Calendar.Day); -today, -selected i -outside-month oznaczają jej stan.
card	.instui-card	Powierzchnia kontenera akceptująca dowolną zawartość.
checkbox	.instui-checkbox	Natywny checkbox i jego etykieta lub przełącznik za pomocą -variant-toggle.
close-button	.instui-close-button	Przezroczysty przycisk-ikona rysujący własny znak ×, w trzech rozmiarach oraz wariancie na kolorowym tle.
context-view	.instui-context-view	Podniesione wezwanie z ogonkiem, pozycjonowalne z dowolnej strony; działa jako natywny [popover].
drawer-layout	.instui-drawer-layout	Podzielony układ z zwijanym panelem bocznym i głównym przewijalnym panelem zawartości.
drawer-layout.content	.content	Główny panel zawartości wypełniający pozostałą przestrzeń obok tacy.
drawer-layout.tray	.tray	Panel boczny obok głównej zawartości, z opcjonalnym nakładką i modyfikatorami powierzchni podobnymi do tacy.
file-drop	.instui-file-drop	Strefa upuszczania plików z trybami hover, accepted i rejected.
form-field	.instui-form-field	Opakowanie pola formularza: etykieta, jej kontrolki oraz układy inline, required lub readonly.
form-field-group	.instui-form-field-group	Grupa <fieldset> z legendą, układem kolumnowym lub inline i konfigurowalnymi odstępami.
form-field-messages	.instui-form-field-messages	Pomoc pola i komunikaty walidacyjne — wskazówka, błąd, sukces i tylko dla czytnika ekranu — z piktogramem przy błędzie i sukcesie.
heading	.instui-heading	Typografia nagłówków od -level-h1 do -level-h6.
img	.instui-img	Stylizowany <img> z modyfikatorami display, crop i effect, które się nakładają.
in-place-edit	.instui-in-place-edit	[contenteditable], który czyta się jak tekst aż do uzyskania fokusu, wtedy pokazuje chrome wejścia.
input-group	.instui-input-group	Fasada wokół pola tekstowego z slotami na ikony z przodu i z tyłu.
link	.instui-link	Stylizowany link z rozmiarami, wariantem inverse dla ciemnych tł, oraz formami inline lub unstyled.
list	.instui-list	Lista z odstępami elementów sterowanymi tokenami.
list.item	.instui-list	Element listy (InstUI List.Item).
mask	.instui-mask	Nakładka w przepływie, która wypełnia pozycjonowanego rodzica i centruje zawartość — np. spinner nad kartą. Dla modala preferuj natywny <dialog> (jego ::backdrop to maska). Każdy z tych modyfikatorów jest też dostępny globalnie (samodzielnie lub połączony z innym komponentem) — zobacz globalne utility mask.
menu	.instui-menu	Powierzchnia rozwijanego menu z elementami, grupami i separatorami.
menu.group	.group	Oznaczony nagłówek grupy (InstUI Menu.Group/Menu.ItemGroup).
menu.item	.item	Pozycja menu (InstUI Menu.Item); dodaj -disabled, -highlighted lub -active/[aria-checked].
menu.separator	.separator	Linia dzieląca między elementami (InstUI Menu.Separator).
metric	.instui-metric	Oznaczona statystyka — duża wartość nad podpisem.
modal	.instui-modal	Powierzchnia dialogu (działa na natywnym <dialog>); części header/body/footer.
modal.body	.body	Region zawartości (InstUI Modal.Body); samotny <img> rozciąga się na całą szerokość.
modal.footer	.footer	Wiersz akcji (InstUI Modal.Footer).
modal.header	.header	Wiersz tytułu (InstUI Modal.Header).
number-input	.instui-number-input	Fasada pola liczbowego z kolumną spinnera +/-.
pagination	.instui-pagination	Nawigacja stron: numerowane strony, pierwsza, poprzednia, następna i ostatnia strzałka oraz wielokropek dla przerw.
pagination.page	.page	Link lub przycisk strony (InstUI Pagination.Page); bieżąca strona ma [aria-current].
pill	.instui-pill	Kompaktowa etykieta statusu; dodaj wiodący piktogram za pomocą wspólnego formatu -icon-<name>.
popover	.instui-popover	Podniesiona powierzchnia dla natywnego [popover], pozycjonowana przy użyciu anchor positioning w CSS.
progress	.instui-progress	Deterministyczny pasek postępu z kolorowym wskaźnikiem, rozmiarami i opcjonalną etykietą wartości.
progress-circle	.instui-progress-circle	Okrągły pierścień postępu sterowany właściwościami niestandardowymi --value i --value-max.
radio	.instui-radio	Natywny przycisk radiowy i jego etykieta.
radio-input-group	.instui-radio-input-group	Pojedynczy wybór radio <fieldset>, prosty lub jako połączony przełącznik segmentowy.
range-input	.instui-range-input	Stylizowany suwak zakresu z odwrotną bąbelkową wskazówką wartości.
rating	.instui-rating	Ocena w postaci gwiazdek z wypełnionymi i pustymi ikonami oraz opcjonalną etykietą liczbową.
side-nav-bar	.instui-side-nav-bar	Pionowa belka nawigacyjna z elementami ikoną-nad-etykietą, z trybem minimalnym wyłącznie z ikonami.
side-nav-bar.item	.item	Pozycja nawigacyjna (InstUI SideNavBar.Item); -selected oznacza aktywną pozycję.
simple-select	.instui-simple-select	Stylizowany natywny <select> z karatem, dopasowany do stanów i rozmiarów pola tekstowego.
spinner	.instui-spinner	Animowany pierścień ładowania; nadać mu role="status" i aria-label.
table	.instui-table	Stylizowana tabela danych dla th i td oraz opcjonalnej legendy, z układami: hover, fixed i stacked-card.
table.body	tbody	Grupa wierszy danych tabeli (InstUI Table.Body).
table.cell	td	Komórka danych (InstUI Table.Cell).
table.col-header	th	Komórka nagłówka kolumny (InstUI Table.ColHeader); domyślne stylowanie th jest nadpisywane przez table.row-header dla th[scope="row"].
table.head	thead	Grupa wierszy nagłówka tabeli (InstUI Table.Head).
table.row	tr	Wiersz tabeli (InstUI Table.Row).
table.row-header	th[scope="row"]	Komórka nagłówka wiersza (InstUI Table.RowHeader); stylizowana na podstawie tokenów nagłówka wiersza, a nie nagłówka kolumny.
tabs	.instui-tabs	Zestaw paneli z kartami: lista kart, wybieralne karty i ich panele.
tabs.panel	.panel	Panel zawartości dla karty (InstUI Tabs.Panel).
tabs.tab	.tab	Pojedynczy przycisk karty (InstUI Tabs.Tab, konfigurowany przez listę kart rodzica Tabs); -selected oznacza aktywną kartę.
tag	.instui-tag	Wbudowana etykietka (chip) dla słowa kluczowego lub filtra.
text	.instui-text	Typografia tekstu głównego z modyfikatorami rozmiaru, grubości, koloru i stylu.
text-area	.instui-text-area	Stylizowany, zmienny rozmiarowo natywny <textarea> o tych samych stanach i rozmiarach co pole tekstowe.
text-input	.instui-text-input	Stylizowany natywny <input> — w tym date, time i datetime-local, gdzie przeglądarka dostarcza selektor — ze stanami walidacji i rozmiarami.
toggle-details	.instui-toggle-details	Stylizowane ujawnienie (disclosure) natywnego <details> z obracającym się chevronem.
toggle-group	.instui-toggle-group	Obramowane ujawnienie zbudowane na <details>: wiersz streszczenia z chevronem i zwijaną zawartością.
tooltip	.instui-tooltip	Dymek tooltipu aktywowany na hover i focus w CSS, pozycjonowalny po dowolnej stronie.
tray	.instui-tray	Panel przypięty do krawędzi, który wysuwa się z dowolnej strony; natywny [popover] lub <dialog>.
tree-browser	.instui-tree-browser	Drzewo ujawnień z zagnieżdżonymi kolekcjami i liśćmi, z obracającymi się chevronami.
view	.instui-view	Prymityw View: neutralne pudełko z modyfikatorami klucz-wartość dla tła, obramowania, promienia, cienia, display, pozycji, overflow i kursora. Każdy z tych modyfikatorów jest również dostępny globalnie (samodzielnie lub łańcuchowo na dowolnym komponencie) — zob. narzędzia background/border/shadow/display/position/overflow/cursor.

Narzędzia

Nazwa	Klasa	Podsumowanie
color	.--text-danger	Semantyczne narzędzia kolorystyczne: .--bg-<name>, .--text-<name> (aliasowane jako .--color-<name>) oraz .--border-<name> dla wyselekcjonowanej palety semantycznej. Każde z nich ma też alias jako modyfikator przypięty do komponentu (np. -bg-danger na dowolnym .instui-<component>).
cursor	.--cursor-pointer	cursor jako kompozytna, globalna klasa — .--cursor-<value> — używana samodzielnie lub łańcuchowo na dowolnym komponencie (.instui-button.--cursor-pointer).
gap	.--gap-md	Narzędzia Flex/grid gap w skali odstępów, krótsze (--gap-sm) lub dłuższe (--gap-small) zapisy. Używane samodzielnie lub łańcuchowo na dowolnym komponencie (.instui-view.--gap-sm) — komponenty, które już ustawiają własne gap z tokenu specyficznego dla komponentu, mogą je nadpisać.
icon	.instui-icon	System ikon: rozmiary .instui-icon oraz wspólny malarz -icon-<name>, który maskuje glif (w currentColor) przed dowolnym elementem.
layout	.--display-flex	Narzędzia display i text-align — .--display-<value> i .--text-align-<value> — jako kompozytne, globalne klasy, używane samodzielnie lub łańcuchowo na dowolnym komponencie.
maskglobal	.--mask-overlay	Globalna, podwójna kopia modyfikatorów nakładki komponentu mask — --mask-overlay, --mask-fullscreen, --mask-blur — używana samodzielnie lub łańcuchowo na dowolnym komponencie, bez opakowywania w element .instui-mask.
overflow	.--overflow-x-hidden	overflow-x/overflow-y jako kompozytne, globalne klasy — .--overflow-x-<value> / .--overflow-y-<value> — używane samodzielnie lub łańcuchowo na dowolnym komponencie.
position	.--position-relative	position jako kompozytna, globalna klasa — .--position-<value> — używana samodzielnie lub łańcuchowo na dowolnym komponencie (.instui-button.--position-relative).
responsive	[class*="-hidden-"],[class*="-show-"]	Klasy pokaz/ukryj w zależności od szerokości widoku lub kontenera na skalowanej liście punktów przerwania tematycznych.
screen-reader-content	.instui-screen-reader-content	Ukrywa wizualnie zawartość, pozostawiając ją dostępną dla technologii asystujących (standardowy wzorzec clip).
spacing	.--p-md	Narzędzia marginesu i paddingu — .--m<side>-<step> / .--margin-<side>-<step> oraz .--p<side>-<step> / .--padding-<side>-<step> na skali odstępów (boki t/b/s/e/x/y albo brak, zapisane skrótowo lub w pełnej formie — na przykład --mb-sm i --margin-bottom-small to ta sama reguła; margin przyjmuje też auto). Można używać samodzielnie lub łączyć z dowolnym komponentem (na przykład class="instui-view --mb-sm").
stacking	.--stack-topmost	Narzędzia głębokości z-index — .--stack-<level> (deepest, below, above, topmost) — można używać samodzielnie lub łączyć z dowolnym komponentem, dzięki czemu warstwy układają się przewidywalnie zamiast polegać na ręcznie dobranych liczbach.
transition	.instui-transition.-transition-fade-entering	Klasy stanu animacji dla komponentu Transition — .instui-transition oraz klasy stanów (-transition-fade-entering, -transition-scale-exited itd.) — można używać samodzielnie lub łączyć z dowolnym komponentem.
truncate	.--truncate	Ucinanie z wielokropkiem z ograniczeniem linii kontrolowanym przez --lines — można używać samodzielnie lub łączyć z dowolnym komponentem (.instui-button.--truncate).
visual-debug	.-with-visual-debug	Obrys do debugowania układu: złożenie .-with-visual-debug na dowolnym elemencie obrysowuje pudełko i jego bezpośrednie dzieci, dzięki czemu struktura układu jest widoczna od razu.

Zasady

Nazwa	Klasa	Podsumowanie
base	*	Dobrowolny globalny reset: box-sizing, powierzchnia strony, podstawowy kolor tekstu i czcionka, color-scheme oraz domyślne ustawienia linków.
prose	:where(body)	Typograficzne ustawienia domyślne dla surowego HTML — nagłówki, akapity, listy, linki i kod — stosowane automatycznie wszędzie tam, gdzie są importowane (domyślnie :where(body)); przekaż options.scope, aby zamiast tego skierować do innego korzenia zawartości (np. .vp-doc).

Plugins

Nazwa	Klasa	Podsumowanie
logos	.logos	Logotypy produktów Instructure jako tokeny obrazów CSS: --instui-logo-<product>-<layout>-<mode> przechowuje SVG jako data-URI, więc logo rysuje się np. za pomocą background-image: var(--instui-logo-canvas-horizontal-color).
primitives	.instui-bg-primitive-color-white	Dobrowolne klasy użytkowe dla surowej palety prymitywnej: .instui-bg-/fg-/border-primitive-color-<name> nakładają kolor z prymitywnych tokenów kolorów, oraz dodatkowo narzędzia font-family/font-weight dla prymitywnych tokenów czcionek. Wyłączone z narzędzi semantycznych, aby nadpisania tam pozostały tylko semantyczne.
visual-debug	.-with-visual-debug	Obrys do debugowania układu: złożenie .-with-visual-debug na dowolnym elemencie obrysowuje pudełko i jego bezpośrednie dzieci, dzięki czemu struktura układu jest widoczna od razu.

layout

Nazwa	Klasa	Podsumowanie
callout	div[class~="instui-callout"]	Wbudowany alert informacyjny do krótkiego przypomnienia lub notatki.
hero	div[class~="instui-hero"]	Sekcja nagłówka na całą szerokość z tytułem, podtytułem i opcjonalnym obrazem tła.
page-layout	div[class~="instui-page-layout"]	Standardowy trójkolumnowy układ strony z nagłówkiem, paskiem bocznym i główną zawartością.
rubric-note	div[class~="instui-rubric-note"]	Sformatowana notatka z kategoriami rubric i wskaźnikami punktacji.
testimonial	div[class~="instui-testimonial"]	Wyświetlenie cytatu lub referencji z przypisaniem i opcjonalnymi obrazami.
two-column	div[class~="instui-two-column"]	Układ dwukolumnowy z lewą i prawą sekcją zawartości.
wrapper	body[class~="instui-display-flex"]	Wiersz szkieletu aplikacji: nawigacja boczna, kontener z nagłówkiem i opcjonalny panel.