Text
Texto tipográfico sobre os tokens. size, weight e tone (escala de branco ou cor literal/numérica).
Exemplo
Título (title / semibold)
Seção (section)
Lista forte (list / strong)
Legenda apagada (caption / muted)
import Text from "@components/Text/Text.astro";
<Text size="title" weight="semibold">Título</Text>
<Text size="list" tone="strong">Texto forte</Text>
<Text size="caption" tone="muted">Apoio</Text>
<Text size="caption" tone={0.6}>Opacidade custom</Text>Tons
tone aceita um nome da escala de branco, uma cor literal ("#9B6AFA") ou
um número 0-1 (opacidade de branco, ex.: tone={0.6}).
| tone | valor | amostra |
|---|---|---|
default | #fff | O rato roeu a roupa |
strong | .85 | O rato roeu a roupa |
mid | .7 | O rato roeu a roupa |
soft | .55 | O rato roeu a roupa |
muted | .45 | O rato roeu a roupa |
dim | .4 | O rato roeu a roupa |
faint | .35 | O rato roeu a roupa |
ghost | .3 | O rato roeu a roupa |
dark | #08051A | O rato roeu a roupa |
size
display, title, section, body,
list, caption (mapeiam aos papéis M3 de tipografia).