# Twilio Paste Designsystem
## Twilio Paste Designsystem: Interface-Vorschau
Inhalte bearbeiten, die Smartphone-Vorschau prüfen und eine separate lokale Momentaufnahme vorbereiten.
## Twilio Paste Designsystem: Designreferenz
Verifizierte Upstream-Quelle twilio-labs/paste. Die folgenden Werte unterscheiden YAML-Tokennamen von ihren Namen im JavaScript-Stil. Diese Referenz stellt den unabhängigen Paste-DSys-Fork nicht als Twilio-Dokumentation dar.
### Abstandsaliase
| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| space10 | 0.125rem | 2 px bei einer Root-Schriftgröße von 16 px. |
| space20 | 0.25rem | 4 px bei einer Root-Schriftgröße von 16 px. |
| space30 | 0.5rem | 8 px Abstand im Feld. |
| space40 | 0.75rem | 12 px Innenabstand im Steuerelement. |
| space50 | 1rem | 16 px für lokale Gruppierungen. |
| space60 | 1.25rem | 20px. |
| space70 | 1.5rem | 24 px Abstand zwischen Abschnitten. |
| space90 | 2rem | 32 px für größere Gruppierungen. |
| space130 | 3rem | 48 px für größere Bereiche. |
### Schriftgrößen-Aliase
| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| fontSize20 | 0.75rem | 12px bei standardmäßiger Root-Größe. |
| fontSize30 | 0.875rem | 14-px-Option für Fließtext. |
| fontSize40 | 1rem | 16-px-Option für Fließtext. |
| fontSize60 | 1.25rem | 20-px-Option für Überschriften. |
| fontSize70 | 1.5rem | 24-px-Option für Überschriften. |
| fontSize90 | 2rem | 32-px-Option für Display-Text. |
### Zeilenhöhen
| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| lineHeight20 / lineHeight30 | 1.25rem | 20 px für kompakte Texte. |
| lineHeight40 | 1.5rem | 24 px für 16-px-Text. |
| lineHeight60 | 1.75rem | 28 px für 20-px-Text. |
| lineHeight70 | 2rem | 32 px für 24-px-Text. |
### Eckenradien
| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| borderRadius10 | 2px | Kleinster Eckenradius. |
| borderRadius20 | 4px | Kleiner Radius für Steuerelemente. |
| borderRadius30 | 8px | Klein-mittlerer Radius. |
| borderRadius40 | 12px | Mittlerer Radius. |
| borderRadiusCircle | 50% | Ein Kreis erfordert gleiche Breite und Höhe. |
| borderRadiusPill | 100px | Pillenradius, nicht zu verwechseln mit einem Kreis. |
### Textrollen und ihre Verwendung
| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| colorText | palette-gray-100 | Haupttext; wird in der verknüpften Palette zu #121c2d aufgelöst. |
| colorTextWeak | palette-gray-60 | Sekundärer Text; wird zu #606b85 aufgelöst. |
| colorTextLink | palette-blue-60 | Links; werden zu #0263e0 aufgelöst. |
| colorTextError | palette-red-60 | Fehlertext; wird zu #db132a aufgelöst. |
| colorTextSuccess | palette-green-70 | Erfolgstext; wird zu #0e7c3a aufgelöst. |
| colorTextWeaker | palette-gray-40 | Die Quelle warnt davor, es für gewöhnlichen aktivierten Text zu verwenden. |
### Button-Verhalten
| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| variant | primary / secondary / destructive / link and other explicit variants | Das Beispiel verwendet einen primären Senden-Button und einen sekundären Umschalter. |
| type | button by default | Lege submit explizit fest, damit das Formular abgesendet wird. |
| pressed | Secondary family only | Für den Theme-Umschalter die sekundäre Variante verwenden. |
| loading | aria-busy and disabled control behavior | Nur für einen tatsächlichen Vorgang im Wartezustand verwenden. |
| as="a" | Requires href | Navigationslinks unterstützen keine deaktivierten oder ladenden Button-Zustände. |
| tabIndex | 0 or -1 | Positive Tab-Indizes werden abgelehnt. |
### Theme-Namen
| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| default / dark | Theme variants | Die Theme-Auswahl erfolgt explizit. |
| twilio / twilio-dark | Separate variants | Nicht jede Variante als identisch mit der Standardvariante beschreiben. |
| sendgrid / evergreen | Additional variants | Bewusst auswählen, statt „Brand“ als beliebige Dekoration zu verwenden. |
## Twilio Paste Designsystem: Vollständiger Leitfaden
Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface.
Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen.
## 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
### Vollständige, eigenständige interaktive Demo
Speichern Sie das vollständige Dokument als index.html und öffnen Sie es in einem Browser. Offline-Interpretation von HTML auf Basis der Upstream-Paste-Skalen und Button-Statusregeln; weder die native Laufzeitumgebung noch ein Messaging-Dienst.
```
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
```
Code-Referenz
- Das Telefon-Panel zeigt einen Entwurfsstand. Es werden keine SMS versendet; das Verhalten von Paste Theme und Button im nativen Paket erfordert das separate Beispiel für React.
### Ein lokaler Entwurf mit echtem Paste-Theme und Button-Status
Theme.Provider umschließt den gesamten Composer. Der Status secondary pressed ändert das Theme der Vorschau; ein primärer Submit-Button erstellt nach der anwendungsseitigen Validierung einen vorbereiteten Stand. Beschriftungen, Textarea und Checkbox sind ausdrücklich native Steuerelemente der Anwendung.
```
// 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