# Sistema de design Twilio Paste
## Prévia da interface do sistema de design Twilio Paste
Edite o conteúdo, confira a prévia no celular e prepare um instantâneo local separado.
## Referência de design do sistema de design Twilio Paste
Fonte twilio-labs/paste original verificada. Os valores abaixo distinguem os nomes dos tokens em YAML dos nomes no estilo JavaScript. Esta referência não apresenta a ramificação independente Paste DSys como documentação do Twilio.
### Aliases de espaçamento
| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| space10 | 0.125rem | 2 px em uma raiz de 16 px. |
| space20 | 0.25rem | 4 px em uma raiz de 16 px. |
| space30 | 0.5rem | 8 px de espaçamento entre campos. |
| space40 | 0.75rem | 12 px de preenchimento interno do controle. |
| space50 | 1rem | 16 px de agrupamento local. |
| space60 | 1.25rem | 20px. |
| space70 | 1.5rem | 24 px de espaçamento entre seções. |
| space90 | 2rem | 32 px de agrupamento amplo. |
| space130 | 3rem | 48 px para uma região maior. |
### Aliases de tamanho de fonte
| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| fontSize20 | 0.75rem | 12px na raiz padrão. |
| fontSize30 | 0.875rem | Opção de texto corrido de 14 px. |
| fontSize40 | 1rem | Opção de texto corrido de 16 px. |
| fontSize60 | 1.25rem | Opção de título de 20 px. |
| fontSize70 | 1.5rem | Opção de título de 24 px. |
| fontSize90 | 2rem | Opção de destaque de 32 px. |
### Alturas de linha
| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| lineHeight20 / lineHeight30 | 1.25rem | 20 px para texto compacto. |
| lineHeight40 | 1.5rem | 24 px para texto de 16 px. |
| lineHeight60 | 1.75rem | 28 px para texto de 20 px. |
| lineHeight70 | 2rem | 32 px para texto de 24 px. |
### Arredondamentos
| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| borderRadius10 | 2px | Menor raio de canto. |
| borderRadius20 | 4px | Raio pequeno para controles. |
| borderRadius30 | 8px | Raio pequeno-médio. |
| borderRadius40 | 12px | Raio médio. |
| borderRadiusCircle | 50% | Exige largura e altura iguais para formar um círculo. |
| borderRadiusPill | 100px | Raio de pílula, diferente do raio de círculo. |
### Funções e combinações de texto
| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| colorText | palette-gray-100 | Texto principal; corresponde a #121c2d na paleta vinculada. |
| colorTextWeak | palette-gray-60 | Texto secundário; corresponde a #606b85. |
| colorTextLink | palette-blue-60 | Links; corresponde a #0263e0. |
| colorTextError | palette-red-60 | Texto de erro; corresponde a #db132a. |
| colorTextSuccess | palette-green-70 | Texto de sucesso; corresponde a #0e7c3a. |
| colorTextWeaker | palette-gray-40 | A fonte alerta para não usar esse recurso como texto habilitado comum. |
### Comportamento dos botões
| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| variant | primary / secondary / destructive / link and other explicit variants | O exemplo usa os estilos primário para envio e secundário para alternância. |
| type | button by default | Defina explicitamente submit para enviar o formulário. |
| pressed | Secondary family only | Use o estilo secundário para a alternância de tema. |
| loading | aria-busy and disabled control behavior | Use apenas para uma operação realmente pendente. |
| as="a" | Requires href | Links de navegação não aceitam estados de botão desativado/carregando. |
| tabIndex | 0 or -1 | Índices positivos de tabulação são rejeitados. |
### Nomes de tema
| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| default / dark | Theme variants | A seleção de tema é explícita. |
| twilio / twilio-dark | Separate variants | Não descreva todas as variantes como idênticas à padrão. |
| sendgrid / evergreen | Additional variants | Escolha com intenção, em vez de usar brand como decoração arbitrária. |
## Guia completo do sistema de design Twilio Paste
Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real.
Orientações completas, um ponto de partida para a implementação e links para o código-fonte.
## Sistema de design Twilio Paste: use o sistema original sem confundi-lo com a ramificação da documentação
### Fonte do Twilio e continuação independente
> O Paste é publicado no repositório twilio-labs. Durante a verificação, antigas rotas da documentação em paste.twilio.design redirecionavam para esse repositório. O site Paste DSys, hospedado separadamente, se descreve como uma ramificação independente sem vínculo com o Twilio. Por isso, este guia fundamenta os valores dos tokens e o comportamento dos componentes nos arquivos da fonte original.
Um compositor de notificações é um exemplo útil porque revela vários estados que não cabem em uma galeria estática de botões: conteúdo editável, confirmação da revisão, um instantâneo preparado e um limite claro antes do envio. Esta prévia não chama nenhum recurso do Twilio API.
Consulte a especificação de apoio
## Sistema de design Twilio Paste: consulte a escala de espaçamento antes de escolher um sufixo
### Os números dos tokens são nomes, não valores em pixels
space30 equivale a meio rem, enquanto space70 equivale a um rem e meio. Os sufixos 30 e 70 indicam posições na escala, não 30 px e 70 px. Com uma raiz de 16 px, o compositor pode usar 8 px entre o rótulo e o campo, 12 px de preenchimento interno em um controle e 24 px entre regiões.
A fonte YAML usa nomes com hífen. A tabela de referência apresenta os nomes no estilo JavaScript usados pelos consumidores do Paste e exibe ao lado os valores correspondentes. Um valor baseado em rem varia conforme o tamanho da fonte raiz; seu equivalente em pixels não deve ser tratado como uma medida fixa no navegador.
Consulte a especificação de apoio
## Sistema de design Twilio Paste: combine tamanhos de fonte com tokens de altura de linha independentes
### A escala não pressupõe valores numéricos iguais
Os aliases de fonte e de altura de linha são separados. fontSize30 equivale a 14 px na raiz padrão, e lineHeight30 equivale a 20 px. fontSize70 equivale a 24 px, com opção de altura de linha de 32 px. Essas combinações mantêm rótulos e conteúdo com várias linhas legíveis, sem transformar todas as seções em grandes títulos de marketing.
O exemplo incorporado usa uma pilha sans-serif do sistema e uma ilustração de celular criada pela aplicação. Essas escolhas são explicitamente ilustrativas. Nenhum arquivo de fonte proprietário é redistribuído, e nenhuma dimensão da moldura do celular é apresentada como token do Paste.
Consulte a especificação de apoio
## Sistema de design Twilio Paste: funções semânticas de texto incluem restrições de contraste
### Texto de baixo contraste não é o mesmo que texto desativado
A fonte original de cores registra as combinações de contraste junto com as funções. Texto principal, texto secundário, erros e mensagens de sucesso têm funções de cor de primeiro plano distintas. A função de texto de baixo contraste traz um alerta para que não seja usada em controles habilitados comuns. Um contador de caracteres atenuado não deve simplesmente receber o cinza mais claro disponível.
No exemplo, o azul indica uma ação e o texto em tom neutro escuro transmite a mensagem. O rascunho preparado não fica verde apenas porque o usuário pressionou um botão: seu status informa que foi criado um instantâneo local. Os valores do exemplo correspondem à paleta vinculada; outras variantes de tema podem produzir valores diferentes.
Consulte a especificação de apoio
## Sistema de design Twilio Paste: a seleção de tema é uma alteração explícita de estado
### Variantes de Provider e superfícies da aplicação
Theme exporta um Provider e um Consumer, além de objetos de tema nomeados e utilitários. As constantes atuais de variantes incluem default, dark, twilio, twilio-dark, sendgrid e evergreen. O exemplo alterna intencionalmente apenas entre default e dark.
Os controles nativos pertencentes à aplicação precisam de um tratamento de superfície correspondente quando o Provider muda. Um Provider pode aplicar um tema aos componentes do Paste, mas não reformula automaticamente todos os widgets externos. O código fornecido define explicitamente as cores de primeiro plano e de fundo ao redor e identifica a área de texto como pertencente à aplicação.
Consulte a especificação de apoio
## Sistema de design Twilio Paste: use o estado pressionado apenas em uma família de botões compatível
### Ações, navegação e operações pendentes têm contratos diferentes
A implementação de Button valida determinadas combinações de propriedades. A alternância de tema usa secondary com pressed. A ação do formulário define type="submit", pois, por padrão, o componente usa o tipo button. Um botão com aparência de âncora exige href e não pode ser tratado como uma ação desativada ou em carregamento.
- Use primary para preparar o rascunho e secondary para a alternância independente de tema.
- Mantenha a navegação como um link; não adicione href a um botão sem a forma de âncora correspondente.
- Use o estado de carregamento apenas para uma operação realmente pendente, pois ele altera tanto o comportamento de ocupado quanto o de desativado.
- Evite valores positivos de tabIndex; a implementação restringe os valores compatíveis a 0 e -1.
Consulte a especificação de apoio
## Sistema de design Twilio Paste Separe o texto editável da cópia revisada
### Uma sequência fiel ao que acontece
A prévia ao vivo acompanha o valor atual da área de texto. A cópia preparada é armazenada separadamente e só muda após a validação. Uma nova edição não deve reescrever silenciosamente a cópia preparada anteriormente. A caixa de seleção de revisão é um exercício de interação local, não uma evidência de consentimento do destinatário nem de conformidade legal.
1. Escreva o conteúdo na área de texto identificada por um rótulo.
2. Revise a mensagem atual e marque a caixa de seleção de revisão local para confirmar.
3. Prepare uma cópia sem chamar nenhum serviço de mensagens.
4. Edite novamente e compare o rascunho com a cópia preparada antes de preparar uma nova cópia.
Consulte a especificação de apoio
## Sistema de design Twilio Paste Torne o feedback compreensível sem exigir a interpretação de uma maquete de celular
### Rótulos e feedback em texto ficam fora da ilustração
A área de texto tem um rótulo visível e está vinculada às descrições da contagem e do erro. A contagem considera pontos de código Unicode; ela não pretende medir a segmentação de SMS, a codificação ou o custo. O resultado preparado também aparece como texto comum fora do dispositivo ilustrativo.
A validação deve identificar uma mensagem vazia ou a falta da confirmação de revisão. A região de status anuncia o resultado local sem fingir que uma mensagem foi entregue. O foco do teclado permanece visível em todos os controles nativos e botões, inclusive em uma janela de visualização estreita.
Consulte a especificação de apoio
## Sistema de design Twilio Paste Verifique o pacote separadamente da interpretação offline
### O que o exemplo fornecido comprova
A configuração importa os pacotes reais Paste Theme e Button e apresenta uma composição completa de React. Os controles nativos do formulário são identificados como pertencentes à aplicação, sem serem atribuídos a um componente API não verificado. A versão incorporada é uma interpretação offline de HTML, sem dependência de CDN externa.
Antes de usar isso em um serviço, resolva as dependências de peer, compile o exemplo nativo e adicione uma fronteira de backend real para o envio. Um teste bem-sucedido da prévia local comprova o comportamento do editor, não uma integração de mensagens em produção nem uma alegação sobre entregas pelo Twilio.
Consulte a especificação de apoio
## Sistema de design Twilio Paste Exemplos de componentes
### Exemplo interativo completo e independente
Salve o documento completo como index.html e abra-o em um navegador. Interpretação offline de HTML das escalas do Paste upstream e das regras de estado dos botões; não é o runtime nativo nem um serviço de mensagens.
```
Paste notification draft studioPaste / Message studioLocal preview
Notification draft
Write the message. Review the copy. Keep a prepared version.
Prepared copy
No draft prepared yet.
Nothing has been sent.
HTML interpretation of upstream Paste · Counts Unicode code points, not SMS segments · No messaging connection
```
Referência de código
- O painel do celular exibe um instantâneo do rascunho. Nenhum SMS é enviado; o comportamento nativo de Paste Theme e Button exige o exemplo React separado.
### Um rascunho local com o tema Paste real e o estado do botão
Theme.Provider envolve todo o editor. O estado pressionado secundário altera o tema da prévia; um botão de envio primário prepara uma cópia após a validação da aplicação. O rótulo, a área de texto e a caixa de seleção são explicitamente controles nativos da aplicação.
```
// npm install @twilio-paste/button @twilio-paste/theme react react-dom
import React, {useState} from 'react';
import {createRoot} from 'react-dom/client';
import {Theme} from '@twilio-paste/theme';
import {Button} from '@twilio-paste/button';
// Native textarea and labels are application-owned; this is not Paste TextArea.
function Composer() {
const [message,setMessage] = useState('Your appointment is confirmed for Thursday at 10:00.');
const [snapshot,setSnapshot] = useState('');
const [error,setError] = useState('');
const [confirmed,setConfirmed] = useState(false);
const [mode,setMode] = useState('default');
const length = Array.from(message).length;
const background = mode === 'dark' ? '#121c2d' : '#ffffff';
const foreground = mode === 'dark' ? '#ffffff' : '#121c2d';
function prepare(event) {
event.preventDefault();
if (!message.trim()) return setError('Write a message before preparing a draft.');
if (!confirmed) return setError('Confirm that you reviewed the message.');
setError(''); setSnapshot(message.trim());
}
return