# Sistema di progettazione Twilio Paste
## Anteprima dell’interfaccia del sistema di progettazione sistema di design Twilio Paste
Modifica i contenuti, controllane l’anteprima per telefono e prepara un’istantanea locale separata.
## Riferimento di progettazione per il sistema di progettazione sistema di design Twilio Paste
Fonte upstream verificata twilio-labs/paste. I valori qui sotto distinguono i nomi dei token YAML dai rispettivi nomi in stile JavaScript. Questo riferimento non presenta la diramazione indipendente Paste DSys come documentazione Twilio.
### Alias di spaziatura
| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| space10 | 0.125rem | 2px con una radice da 16px. |
| space20 | 0.25rem | 4px con una radice da 16px. |
| space30 | 0.5rem | 8px di separazione tra campi. |
| space40 | 0.75rem | 12px di spaziatura interna per i controlli. |
| space50 | 1rem | 16px per raggruppamenti locali. |
| space60 | 1.25rem | 20px. |
| space70 | 1.5rem | 24px di separazione tra sezioni. |
| space90 | 2rem | 32px per raggruppamenti ampi. |
| space130 | 3rem | 48px per aree più estese. |
### Alias delle dimensioni dei caratteri
| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| fontSize20 | 0.75rem | 12px con la radice predefinita. |
| fontSize30 | 0.875rem | Opzione per il testo del corpo da 14px. |
| fontSize40 | 1rem | Opzione per il testo del corpo da 16px. |
| fontSize60 | 1.25rem | Opzione per i titoli da 20px. |
| fontSize70 | 1.5rem | Opzione per i titoli da 24px. |
| fontSize90 | 2rem | Opzione per il testo in evidenza da 32px. |
### Altezze di riga
| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| lineHeight20 / lineHeight30 | 1.25rem | 20px per il testo compatto. |
| lineHeight40 | 1.5rem | 24px per il testo da 16px. |
| lineHeight60 | 1.75rem | 28px per il testo da 20px. |
| lineHeight70 | 2rem | 32px per il testo da 24px. |
### Raggi
| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| borderRadius10 | 2px | Raggio minimo degli angoli. |
| borderRadius20 | 4px | Raggio ridotto per i controlli. |
| borderRadius30 | 8px | Raggio medio-piccolo. |
| borderRadius40 | 12px | Raggio medio. |
| borderRadiusCircle | 50% | Richiede larghezza e altezza uguali per formare un cerchio. |
| borderRadiusPill | 100px | Raggio a pillola, distinto da quello circolare. |
### Ruoli del testo e abbinamenti
| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| colorText | palette-gray-100 | Testo principale; corrisponde a #121c2d nella palette collegata. |
| colorTextWeak | palette-gray-60 | Testo secondario; corrisponde a #606b85. |
| colorTextLink | palette-blue-60 | Collegamenti; corrisponde a #0263e0. |
| colorTextError | palette-red-60 | Testo di errore; corrisponde a #db132a. |
| colorTextSuccess | palette-green-70 | Testo di conferma; corrisponde a #0e7c3a. |
| colorTextWeaker | palette-gray-40 | La fonte sconsiglia di usarlo come testo normale attivo. |
### Comportamento dei pulsanti
| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| variant | primary / secondary / destructive / link and other explicit variants | L’esempio usa un pulsante primario per l’invio e uno secondario per l’attivazione. |
| type | button by default | Imposta esplicitamente submit per l'invio del modulo. |
| pressed | Secondary family only | Usa un pulsante secondario per il selettore del tema. |
| loading | aria-busy and disabled control behavior | Usalo solo per un’operazione realmente in corso. |
| as="a" | Requires href | I collegamenti di navigazione non supportano gli stati disabilitato/in caricamento dei pulsanti. |
| tabIndex | 0 or -1 | Gli indici positivi di tabulazione vengono rifiutati. |
### Nomi dei temi
| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| default / dark | Theme variants | La selezione del tema è esplicita. |
| twilio / twilio-dark | Separate variants | Non descrivere tutte le varianti come identiche a quella predefinita. |
| sendgrid / evergreen | Additional variants | Scegli con intenzione, senza usare il brand come decorazione arbitraria. |
## Guida completa al sistema di progettazione sistema di design Twilio Paste
Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale.
Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti.
## Sistema di progettazione sistema di design Twilio Paste: usa il sistema upstream senza confonderlo con la diramazione della documentazione
### Fonte Twilio e continuazione indipendente
> Paste è pubblicato nel repository twilio-labs. Durante la verifica, i vecchi percorsi della documentazione su paste.twilio.design reindirizzavano a quel repository. Il sito Paste DSys, ospitato separatamente, si presenta come una diramazione indipendente senza affiliazione con Twilio. Questa guida basa quindi i valori dei token e il comportamento dei componenti sui file sorgente upstream.
Un compositore di notifiche è un esempio utile perché mostra diversi stati che una galleria statica di pulsanti non può rappresentare: contenuti modificabili, conferma della revisione, un’istantanea preparata e un confine chiaro prima dell’invio. Questa anteprima non chiama alcun API Twilio.
Leggi la specifica di supporto
## Sistema di progettazione sistema di design Twilio Paste: leggi la scala di spaziatura prima di scegliere un suffisso
### I numeri dei token sono nomi, non valori in pixel
space30 corrisponde a mezzo rem, mentre space70 corrisponde a un rem e mezzo. I suffissi 30 e 70 indicano posizioni nella scala, non 30px e 70px. Con una radice da 16px, il compositore può usare 8px tra etichetta e campo, 12px all’interno di un controllo e 24px tra le aree.
La sorgente YAML usa nomi con trattini. La tabella di riferimento mostra i nomi in stile JavaScript usati da chi utilizza Paste e affianca loro i valori risolti. Un valore basato su rem si adatta alla dimensione del carattere radice; il suo equivalente in pixel non va considerato una misurazione incondizionata del browser.
Leggi la specifica di supporto
## Sistema di progettazione sistema di design Twilio Paste: abbina le dimensioni dei caratteri a token di interlinea separati
### La scala non implica valori numerici identici
Gli alias per dimensione del carattere e interlinea sono separati. fontSize30 corrisponde a 14px con la dimensione radice predefinita, mentre lineHeight30 corrisponde a 20px. fontSize70 corrisponde a 24px, con un'opzione di interlinea di 32px. Queste coppie mantengono leggibili le etichette e i contenuti su più righe, senza trasformare ogni sezione in un grande titolo promozionale.
L'esempio incorporato usa una famiglia di caratteri sans-serif di sistema e un'illustrazione del telefono realizzata dall'applicazione. Queste scelte sono esplicitamente illustrative. Non viene ridistribuito alcun file di caratteri proprietario e le dimensioni della cornice del telefono non sono presentate come token Paste.
Leggi la specifica di supporto
## Sistema di progettazione sistema di design Twilio Paste: i ruoli semantici del testo includono vincoli di contrasto
### Il testo poco visibile non equivale al testo disabilitato
La sorgente dei colori a monte registra gli abbinamenti di contrasto insieme ai ruoli. Il testo principale, quello secondario, gli errori e i messaggi di successo hanno ruoli di primo piano previsti distinti. Per il ruolo del testo meno visibile è indicato di non usarlo per i normali controlli attivi. Il conteggio dei caratteri non dovrebbe quindi usare semplicemente il grigio più tenue disponibile.
Nell'esempio il blu indica l'azione, mentre il testo neutro scuro comunica il messaggio. La bozza preparata non diventa verde solo perché l'utente ha premuto un pulsante: il suo stato spiega che è stata creata un'istantanea locale. I valori di esempio corrispondono alla palette collegata; le altre varianti del tema potrebbero risolversi in modo diverso.
Leggi la specifica di supporto
## Sistema di progettazione sistema di design Twilio Paste: la selezione del tema è un cambio di stato esplicito
### Varianti del provider e superfici dell'applicazione
Theme esporta un Provider e un Consumer, insieme a oggetti tema con nome e utilità. Le costanti delle varianti attuali includono default, dark, twilio, twilio-dark, sendgrid ed evergreen. L'esempio passa intenzionalmente solo da default a dark.
Quando cambia il provider, i controlli nativi appartenenti all'applicazione devono ricevere un trattamento della superficie corrispondente. Un provider può applicare il tema ai componenti Paste, ma non modifica automaticamente ogni widget esterno. Il codice fornito imposta esplicitamente i colori di primo piano e di sfondo dell'area circostante e indica che la textarea appartiene all'applicazione.
Leggi la specifica di supporto
## Sistema di progettazione sistema di design Twilio Paste: usa lo stato premuto solo con una famiglia di pulsanti supportata
### Azioni, navigazione e operazioni in sospeso hanno comportamenti distinti
L'implementazione di Button convalida alcune combinazioni di proprietà. L'interruttore del tema usa secondary con pressed. L'azione del modulo imposta type="submit", poiché il tipo predefinito del componente è button. Un pulsante con forma di collegamento richiede href e non può essere trattato come un'azione disabilitata o in caricamento.
- Usa primary per preparare la bozza e secondary per l'interruttore indipendente del tema.
- Mantieni la navigazione sotto forma di collegamento; non aggiungere href a un pulsante senza usare la corrispondente variante ad ancora.
- Riserva loading alle operazioni effettivamente in sospeso, poiché modifica sia il comportamento di busy sia quello di disabled.
- Evita valori di tabIndex positivi; l'implementazione supporta solo 0 e -1.
Leggi la specifica di supporto
## Sistema di progettazione sistema di design Twilio Paste: separa il testo modificabile dall'istantanea revisionata
### Una sequenza trasparente
L'anteprima in tempo reale segue il valore corrente della textarea. La copia preparata viene archiviata separatamente e cambia solo dopo la convalida. Le modifiche successive non devono riscrivere in modo silenzioso l'istantanea già preparata. La casella di controllo per la revisione è un'interazione locale dimostrativa, non prova del consenso del destinatario né della conformità legale.
1. Scrivi il contenuto nella textarea con etichetta.
2. Esamina il messaggio corrente e seleziona la casella di controllo locale per confermare la revisione.
3. Prepara un'istantanea senza contattare alcun servizio di messaggistica.
4. Modifica di nuovo il testo e confronta la bozza con la copia preparata prima di creare una nuova istantanea.
Leggi la specifica di supporto
## Sistema di progettazione sistema di design Twilio Paste: rendi comprensibili i feedback senza dover interpretare un modello di telefono
### Etichette e feedback testuale restano all'esterno dell'illustrazione
La textarea ha un'etichetta visibile ed è collegata alle descrizioni del conteggio e degli errori. Il conteggio è definito in punti di codice Unicode; non pretende di misurare la segmentazione degli SMS, la codifica o i costi. Anche il risultato preparato è visibile come testo normale all'esterno del dispositivo illustrativo.
La convalida deve segnalare un messaggio vuoto o la mancata conferma della revisione. La regione di stato annuncia il risultato locale senza far credere che il messaggio sia stato inviato. Il focus da tastiera resta visibile su tutti i controlli nativi e sui pulsanti, anche nella visualizzazione stretta.
Leggi la specifica di supporto
## Sistema di progettazione sistema di design Twilio Paste: verifica separatamente il pacchetto e l'interpretazione offline
### Cosa dimostra l'esempio fornito
La configurazione importa i pacchetti reali Paste Theme e Button e include una composizione completa di React. I controlli nativi del modulo sono dichiarati come appartenenti all'applicazione, anziché attribuiti a un componente API non verificato. La versione incorporata è un'interpretazione offline di HTML, senza dipendenze da CDN esterni.
Prima di usarla in un servizio, risolvi le dipendenze peer, compila l'esempio nativo e aggiungi un vero confine di backend per l'invio. Un test locale dell'anteprima riuscito dimostra il comportamento dell'editor, non l'integrazione di un servizio di messaggistica in produzione né l'effettiva consegna tramite Twilio.
Leggi la specifica di supporto
## Esempi di componenti del sistema di progettazione sistema di design Twilio Paste
### Esempio interattivo completo e autonomo
Salva il documento completo come index.html e aprilo in un browser. Interpretazione offline di HTML delle scale Paste a monte e delle regole sugli stati dei pulsanti; non è il runtime nativo né un servizio di messaggistica.
```
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
```
Riferimento del codice
- Il riquadro del telefono mostra un'istantanea della bozza. Non viene inviato alcun SMS; per il comportamento nativo di Paste Theme e Button è necessario l'esempio separato React.
### Una bozza locale con il tema Paste e gli stati dei pulsanti reali
Theme.Provider avvolge l'intero compositore. Lo stato secondario pressed cambia il tema dell'anteprima; un pulsante di invio primary prepara un'istantanea dopo la convalida dell'applicazione. Le etichette, la textarea e la casella di controllo sono esplicitamente controlli nativi dell'applicazione.
```
// 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