PrimitivesEstável

Box

Relatório de paridade: docs/atoms.md

Caixa de layout com props travadas nos tokens: p / px / py / pt…pl são chaves de --space-*; bg é uma cor semântica; radius, border (bool), shadow uma elevação. Tudo vira style inline com var(--…).

Não é Tailwind nem CSS-in-JS de runtime — é um conjunto pequeno e tipado de props → CSS vars. as escolhe o elemento (div · section · article · ul…). Só padding, sem margin — o espaçamento entre irmãos é do <Stack gap>.

Quando usar

  • Um contêiner com fundo, borda, raio e/ou padding — um cartão simples, uma seção, um bloco destacado.
  • Espaçar / alinhar filhos numa direção → Stack. Um cartão com slots (mídia, header, footer) → Card. Uma mensagem com tom → InfoCard.

Exemplos

Escala de padding
p=8
p=16
p=24
p=32
<Box p="8" bg="surface-second" radius="md" border>p=8</Box>
<Box p="16" bg="surface-second" radius="md" border>p=16</Box>
<Box p="24" bg="surface-second" radius="md" border>p=24</Box>
Elevação
shadow=sm
shadow=md
shadow=lg
shadow=xl
<Box p="16" bg="surface-first" radius="lg" shadow="sm">shadow=sm</Box>
<Box p="16" bg="surface-first" radius="lg" shadow="xl">shadow=xl</Box>

Playground

Conteúdo da caixa
p
radius
shadow
<Box p="16" bg="surface-first" radius="lg" border>Conteúdo da caixa</Box>

Props

PropTipopadrãoDescrição
as"div" | "section" | "article" | "aside" | "header" | "footer" | "main" | "nav" | "span" | "ul" | "ol" | "li"—Elemento renderizado. Default `"div"`.
bgenum—Cor de fundo — token semântico.
borderboolean—Borda `1px solid var(--color-border-default)`.
p"4" | "8" | "12" | "16" | "24" | "32" | "40" | "48"—Padding (todos os lados) — chave de `--space-*`.
pb"4" | "8" | "12" | "16" | "24" | "32" | "40" | "48"——
pl"4" | "8" | "12" | "16" | "24" | "32" | "40" | "48"——
pr"4" | "8" | "12" | "16" | "24" | "32" | "40" | "48"——
pt"4" | "8" | "12" | "16" | "24" | "32" | "40" | "48"——
px"4" | "8" | "12" | "16" | "24" | "32" | "40" | "48"—Padding horizontal.
py"4" | "8" | "12" | "16" | "24" | "32" | "40" | "48"—Padding vertical.
radius"none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full"—Raio dos cantos.
shadow"sm" | "md" | "lg" | "xl"—Sombra — token de elevação.

Acessibilidade

  • Sem papel próprio — escolha o as semântico (section, nav, aside…) quando o bloco tiver significado. As cores de bg vêm de tokens com contraste conferido nos dois temas.