Spacing

Jedna skala, role semantyczne

Skala bazowa (core, niedostępna wprost dla ui//docs/) to 0, 2, 4, 8, 12, 16, 24, 32, 48, 64, 96 px — geometryczny rytm, nie dowolne liczby. Warstwa semantyczna eksponuje z niej role, których komponenty naprawdę używają:

• space.stack-* (xs–xl) — odstęp PIONOWY między elementami w kolumnie (np. gap we flex-col, padding góra/dół).
• space.inline-* (xs–lg) — odstęp POZIOMY (gap w rzędzie, padding lewo/prawo, odstęp między przyciskiem a ikoną).
• space.page-gutter — margines strony na krawędziach viewportu.
• space.section-gap — odstęp między głównymi sekcjami strony.

Nazwy są kierunkowe (stack/inline), nie rozmiarowe (small/big) — pytanie brzmi „to jest odstęp W KOLUMNIE czy W RZĘDZIE”, nigdy „czy to ma być sm czy md”.

Jak używać

<div className="flex flex-col gap-stack-md">   {/* odstęp pionowy */}
  <div className="flex items-center gap-inline-sm">…</div>  {/* odstęp poziomy */}
</div>

.custom-block {
  padding: var(--spacing-stack-lg) var(--spacing-inline-md);
}

Każda rola jest zarejestrowana w namespace --spacing-* Tailwind v4, więc działa z KAŻDĄ utility, która konsumuje skalę spacingu: p-stack-md, gap-inline-sm, px-inline-lg, mt-stack-xl… Tabele niżej pokazują jedną reprezentatywną klasę na rolę — każda działa identycznie z dowolnym innym prefiksem spacingu (p-, m-, gap-…).

Skala stack

Token	Zmienna CSS	Wartość	Podgląd	Klasa Tailwind	Przeznaczenie
space.stack-lg	--spacing-stack-lg	24px		gap-stack-lg	Odstęp między sekcjami wewnątrz karty/panelu.
space.stack-md	--spacing-stack-md	16px		gap-stack-md	Domyślny odstęp między elementami w kolumnie.
space.stack-sm	--spacing-stack-sm	8px		gap-stack-sm	Odstęp wewnątrz komponentu (np. mały padding Card).
space.stack-xl	--spacing-stack-xl	32px		gap-stack-xl	Duży odstęp — oddzielenie bloków treści.
space.stack-xs	--spacing-stack-xs	4px		gap-stack-xs	Minimalny odstęp — np. między ikoną a etykietą w jednej linii.

Skala inline

Token	Zmienna CSS	Wartość	Podgląd	Klasa Tailwind	Przeznaczenie
space.inline-lg	--spacing-inline-lg	16px		gap-inline-lg	Odstęp między grupami kontrolek.
space.inline-md	--spacing-inline-md	12px		gap-inline-md	Domyślny odstęp poziomy w rzędzie.
space.inline-sm	--spacing-inline-sm	8px		gap-inline-sm	Odstęp między krótkimi elementami w rzędzie (np. tagi, badge'e).
space.inline-xs	--spacing-inline-xs	4px		gap-inline-xs	Odstęp między ikoną a tekstem w przycisku.

Layout

Token	Zmienna CSS	Wartość	Podgląd	Klasa Tailwind	Przeznaczenie
space.page-gutter	--spacing-page-gutter	16px		px-page-gutter	Margines strony na krawędziach viewportu.

Token	Zmienna CSS	Wartość	Podgląd	Klasa Tailwind	Przeznaczenie
space.section-gap	--spacing-section-gap	48px		gap-section-gap	Odstęp między głównymi sekcjami strony.

Grid, breakpointy i szerokości kontenerów treści — patrz Fundamenty → Layout (dziś szkielet).