# Système de design Twilio Paste
## Aperçu de l’interface du système de design Twilio Paste
Modifiez le contenu, inspectez son aperçu mobile et préparez un instantané local distinct.
## Référence de conception du système de design Twilio Paste
Source amont twilio-labs/paste vérifiée. Les valeurs ci-dessous distinguent les noms des jetons YAML de leurs noms au format JavaScript. Cette référence ne présente pas le fork indépendant Paste DSys comme une documentation Twilio.
### Alias d’espacement
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| space10 | 0.125rem | 2px avec une racine de 16px. |
| space20 | 0.25rem | 4px avec une racine de 16px. |
| space30 | 0.5rem | 8px d’espacement entre les champs. |
| space40 | 0.75rem | 12px de marge intérieure pour les commandes. |
| space50 | 1rem | 16px pour regrouper les éléments locaux. |
| space60 | 1.25rem | 20px. |
| space70 | 1.5rem | 24px d’espacement entre les sections. |
| space90 | 2rem | 32px pour les grands regroupements. |
| space130 | 3rem | 48px pour les zones plus vastes. |
### Alias de taille de police
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| fontSize20 | 0.75rem | 12 px avec la taille de racine par défaut. |
| fontSize30 | 0.875rem | Option de corps de texte en 14px. |
| fontSize40 | 1rem | Option de corps de texte en 16px. |
| fontSize60 | 1.25rem | Option de titre en 20px. |
| fontSize70 | 1.5rem | Option de titre en 24px. |
| fontSize90 | 2rem | Option de texte d’affichage en 32px. |
### Hauteurs de ligne
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| lineHeight20 / lineHeight30 | 1.25rem | 20px pour le texte compact. |
| lineHeight40 | 1.5rem | 24px pour le texte en 16px. |
| lineHeight60 | 1.75rem | 28px pour le texte en 20px. |
| lineHeight70 | 2rem | 32px pour le texte en 24px. |
### Rayons
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| borderRadius10 | 2px | Rayon d’angle le plus petit. |
| borderRadius20 | 4px | Petit rayon pour les commandes. |
| borderRadius30 | 8px | Rayon petit à moyen. |
| borderRadius40 | 12px | Rayon moyen. |
| borderRadiusCircle | 50% | Nécessite une largeur et une hauteur égales pour former un cercle. |
| borderRadiusPill | 100px | Rayon en pilule, distinct du cercle. |
### Rôles et associations du texte
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| colorText | palette-gray-100 | Texte principal ; correspond à #121c2d dans la palette associée. |
| colorTextWeak | palette-gray-60 | Texte secondaire ; correspond à #606b85. |
| colorTextLink | palette-blue-60 | Liens ; correspond à #0263e0. |
| colorTextError | palette-red-60 | Texte d’erreur ; correspond à #db132a. |
| colorTextSuccess | palette-green-70 | Texte de succès ; correspond à #0e7c3a. |
| colorTextWeaker | palette-gray-40 | La source déconseille de l’utiliser comme texte activé ordinaire. |
### Comportement des boutons
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| variant | primary / secondary / destructive / link and other explicit variants | L’exemple utilise un bouton principal pour l’envoi et un bouton secondaire pour le basculement. |
| type | button by default | Définissez explicitement submit pour envoyer le formulaire. |
| pressed | Secondary family only | Utilisez le bouton secondaire pour changer de thème. |
| loading | aria-busy and disabled control behavior | À utiliser uniquement pour une véritable opération en attente. |
| as="a" | Requires href | Les liens de navigation ne prennent pas en charge les états désactivé ou chargement des boutons. |
| tabIndex | 0 or -1 | Les indices d’onglet positifs sont refusés. |
### Noms des thèmes
| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| default / dark | Theme variants | Le choix du thème est explicite. |
| twilio / twilio-dark | Separate variants | Ne décrivez pas toutes les variantes comme étant identiques à la valeur par défaut. |
| sendgrid / evergreen | Additional variants | Faites un choix délibéré plutôt que d’utiliser la marque comme simple décoration. |
## Guide complet du système de design Twilio Paste
Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle.
Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources.
## Système de design Twilio Paste : utilisez le système officiel sans confondre la documentation avec sa version dérivée
### Source Twilio et continuation indépendante
> Paste est publié dans le dépôt twilio-labs. Lors de la vérification, les anciennes routes de documentation de paste.twilio.design redirigeaient vers ce dépôt. Le site Paste DSys, hébergé séparément, se présente comme un fork indépendant sans affiliation avec Twilio. Ce guide s’appuie donc sur les fichiers sources officiels pour les valeurs des jetons et le comportement des composants.
Un composeur de notifications constitue un exemple utile, car il met en évidence plusieurs états qu’une galerie statique de boutons ne peut pas illustrer : contenu modifiable, confirmation après examen, instantané préparé et séparation nette avant l’envoi. Cet aperçu ne fait appel à aucun API Twilio.
Consultez la spécification associée
## Système de design Twilio Paste : consultez l’échelle d’espacement avant de choisir un suffixe
### Les nombres des jetons sont des noms, pas des valeurs en pixels
space30 correspond à un demi-rem, tandis que space70 correspond à un rem et demi. Les suffixes 30 et 70 désignent des positions dans l’échelle, et non 30px et 70px. Avec une racine de 16px, le composeur peut utiliser 8px entre le libellé et le champ, 12px à l’intérieur d’une commande et 24px entre les zones.
La source YAML utilise des noms avec des traits d’union. Le tableau de référence présente les noms au format JavaScript utilisés par les utilisateurs de Paste et indique les valeurs résolues à côté. Une valeur exprimée en rem varie en fonction de la taille de police de la racine ; son équivalent en pixels ne doit pas être considéré comme une mesure inconditionnelle dans le navigateur.
Consultez la spécification associée
## Système de design Twilio Paste : associer les tailles de police à des jetons de hauteur de ligne distincts
### L’échelle n’implique pas que les valeurs numériques soient identiques
Les alias de taille de police et de hauteur de ligne sont distincts. fontSize30 vaut 14px avec la taille de police racine par défaut, et lineHeight30 vaut 20px. fontSize70 vaut 24px, avec une option de hauteur de ligne de 32px. Ces associations assurent la lisibilité des libellés et du contenu multiligne, sans transformer chaque section en grand titre promotionnel.
L’exemple intégré utilise une pile de polices sans empattement système et une illustration de téléphone propre à l’application. Ces choix sont explicitement illustratifs. Aucun fichier de police propriétaire n’est redistribué et les dimensions du cadre du téléphone ne sont pas présentées comme des jetons Paste.
Consultez la spécification associée
## Système de design Twilio Paste : les rôles de texte sémantiques incluent des contraintes de contraste
### Un texte atténué n’est pas la même chose qu’un texte désactivé
La source de couleurs en amont consigne les associations de contraste avec les rôles. Le texte principal, le texte secondaire, les erreurs et les messages de réussite ont chacun un rôle de premier plan prévu à cet effet. Le rôle de texte le moins contrasté s’accompagne d’un avertissement déconseillant son utilisation pour les commandes actives ordinaires. Un compteur de caractères atténué ne doit pas simplement utiliser le gris le plus pâle disponible.
Dans l’exemple, le bleu indique une action et le texte neutre foncé porte le message. Le brouillon préparé ne devient pas vert simplement parce que l’utilisateur a appuyé sur un bouton : son statut indique qu’un instantané local a été créé. Les valeurs de l’exemple sont liées à la palette indiquée ; les autres variantes de thème peuvent produire des valeurs différentes.
Consultez la spécification associée
## Système de design Twilio Paste : le changement de thème est une modification d’état explicite
### Variantes du fournisseur et surfaces de l’application
Theme exporte un Provider et un Consumer, ainsi que des objets de thème nommés et des utilitaires. Les constantes de variantes actuelles comprennent default, dark, twilio, twilio-dark, sendgrid et evergreen. L’exemple ne bascule volontairement qu’entre default et dark.
Les commandes natives propres à l’application nécessitent un traitement de surface adapté lorsque le fournisseur change. Un fournisseur peut appliquer un thème aux composants Paste, mais ne peut pas restyler automatiquement tous les widgets externes. Le code fourni définit explicitement les couleurs de premier plan et d’arrière-plan de l’élément englobant, et précise que la zone de texte appartient à l’application.
Consultez la spécification associée
## Système de design Twilio Paste : utiliser l’état enfoncé uniquement avec une famille de boutons compatible
### Les actions, la navigation et les opérations en attente répondent à des règles différentes
L’implémentation de Button valide certaines combinaisons de propriétés. Le bouton de changement de thème utilise secondary avec pressed. Le bouton d’action du formulaire définit type="submit", car le composant est de type button par défaut. Un bouton prenant la forme d’un lien nécessite href et ne peut pas être traité comme une action désactivée ou en cours de chargement.
- Utilisez primary pour préparer le brouillon et secondary pour le changement de thème indépendant.
- Conservez la navigation sous forme de lien ; n’ajoutez pas href à un bouton sans utiliser la forme correspondante pour un lien.
- Réservez loading aux véritables opérations en attente, car cet état modifie à la fois le comportement occupé et désactivé.
- Évitez les valeurs positives de tabIndex ; l’implémentation limite les valeurs prises en charge à 0 et -1.
Consultez la spécification associée
## Système de design Twilio Paste : séparer le texte modifiable de l’instantané vérifié
### Une séquence fidèle à la réalité
L’aperçu en direct suit la valeur actuelle de la zone de texte. Le contenu préparé est stocké séparément et ne change qu’après validation. Une nouvelle modification ne doit pas réécrire discrètement l’instantané précédemment préparé. La case de vérification est une interaction locale, et ne prouve ni le consentement d’un destinataire ni la conformité légale.
1. Saisissez le contenu dans la zone de texte associée à un libellé.
2. Vérifiez le message actuel et cochez la case de vérification locale.
3. Préparez un instantané sans appeler de service de messagerie.
4. Modifiez de nouveau le texte et comparez le brouillon au contenu préparé avant de créer un nouvel instantané.
Consultez la spécification associée
## Système de design Twilio Paste : rendre les retours compréhensibles sans interpréter une maquette de téléphone
### Les libellés et les retours textuels restent hors de l’illustration
La zone de texte comporte un libellé visible et renvoie aux descriptions du compteur et des erreurs. Le compteur est défini en points de code Unicode ; il ne prétend pas mesurer la segmentation des SMS, l’encodage ou le coût. Le résultat préparé est également affiché sous forme de texte ordinaire, hors de l’appareil illustratif.
La validation doit signaler un message vide ou l’absence de confirmation de vérification. La région de statut annonce le résultat local sans prétendre qu’un message a été envoyé. Le focus clavier reste visible sur toutes les commandes et tous les boutons natifs, y compris dans une fenêtre d’affichage étroite.
Consultez la spécification associée
## Système de design Twilio Paste : vérifier le package indépendamment de l’interprétation hors ligne
### Ce que l’exemple fourni démontre
La configuration importe les véritables packages Paste Theme et Button et fournit une composition complète de React. Les commandes natives du formulaire sont indiquées comme propres à l’application, et non attribuées à un composant API dont la disponibilité n’a pas été vérifiée. La version intégrée est une interprétation hors ligne de HTML, sans dépendance à un CDN externe.
Avant toute utilisation dans un service, résolvez les dépendances entre pairs, créez l’exemple natif et ajoutez une véritable frontière de backend pour l’envoi. La réussite d’un test d’aperçu local confirme le comportement de l’éditeur, et non l’intégration d’une messagerie en production ni l’envoi par Twilio.
Consultez la spécification associée
## Système de design Twilio Paste : exemples de composants
### Exemple interactif autonome complet
Enregistrez le document complet sous le nom index.html et ouvrez-le dans un navigateur. Interprétation hors ligne de HTML des échelles Paste en amont et des règles d’état des boutons ; il ne s’agit ni de l’environnement d’exécution natif ni d’un service de messagerie.
```
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
```
Référence du code
- Le panneau du téléphone affiche un instantané du brouillon. Aucun SMS n’est envoyé ; le comportement natif de Paste Theme et Button nécessite l’exemple distinct React.
### Un brouillon local avec le véritable thème Paste et l’état de bouton
Theme.Provider englobe l’ensemble du compositeur. L’état secondary pressed modifie le thème de l’aperçu ; un bouton d’envoi primary prépare un instantané après validation par l’application. Le libellé, la zone de texte et la case à cocher sont explicitement des commandes natives de l’application.
```
// 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