Twilio Paste Designsystem.

Twilio Paste Designsystem: Das Upstream-System nutzen, ohne es mit der Dokumentations-Abspaltung zu verwechseln

Twilio-Quelle und unabhängige Weiterentwicklung

Paste wird im Repository twilio-labs veröffentlicht. Während der Überprüfung wurden ältere Dokumentationsrouten von paste.twilio.design zu diesem Repository umgeleitet. Die separat gehostete Paste-DSys-Website bezeichnet sich als unabhängiger Fork ohne Zugehörigkeit zu Twilio. Dieser Leitfaden stützt Tokenwerte und Komponentenverhalten daher auf Upstream-Quelldateien.

Ein Benachrichtigungseditor ist ein nützliches Beispiel, da er mehrere Zustände zeigt, die sich nicht in einer statischen Button-Übersicht erfassen lassen: bearbeitbare Inhalte, Bestätigung der Prüfung, eine vorbereitete Momentaufnahme und eine klare Grenze vor dem Senden. Diese Vorschau ruft keine Twilio-API auf.

Unterstützende Spezifikation lesen

Twilio Paste Designsystem: Vor der Wahl eines Suffixes die Abstandsskala lesen

Tokennummern sind Bezeichnungen, keine Pixelwerte

space30 entspricht einem halben Rem, während space70 eineinhalb Rem entspricht. Die Suffixe 30 und 70 bezeichnen Positionen auf der Skala, nicht 30 px und 70 px. Bei einer Root-Schriftgröße von 16 px kann der Editor 8 px Abstand zwischen Beschriftung und Feld, 12 px Innenabstand im Steuerelement und 24 px Abstand zwischen Bereichen verwenden.

In der YAML-Quelle werden Namen mit Bindestrichen geschrieben. Die Referenztabelle zeigt Namen im JavaScript-Stil, die von Paste-Verbrauchern verwendet werden, und führt die aufgelösten Werte daneben auf. Ein Wert in Rem skaliert mit der Root-Schriftgröße; sein Pixeläquivalent sollte nicht als bedingungsloses Browsermaß verstanden werden.

Unterstützende Spezifikation lesen

Twilio Paste Designsystem: Schriftgrößen mit separaten Zeilenhöhen-Tokens kombinieren

Die Skala setzt keine identischen Zahlenwerte voraus

Schriftgrößen- und Zeilenhöhen-Aliase sind getrennt. fontSize30 entspricht bei der Standard-Root-Schriftgröße 14 px, lineHeight30 hingegen 20 px. fontSize70 entspricht 24 px und bietet eine Zeilenhöhe von 32 px. Diese Kombinationen sorgen für gut lesbare Beschriftungen und mehrzeilige Inhalte, ohne jeden Abschnitt wie eine große Marketingüberschrift wirken zu lassen.

Das eingebettete Beispiel verwendet einen serifenlosen Systemschriftstapel und eine anwendungseigene Smartphone-Illustration. Diese Entscheidungen dienen ausdrücklich nur der Veranschaulichung. Es wird keine proprietäre Schriftdatei weitergegeben, und die Abmessungen des Smartphone-Rahmens werden nicht als Paste-Tokens ausgegeben.

Unterstützende Spezifikation lesen

Twilio Paste Designsystem: Semantische Textrollen umfassen Kontrastvorgaben

Schwach hervorgehobener Text ist nicht dasselbe wie deaktivierter Text

Die Upstream-Farbquelle dokumentiert Kontrastkombinationen zusammen mit den jeweiligen Rollen. Haupttext, sekundärer Text, Fehlermeldungen und Erfolgsmeldungen haben unterschiedliche vorgesehene Vordergrundrollen. Für die schwächere Textrolle gilt der Warnhinweis, sie nicht für gewöhnliche aktivierte Steuerelemente zu verwenden. Eine dezente Zeichenzählung sollte nicht einfach den blassesten verfügbaren Grauton erhalten.

Im Beispiel kennzeichnet Blau Aktionen, während dunkler neutraler Text die Nachricht vermittelt. Der vorbereitete Entwurf wird nicht grün, nur weil jemand auf einen Button geklickt hat: Sein Status erklärt, dass eine lokale Momentaufnahme erstellt wurde. Die Beispielwerte beziehen sich auf die verknüpfte Palette; andere Theme-Varianten können andere Werte ergeben.

Unterstützende Spezifikation lesen

Twilio Paste Designsystem: Die Theme-Auswahl ist eine explizite Zustandsänderung

Anbietervarianten und Anwendungsoberflächen

Theme exportiert einen Provider und Consumer sowie benannte Theme-Objekte und Hilfsfunktionen. Zu den aktuellen Variantenkonstanten gehören default, dark, twilio, twilio-dark, sendgrid und evergreen. Das Beispiel wechselt absichtlich nur zwischen default und dark.

Anwendungsseitig verwaltete native Steuerelemente benötigen eine passende Oberflächengestaltung, wenn sich der Provider ändert. Ein Provider kann Paste-Komponenten gestalten, aber nicht automatisch jedes externe Widget umgestalten. Der bereitgestellte Code legt Vorder- und Hintergrundfarbe des umgebenden Bereichs ausdrücklich fest und kennzeichnet das Textarea als anwendungsseitig verwaltet.

Unterstützende Spezifikation lesen

Twilio Paste Design-System: Den Status pressed nur bei einer unterstützten Button-Familie verwenden

Aktionen, Navigation und ausstehende Vorgänge haben unterschiedliche Anforderungen

Die Button-Implementierung prüft bestimmte Kombinationen von Props. Der Theme-Umschalter verwendet secondary mit pressed. Die Formularaktion setzt type="submit", da die Komponente standardmäßig den Button-Typ verwendet. Für einen Button in Linkform ist href erforderlich; er kann nicht als deaktivierte oder ladende Aktion behandelt werden.

• Verwenden Sie primary, um den Entwurf vorzubereiten, und secondary für den unabhängigen Theme-Umschalter.
• Behalten Sie die Navigation als Link bei. Weisen Sie einem Button nicht href zu, ohne die entsprechende Ankerform zu verwenden.
• Verwenden Sie loading nur für einen tatsächlich ausstehenden Vorgang, da sich dadurch sowohl das Verhalten bei busy als auch bei disabled ändert.
• Vermeiden Sie positive tabIndex-Werte. Die Implementierung unterstützt nur 0 und -1.

Unterstützende Spezifikation lesen

Twilio Paste Design-System: Bearbeitbaren Text vom geprüften Stand trennen

Ein nachvollziehbarer Ablauf

Die Live-Vorschau zeigt den aktuellen Inhalt des Textarea. Der vorbereitete Text wird separat gespeichert und ändert sich erst nach der Validierung. Werden anschließend weitere Änderungen vorgenommen, darf der zuvor vorbereitete Stand nicht unbemerkt überschrieben werden. Die Prüf-Checkbox dient nur der lokalen Interaktion und ist kein Beleg für die Zustimmung eines Empfängers oder die Einhaltung rechtlicher Vorgaben.

1. Verfassen Sie den Text im beschrifteten Textarea.
2. Prüfen Sie die aktuelle Nachricht und aktivieren Sie zur Bestätigung die lokale Prüf-Checkbox.
3. Erstellen Sie einen vorbereiteten Stand, ohne einen Messaging-Dienst aufzurufen.
4. Bearbeiten Sie den Text erneut und vergleichen Sie den Entwurf mit dem vorbereiteten Text, bevor Sie einen neuen Stand erstellen.

Unterstützende Spezifikation lesen

Twilio Paste Design-System: Rückmeldungen verständlich gestalten, ohne ein Telefon-Mockup interpretieren zu müssen

Beschriftungen und Textfeedback bleiben außerhalb der Illustration

Das Textarea hat eine sichtbare Beschriftung und verweist auf Beschreibungen der Zeichenanzahl und des Fehlers. Gezählt werden Unicode-Codepunkte; die Anzeige gibt nicht vor, SMS-Segmentierung, Kodierung oder Kosten abzubilden. Auch das vorbereitete Ergebnis ist außerhalb des illustrierten Geräts als gewöhnlicher Text sichtbar.

Die Validierung muss auf eine leere Nachricht oder eine fehlende Prüfbestätigung hinweisen. Der Statusbereich gibt das lokale Ergebnis bekannt, ohne vorzutäuschen, dass eine Nachricht zugestellt wurde. Der Tastaturfokus bleibt auf allen nativen Steuerelementen und Buttons sichtbar, auch bei schmalem Viewport.

Unterstützende Spezifikation lesen

Twilio Paste Design-System: Paket und Offline-Interpretation getrennt überprüfen

Was das bereitgestellte Beispiel belegt

Die Einrichtung importiert die echten Pakete Paste Theme und Button und stellt eine vollständige Komposition für React bereit. Native Formularsteuerelemente sind ausdrücklich als anwendungsseitig verwaltet gekennzeichnet und werden keiner ungeprüften Komponente API zugeschrieben. Die eingebettete Version ist eine Offline-Interpretation von HTML, die keine externe CDN-Abhängigkeit hat.

Bevor Sie das Beispiel in einem Dienst einsetzen, lösen Sie die Peer-Abhängigkeiten auf, erstellen Sie das native Beispiel und richten Sie eine echte Backend-Grenze für den Versand ein. Ein erfolgreicher Test der lokalen Vorschau bestätigt das Verhalten des Editors, nicht aber eine Messaging-Integration für den Produktivbetrieb oder eine Aussage zur Zustellung durch Twilio.

Unterstützende Spezifikation lesen

Twilio Paste Design-System-Komponentenbeispiele

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