Sistema de diseño Twilio Paste.

Sistema de diseño Twilio Paste: usa el sistema original sin confundirlo con la bifurcación de la documentación

Fuente de Twilio y continuación independiente

Paste se publica en el repositorio twilio-labs. Durante la verificación, las antiguas rutas de documentación de paste.twilio.design redirigían a ese repositorio. El sitio independiente Paste DSys se describe como una bifurcación sin afiliación con Twilio. Por lo tanto, esta guía fundamenta los valores de los tokens y el comportamiento de los componentes en archivos de la fuente original.

Un compositor de notificaciones es un ejemplo útil porque muestra varios estados que no se pueden representar con una galería estática de botones: contenido editable, confirmación de revisión, una copia preparada y un límite claro antes del envío. Esta vista previa no realiza ninguna llamada a Twilio API.

Consulta la especificación complementaria

Sistema de diseño Twilio Paste: consulta la escala de espaciado antes de elegir un sufijo

Los números de los tokens son nombres, no valores en píxeles

space30 equivale a medio rem, mientras que space70 equivale a un rem y medio. Los sufijos 30 y 70 indican posiciones en la escala, no 30px ni 70px. Con una raíz de 16px, el compositor puede usar 8px entre la etiqueta y el campo, 12px dentro de un control y 24px entre regiones.

La fuente YAML usa nombres separados por guiones. La tabla de referencia muestra los nombres al estilo de JavaScript que usan los consumidores de Paste y presenta junto a ellos los valores resueltos. Un valor basado en rem cambia según el tamaño de fuente raíz; su equivalente en píxeles no debe considerarse una medida invariable del navegador.

Consulta la especificación complementaria

Sistema de diseño Twilio Paste: combina los tamaños de fuente con tokens de interlineado independientes

La escala no implica que los valores numéricos sean iguales

Los alias de fuente e interlineado son independientes. fontSize30 equivale a 14px con el tamaño raíz predeterminado y lineHeight30 equivale a 20px. fontSize70 equivale a 24px con una opción de interlineado de 32px. Estas combinaciones mantienen la legibilidad de las etiquetas y el contenido en varias líneas sin convertir cada sección en un encabezado publicitario de gran tamaño.

El ejemplo integrado usa una pila de fuentes sans serif del sistema y una ilustración de teléfono propia de la aplicación. Esas elecciones son explícitamente ilustrativas. No se redistribuyen archivos de fuentes propietarias ni se presentan las dimensiones del marco del teléfono como tokens de Paste.

Consulta la especificación complementaria

Sistema de diseño Twilio Paste: los roles semánticos de texto incluyen requisitos de contraste

El texto de bajo contraste no equivale al texto deshabilitado

La fuente original de colores registra las combinaciones de contraste junto con los roles. El texto principal, el secundario, los errores y los mensajes de éxito tienen distintos roles de color de primer plano previstos. El rol de texto de menor contraste advierte que no debe usarse en controles habilitados normales. Un contador de caracteres atenuado no debería usar simplemente el gris más tenue disponible.

En el ejemplo, el azul indica acciones y el texto en un tono neutro oscuro transmite el mensaje. El borrador preparado no se vuelve verde solo porque el usuario haya pulsado un botón: su estado indica que se creó una copia local. Los valores del ejemplo corresponden a la paleta enlazada; otras variantes del tema pueden producir resultados diferentes.

Consulta la especificación complementaria

Twilio Paste La selección del tema de Sistema de diseño es un cambio de estado explícito

Variantes del proveedor y superficies de la aplicación

Theme exporta un Provider y un Consumer, junto con objetos de tema con nombre y utilidades. Las constantes de variante actuales incluyen default, dark, twilio, twilio-dark, sendgrid y evergreen. El ejemplo alterna intencionadamente solo entre default y dark.

Los controles nativos propiedad de la aplicación necesitan un tratamiento de superficie acorde cuando cambia el proveedor. Un proveedor puede aplicar un tema a los componentes de Paste, pero no cambia automáticamente el estilo de todos los widgets externos. El código proporcionado establece explícitamente los colores de primer plano y de fondo del contenedor, e identifica el área de texto como propiedad de la aplicación.

Consulta la especificación complementaria

Sistema de diseño Twilio Paste: usa el estado pressed solo en una familia de botones compatible

Las acciones, la navegación y las tareas pendientes tienen comportamientos distintos

La implementación de Button valida ciertas combinaciones de propiedades. El selector de tema usa secondary con pressed. La acción del formulario establece type="submit", ya que el componente usa por defecto el tipo button. Un botón con apariencia de enlace requiere href y no puede tratarse como una acción deshabilitada o en proceso de carga.

• Usa primary para preparar el borrador y secondary para el selector de tema independiente.
• Mantén la navegación como enlace; no añadas href a un botón sin la forma de ancla correspondiente.
• Reserva loading para una operación que realmente esté en curso, ya que modifica tanto el comportamiento de busy como el de disabled.
• Evita los valores positivos de tabIndex; la implementación limita los valores admitidos a 0 y -1.

Consulta la especificación complementaria

Sistema de diseño Twilio Paste: separa el texto editable de la copia revisada

Una secuencia fiel

La vista previa en vivo refleja el valor actual del área de texto. El texto preparado se almacena por separado y solo cambia tras la validación. Volver a editar no debe modificar silenciosamente la copia preparada anteriormente. La casilla de revisión es una interacción local de ejemplo, no una prueba del consentimiento del destinatario ni del cumplimiento legal.

1. Escribe el contenido en el área de texto etiquetada.
2. Revisa el mensaje actual y marca la casilla de revisión local para confirmarlo.
3. Prepara una copia sin llamar a ningún servicio de mensajería.
4. Vuelve a editar y compara el borrador con la copia preparada antes de preparar una nueva.

Consulta la especificación complementaria

Sistema de diseño Twilio Paste: ofrece comentarios comprensibles sin depender de la interpretación de una ilustración de teléfono

Las etiquetas y los comentarios de texto están fuera de la ilustración

El área de texto tiene una etiqueta visible y está vinculada a las descripciones del recuento y del error. El recuento se define como el número de puntos de código Unicode; no pretende medir la segmentación de SMS, la codificación ni el coste. El resultado preparado también aparece como texto normal fuera del dispositivo ilustrativo.

La validación debe señalar si el mensaje está vacío o si falta la confirmación de revisión. La región de estado anuncia el resultado local sin dar a entender que se entregó un mensaje. El foco del teclado permanece visible en todos los controles nativos y botones, también en la vista estrecha.

Consulta la especificación complementaria

Sistema de diseño Twilio Paste: verifica el paquete por separado de la interpretación sin conexión

Qué demuestra el ejemplo proporcionado

La configuración importa los paquetes reales Paste Theme y Button y ofrece una composición completa React. Los controles nativos del formulario se identifican como propiedad de la aplicación, en lugar de atribuirlos a un componente no verificado API. La interpretación integrada es una versión sin conexión HTML que no depende de una CDN externa.

Antes de usarlo en un servicio, resuelve las dependencias entre pares, compila el ejemplo nativo y añade una frontera real de backend para el envío. Una prueba satisfactoria de la vista previa local demuestra el comportamiento del editor, no una integración de mensajería en producción ni que se haya enviado un mensaje con Twilio.

Consulta la especificación complementaria

Twilio Paste Ejemplos de componentes del Sistema de diseño

<!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 />);