tokens de texto
Os tokens de texto são a menor parte do sistema e são utilizados para formatar todos os estilos de texto
font family
É a fonte utilizada para os elementos de texto.
base tokens
| nome | valor |
|---|---|
| $font-family-soleil | soleil |
| $font-family-poppins | Poppins |
| $font-family-jakarta | Plus Jakarta Sans |
theme tokens
| nome | grupo | valor |
|---|---|---|
| $font-family-brand | $font-family-soleil | soleil |
| $font-family-secondary | $font-family-poppins | Poppins |
font size
O tamanho da fonte é o tamanho do texto que será exibido na tela. Os valores aqui estão em pixels e rems, mas o tamanho da fonte é convertido para a medida apropriada para cada plataforma no código.
base tokens
| nome | valor (px) | valor (rem) |
|---|---|---|
| $font-size-100 | 11 | 0.6875 |
| $font-size-200 | 12 | 0.75 |
| $font-size-300 | 13 | 0.8125 |
| $font-size-400 | 14 | 0.875 |
| $font-size-500 | 15 | 0.9375 |
theme tokens
| nome | grupo | valor (px) | valor (rem) |
|---|---|---|---|
| $font-size-2xmini | $font-size-100 | 11 | 0.6875 |
| $font-size-1xmini | $font-size-200 | 12 | 0.75 |
| $font-size-mini | $font-size-300 | 13 | 0.8125 |
| $font-size-3xsmall | $font-size-400 | 14 | 0.875 |
| $font-size-2xsmall | $font-size-500 | 15 | 0.9375 |
font weight
O peso da fonte define o peso do texto na interface.
base tokens
| nome | valor |
|---|---|
| $font-weight-50 | 300 |
| $font-weight-100 | 400 |
| $font-weight-150 | 500 |
| $font-weight-200 | 600 |
| $font-weight-300 | 700 |
theme tokens
| nome | grupo | valor |
|---|---|---|
| $font-weight-regular | $font-weight-100 | 400 |
| $font-weight-bold | $font-weight-200 | 600 |
| $font-weight-1xbold | $font-weight-300 | 700 |
line height
O line height é a propriedade que define a altura da caixa que contém o texto.
base tokens
| nome | valor (px) | valor (rem) |
|---|---|---|
| $line-height-100 | 12 | 0.75 |
| $line-height-200 | 14 | 0.875 |
| $line-height-300 | 16 | 1 |
| $line-height-400 | 20 | 1.25 |
| $line-height-500 | 24 | 1.5 |
theme tokens
| nome | grupo | valor (px) | valor (rem) |
|---|---|---|---|
| $line-height-3xsmall | $line-height-100 | 12 | 0.75 |
| $line-height-2xsmall | $line-height-300 | 16 | 1 |
| $line-height-1xsmall | $line-height-400 | 20 | 1.25 |
| $line-height-small | $line-height-500 | 24 | 1.5 |
| $line-height-medium | $line-height-600 | 28 | 1.75 |
letter spacing
Define o espaçamento extra entre os caracteres do texto.
base tokens
| nome | valor (px) |
|---|---|
| $letter-spacing-100 | 0 |
| $letter-spacing-150 | 1 |
| $letter-spacing-200 | 2 |
theme tokens
| nome | grupo | valor (px) |
|---|---|---|
| $letter-spacing-tight | $letter-spacing-100 | 0 |
| $letter-spacing-regular | $letter-spacing-150 | 1 |
| $letter-spacing-loose | $letter-spacing-200 | 2 |