# Sistema de diseño Twilio Paste
## Vista previa de la interfaz del sistema de diseño Twilio Paste
Edita el contenido, revisa su vista previa para móvil y prepara una copia local independiente.
## Referencia de diseño del sistema de diseño Twilio Paste
Fuente original de twilio-labs/paste verificada. Los valores siguientes distinguen los nombres de tokens YAML de sus nombres al estilo de JavaScript. Esta referencia no presenta la bifurcación independiente Paste DSys como documentación de Twilio.
### Alias de espaciado
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| space10 | 0.125rem | 2px con una raíz de 16px. |
| space20 | 0.25rem | 4px con una raíz de 16px. |
| space30 | 0.5rem | Separación de campos de 8px. |
| space40 | 0.75rem | Relleno de controles de 12px. |
| space50 | 1rem | Agrupación local de 16px. |
| space60 | 1.25rem | 20px. |
| space70 | 1.5rem | Separación entre secciones de 24px. |
| space90 | 2rem | Agrupación amplia de 32px. |
| space130 | 3rem | Región más amplia de 48px. |
### Alias de tamaño de fuente
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| fontSize20 | 0.75rem | 12px con el tamaño de raíz predeterminado. |
| fontSize30 | 0.875rem | Opción de texto de cuerpo de 14px. |
| fontSize40 | 1rem | Opción de texto de cuerpo de 16px. |
| fontSize60 | 1.25rem | Opción de encabezado de 20px. |
| fontSize70 | 1.5rem | Opción de encabezado de 24px. |
| fontSize90 | 2rem | Opción de texto destacado de 32px. |
### Alturas de línea
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| lineHeight20 / lineHeight30 | 1.25rem | 20px para texto compacto. |
| lineHeight40 | 1.5rem | 24px para texto de 16px. |
| lineHeight60 | 1.75rem | 28px para texto de 20px. |
| lineHeight70 | 2rem | 32px para texto de 24px. |
### Radios
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| borderRadius10 | 2px | Radio de esquina más pequeño. |
| borderRadius20 | 4px | Radio pequeño para controles. |
| borderRadius30 | 8px | Radio pequeño-mediano. |
| borderRadius40 | 12px | Radio mediano. |
| borderRadiusCircle | 50% | Requiere el mismo ancho y alto para formar un círculo. |
| borderRadiusPill | 100px | Radio de píldora, distinto del círculo. |
### Roles de texto y combinaciones
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| colorText | palette-gray-100 | Texto principal; se resuelve como #121c2d en la paleta vinculada. |
| colorTextWeak | palette-gray-60 | Texto secundario; se resuelve como #606b85. |
| colorTextLink | palette-blue-60 | Enlaces; se resuelven como #0263e0. |
| colorTextError | palette-red-60 | Texto de error; se resuelve como #db132a. |
| colorTextSuccess | palette-green-70 | Texto de éxito; se resuelve como #0e7c3a. |
| colorTextWeaker | palette-gray-40 | La fuente advierte que no debe usarse como texto habilitado normal. |
### Comportamiento de los botones
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| variant | primary / secondary / destructive / link and other explicit variants | El ejemplo usa un botón principal para enviar y uno secundario para alternar. |
| type | button by default | Establece explícitamente submit para enviar el formulario. |
| pressed | Secondary family only | Usa el estilo secundario para el selector de tema. |
| loading | aria-busy and disabled control behavior | Úsalo solo para una operación realmente pendiente. |
| as="a" | Requires href | Los enlaces de navegación no admiten estados de botón deshabilitado ni de carga. |
| tabIndex | 0 or -1 | Se rechazan los índices de tabulación positivos. |
### Nombres de temas
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| default / dark | Theme variants | La selección del tema es explícita. |
| twilio / twilio-dark | Separate variants | No describas todas las variantes como si fueran idénticas a la predeterminada. |
| sendgrid / evergreen | Additional variants | Elige con intención en lugar de usar el estilo de marca como adorno arbitrario. |
## Guía completa del sistema de diseño Twilio Paste
Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.
Orientación completa, un punto de partida para la implementación y enlaces al código fuente.
## 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
### Muestra interactiva independiente completa
Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación sin conexión HTML de las escalas y las reglas de estado de los botones de Paste upstream; no es el entorno de ejecución nativo ni un servicio de mensajería.
```
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
```
Referencia de código
- El panel del teléfono muestra una copia del borrador. No se envía ningún SMS; el comportamiento nativo de Paste Theme y Button requiere el ejemplo independiente React.
### Un borrador local con el tema y el estado del botón reales de Paste
Theme.Provider envuelve el compositor completo. El estado pressed de secondary cambia el tema de la vista previa; un botón de envío primary prepara una copia tras la validación de la aplicación. Las etiquetas, el área de texto y la casilla se especifican explícitamente como controles nativos de la aplicación.
```
// 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