PrimitivesEstável

Text

Relatório de paridade: docs/atoms.md

O primitivo tipográfico do DS. Um <Text> cobre body, label, caption, heading e link — variant é qualquer uma das 17 chaves --text-* (default body-m), e os tokens já são responsivos (versão mobile abaixo de 768px, sem trabalho extra).

as escolhe o elemento (span padrão · p · div · label · strong · h1–h6…); tone é a cor semântica (inherit padrão · headings · paragraphs · highlight · disabled · success/warning/error/info); weight, align, truncate (1 linha) e lineClamp={N}. margin: 0 sempre.

Quando usar

Todo texto de corpo, rótulo, legenda ou destaque — em vez de um <p> / <span> solto com font à mão.
Um título com peso semântico (<h1>…) → Heading. Um link navegável → Link do DS.

Exemplos

A escala

heading-xl — O rato roeu a roupa

heading-l — O rato roeu a roupa

heading-m — O rato roeu a roupa

heading-s — O rato roeu a roupa

heading-xs — O rato roeu a roupa

body-l — O rato roeu a roupa

body-m — O rato roeu a roupa

body-s — O rato roeu a roupa

body-xs — O rato roeu a roupa

label-m — O rato roeu a roupa

caption — O rato roeu a roupa

<Text as="p" variant="heading-xl" tone="headings">heading-xl</Text>
<Text as="p" variant="body-m">body-m</Text>
<Text as="p" variant="caption">caption</Text>

Tons

headings

paragraphs

highlight

disabled

success

warning

error

<Text as="p" tone="headings">headings</Text>
<Text as="p" tone="paragraphs">paragraphs</Text>
<Text as="p" tone="highlight">highlight</Text>
<Text as="p" tone="disabled">disabled</Text>
<Text as="p" tone="error">error</Text>

Truncar e clamp

Uma linha só, cortada com reticências quando não cabe no contêiner

Duas linhas: lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

<Text as="p" truncate>Uma linha só, cortada com reticências quando não cabe</Text>
<Text as="p" lineClamp={2}>Duas linhas: lorem ipsum dolor sit amet…</Text>

Playground

O rato roeu a roupa do rei de Roma

variant

tone

weight

<Text as="p">O rato roeu a roupa do rei de Roma</Text>

Props

Prop	Tipo	padrão	Descrição
`align`	`"start" \| "center" \| "end" \| "justify"`	`—`	—
`as`	`enum`	`—`	Elemento renderizado. Default `"span"`.
`lineClamp`	`number`	`—`	Trunca em N linhas (`-webkit-line-clamp`).
`tone`	`"inherit" \| "headings" \| "paragraphs" \| "highlight" \| "disabled" \| "pure-white" \| "success" \| "warning" \| "error" \| "info"`	`inherit`	Cor semântica. Default `"inherit"`.
`truncate`	`boolean`	`false`	Trunca em 1 linha com reticências.
`variant`	`enum`	`body-m`	Chave de `--text-*` (17 estilos, já responsivos). Default `"body-m"`.
`weight`	`"regular" \| "medium" \| "semibold" \| "bold"`	`—`	Sobrescreve o peso do `variant`.

Acessibilidade

Escolha o as pelo sentido, não pelo tamanho: um subtítulo visual pequeno ainda pode ser as="h2". truncate / lineClamp cortam visualmente — o texto completo continua no DOM para o leitor de tela.