Sistema de design Twilio Paste.

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

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Paste notification draft studio</title><style>
*{box-sizing:border-box}body{margin:0;background:#f4f4f6;color:#121c2d;font:14px/20px Arial,sans-serif}header{background:#121c2d;color:white;padding:20px 32px;display:flex;justify-content:space-between;gap:16px}.brand{font-weight:700;letter-spacing:.02em}header small{color:#cacdd8}main{max-width:1000px;padding:32px;margin:auto}h1{font-size:28px;line-height:40px;margin:0 0 8px}h2{font-size:18px;line-height:28px;margin:0 0 16px}.intro{color:#606b85;margin:0 0 32px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:32px}form{background:white;border:1px solid #e1e3ea;border-radius:8px;padding:24px}label{display:block;font-weight:600}textarea{width:100%;font:16px/24px Arial,sans-serif;border:1px solid #8891aa;border-radius:4px;padding:12px;margin-top:8px;resize:vertical;min-height:150px}textarea:focus,button:focus-visible,input:focus-visible{outline:3px solid #0263e0;outline-offset:3px}.count{color:#606b85;font-size:12px;line-height:20px}.review{display:flex;align-items:start;gap:8px;margin-top:24px}.review label{font-weight:400}.review input{width:16px;height:16px;accent-color:#0263e0}button{font:600 14px/20px Arial,sans-serif;cursor:pointer;border:1px solid #0263e0;border-radius:4px;padding:10px 16px;background:#0263e0;color:white}button:hover{background:#043cb5}button.secondary{background:white;color:#0263e0}.error{color:#ad1111;min-height:20px}aside{text-align:center}.phone{margin:auto;background:white;border:8px solid #121c2d;border-radius:32px;min-height:400px;padding:24px 12px;box-shadow:0 12px 32px #121c2d14}.notch{width:72px;height:5px;background:#121c2d;border-radius:8px;margin:0 auto 24px}.sender{font-size:12px;color:#606b85;padding-bottom:16px;border-bottom:1px solid #e1e3ea}.bubble{background:#ebf4ff;border-radius:12px;padding:12px;margin-top:24px;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere;min-height:70px}.caption{font-size:12px;color:#606b85}.prepared{padding:24px;background:#fff;border:1px solid #e1e3ea;border-radius:8px;margin-top:24px}.prepared p{white-space:pre-wrap;overflow-wrap:anywhere}.status{color:#606b85;font-size:12px}.foot{font-size:12px;color:#606b85;margin-top:24px}@media(max-width:650px){header{padding:16px}main{padding:24px 16px}.layout{grid-template-columns:1fr}.phone{max-width:250px;min-height:300px}form{padding:20px}.intro{margin-bottom:24px}}
</style><header><span class="brand">Paste / Message studio</span><small>Local preview</small></header><main><h1>Notification draft</h1><p class="intro">Write the message. Review the copy. Keep a prepared version.</p><div class="layout"><div><form id="composer" novalidate><h2>Compose your message</h2><label for="message">Message</label><textarea id="message" aria-describedby="count error">Your appointment is confirmed for Thursday at 10:00.</textarea><p id="count" class="count"></p><div class="review"><input id="reviewed" type="checkbox"><label for="reviewed">I reviewed this draft</label></div><p id="error" class="error" role="alert"></p><button>Prepare local draft</button></form><section class="prepared"><h2>Prepared copy</h2><p id="snapshot">No draft prepared yet.</p><p class="status" id="status" role="status">Nothing has been sent.</p></section></div><aside><div class="phone" aria-label="Illustrative phone preview"><div class="notch"></div><div class="sender">Sample service · Preview</div><div class="bubble" id="bubble"></div></div><p class="caption">Live preview of the editable message</p></aside></div><p class="foot">HTML interpretation of upstream Paste · Counts Unicode code points, not SMS segments · No messaging connection</p></main><script>
const $=id=>document.getElementById(id);function update(){$('bubble').textContent=$('message').value||'Your message will appear here.';$('count').textContent=Array.from($('message').value).length+' Unicode code points. Not an SMS segment estimate.'}$('message').oninput=()=>{update();$('reviewed').checked=false};$('composer').onsubmit=e=>{e.preventDefault();$('error').textContent='';$('message').removeAttribute('aria-invalid');if(!$('message').value.trim()){$('error').textContent='Write a message before preparing a draft.';$('message').setAttribute('aria-invalid','true');$('message').focus();return}if(!$('reviewed').checked){$('error').textContent='Confirm that you reviewed the message.';$('reviewed').focus();return}$('snapshot').textContent=$('message').value.trim();$('status').textContent='Draft prepared locally. Nothing was sent.'};update();
</script></html>

// 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 <Theme.Provider theme={mode}>
    <main style={{padding:24,background,color:foreground,maxWidth:760,margin:'auto'}}>
      <h1>Notification draft</h1>
      <Button variant="secondary" pressed={mode==='dark'} onClick={() => setMode(mode==='dark'?'default':'dark')}>Dark preview</Button>
      <form onSubmit={prepare}>
        <label htmlFor="message" style={{display:'block',marginTop:24}}>Message</label>
        <textarea id="message" rows={5} value={message} onChange={e=>{setMessage(e.target.value);setConfirmed(false);}}
          aria-describedby="count error" aria-invalid={!!error}
          style={{width:'100%',padding:12,margin:'8px 0',font:'inherit',borderRadius:4}} />
        <p id="count">{length} Unicode code points. This is not an SMS segment estimate.</p>
        <label><input type="checkbox" checked={confirmed} onChange={e=>setConfirmed(e.target.checked)} /> I reviewed this draft</label>
        <p id="error" role="alert">{error}</p>
        <Button variant="primary" type="submit">Prepare local draft</Button>
      </form>
      <section aria-label="Prepared draft" style={{marginTop:24}}>
        <h2>Prepared copy</h2>
        <p style={{whiteSpace:'pre-wrap'}}>{snapshot || 'No draft prepared yet.'}</p>
        <p role="status">{snapshot ? 'Draft prepared locally. Nothing was sent.' : ''}</p>
      </section>
    </main>
  </Theme.Provider>;
}
createRoot(document.getElementById('root')).render(<Composer />);