# Système de design AWS Cloudscape ## Aperçu de l’interface du système de design AWS Cloudscape Testez des noms invalides, choisissez un profil de capacité, passez de la configuration à la vérification, changez l’apparence et confirmez la recette localement. ## Référence de conception du système de design AWS Cloudscape Composants Cloudscape 3.0.1390 et design-tokens 3.0.114, thème visual-refresh. Les valeurs sont extraites du JSON des jetons publié. Les modes de couleur et les densités de contenu sont deux dimensions distinctes. Il s’agit d’une référence d’implémentation ciblée, et non de l’export complet des jetons. ### Rôles de couleur sémantiques en mode clair et sombre | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | color-background-layout-main | light: #ffffff; dark: #161d26 | Utilisez ce rôle nommé dans le contexte prévu ; la paire présente les valeurs en mode clair et sombre, et non des nuances interchangeables. | | color-background-container-content | light: #ffffff; dark: #161d26 | Utilisez ce rôle nommé dans le contexte prévu ; la paire présente les valeurs en mode clair et sombre, et non des nuances interchangeables. | | color-text-body-default | light: #0f141a; dark: #c6c6cd | Utilisez ce rôle nommé dans le contexte prévu ; la paire présente les valeurs en mode clair et sombre, et non des nuances interchangeables. | | color-text-body-secondary | light: #424650; dark: #c6c6cd | Utilisez ce rôle nommé dans le contexte prévu ; la paire présente les valeurs en mode clair et sombre, et non des nuances interchangeables. | | color-text-interactive-default | light: #424650; dark: #dedee3 | Utilisez ce rôle nommé dans le contexte prévu ; la paire présente les valeurs en mode clair et sombre, et non des nuances interchangeables. | | color-text-link-default | light: #006ce0; dark: #42b4ff | Utilisez ce rôle nommé dans le contexte prévu ; la paire présente les valeurs en mode clair et sombre, et non des nuances interchangeables. | | color-text-status-error | light: #db0000; dark: #ff7a7a | Utilisez ce rôle nommé dans le contexte prévu ; la paire présente les valeurs en mode clair et sombre, et non des nuances interchangeables. | | color-text-status-success | light: #00802f; dark: #2bb534 | Utilisez ce rôle nommé dans le contexte prévu ; la paire présente les valeurs en mode clair et sombre, et non des nuances interchangeables. | | color-border-input-default | light: #8c8c94; dark: #656871 | Utilisez ce rôle nommé dans le contexte prévu ; la paire présente les valeurs en mode clair et sombre, et non des nuances interchangeables. | | color-background-button-primary-default | light: #006ce0; dark: #42b4ff | Utilisez ce rôle nommé dans le contexte prévu ; la paire présente les valeurs en mode clair et sombre, et non des nuances interchangeables. | ### Typographie du corps et des titres | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | font-size-body-m | 14px | Associez la taille de police et la hauteur de ligne du même rôle. Les variantes Header et Box respectent la hiérarchie des composants. | | font-size-body-s | 12px | Associez la taille de police et la hauteur de ligne du même rôle. Les variantes Header et Box respectent la hiérarchie des composants. | | font-size-heading-l | 20px | Associez la taille de police et la hauteur de ligne du même rôle. Les variantes Header et Box respectent la hiérarchie des composants. | | font-size-heading-m | 18px | Associez la taille de police et la hauteur de ligne du même rôle. Les variantes Header et Box respectent la hiérarchie des composants. | | font-size-heading-s | 16px | Associez la taille de police et la hauteur de ligne du même rôle. Les variantes Header et Box respectent la hiérarchie des composants. | | font-size-heading-xl | 24px | Associez la taille de police et la hauteur de ligne du même rôle. Les variantes Header et Box respectent la hiérarchie des composants. | | font-size-heading-xs | 14px | Associez la taille de police et la hauteur de ligne du même rôle. Les variantes Header et Box respectent la hiérarchie des composants. | | line-height-body-m | 20px | Associez la taille de police et la hauteur de ligne du même rôle. Les variantes Header et Box respectent la hiérarchie des composants. | | line-height-body-s | 16px | Associez la taille de police et la hauteur de ligne du même rôle. Les variantes Header et Box respectent la hiérarchie des composants. | | line-height-heading-l | 24px | Associez la taille de police et la hauteur de ligne du même rôle. Les variantes Header et Box respectent la hiérarchie des composants. | | line-height-heading-m | 22px | Associez la taille de police et la hauteur de ligne du même rôle. Les variantes Header et Box respectent la hiérarchie des composants. | | line-height-heading-s | 20px | Associez la taille de police et la hauteur de ligne du même rôle. Les variantes Header et Box respectent la hiérarchie des composants. | | line-height-heading-xl | 30px | Associez la taille de police et la hauteur de ligne du même rôle. Les variantes Header et Box respectent la hiérarchie des composants. | | line-height-heading-xs | 18px | Associez la taille de police et la hauteur de ligne du même rôle. Les variantes Header et Box respectent la hiérarchie des composants. | ### Espacement adapté à la densité | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | space-scaled-xxxs | comfortable: 2px; compact: 0px | Utilisez la valeur confortable ou compacte selon la densité active. Ne redimensionnez pas le texte en fonction de ces changements d’espacement. | | space-scaled-xxs | comfortable: 4px; compact: 2px | Utilisez la valeur confortable ou compacte selon la densité active. Ne redimensionnez pas le texte en fonction de ces changements d’espacement. | | space-scaled-xs | comfortable: 8px; compact: 4px | Utilisez la valeur confortable ou compacte selon la densité active. Ne redimensionnez pas le texte en fonction de ces changements d’espacement. | | space-scaled-s | comfortable: 12px; compact: 8px | Utilisez la valeur confortable ou compacte selon la densité active. Ne redimensionnez pas le texte en fonction de ces changements d’espacement. | | space-scaled-m | comfortable: 16px; compact: 12px | Utilisez la valeur confortable ou compacte selon la densité active. Ne redimensionnez pas le texte en fonction de ces changements d’espacement. | | space-scaled-l | comfortable: 20px; compact: 16px | Utilisez la valeur confortable ou compacte selon la densité active. Ne redimensionnez pas le texte en fonction de ces changements d’espacement. | | space-scaled-xl | comfortable: 24px; compact: 20px | Utilisez la valeur confortable ou compacte selon la densité active. Ne redimensionnez pas le texte en fonction de ces changements d’espacement. | | space-scaled-xxl | comfortable: 32px; compact: 24px | Utilisez la valeur confortable ou compacte selon la densité active. Ne redimensionnez pas le texte en fonction de ces changements d’espacement. | | space-scaled-xxxl | comfortable: 40px; compact: 32px | Utilisez la valeur confortable ou compacte selon la densité active. Ne redimensionnez pas le texte en fonction de ces changements d’espacement. | ### Forme des composants | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | border-radius-container | 16px | Conservez la forme du composant nommé. Le rayon d’un bouton n’est pas un rayon universel pour les conteneurs. | | border-radius-button | 20px | Conservez la forme du composant nommé. Le rayon d’un bouton n’est pas un rayon universel pour les conteneurs. | | border-radius-input | 8px | Conservez la forme du composant nommé. Le rayon d’un bouton n’est pas un rayon universel pour les conteneurs. | | border-radius-alert | 12px | Conservez la forme du composant nommé. Le rayon d’un bouton n’est pas un rayon universel pour les conteneurs. | | border-radius-dropdown | 8px | Conservez la forme du composant nommé. Le rayon d’un bouton n’est pas un rayon universel pour les conteneurs. | | border-radius-card-embedded | 8px | Conservez la forme du composant nommé. Le rayon d’un bouton n’est pas un rayon universel pour les conteneurs. | ### Durée des interactions | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | motion-duration-responsive | default: 115ms; disabled: 0ms | En mode mouvement désactivé, le mouvement natif est ramené à zéro. Évitez d’ajouter une transition sans rapport à la même interaction. | | motion-duration-expressive | default: 165ms; disabled: 0ms | En mode mouvement désactivé, le mouvement natif est ramené à zéro. Évitez d’ajouter une transition sans rapport à la même interaction. | | motion-duration-complex | default: 250ms; disabled: 0ms | En mode mouvement désactivé, le mouvement natif est ramené à zéro. Évitez d’ajouter une transition sans rapport à la même interaction. | ### Composition native API | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Wizard | activeStepIndex · onNavigate · onSubmit | Gérez l’étape actuelle dans React ; validez avant d’accepter l’index demandé pour l’étape suivante. | | FormField | label · constraintText · errorText | Placez la règle de format et le message d’erreur à côté du champ de nom. | | Input | value · onChange({ detail }) | Lisez detail.value plutôt que la cible d’un événement DOM. | | Select | selectedOption · options · onChange | Conservez l’objet d’option sélectionné, avec son libellé et sa valeur. | | Container | header={
} | Regroupez les champs de configuration associés sans inventer un nouveau système de cartes. | | ColumnLayout | columns={2} · variant="text-grid" | Présentez les métadonnées compactes de vérification dans des colonnes adaptées à la bibliothèque. | | SpaceBetween | size="l" | Utilisez l’échelle d’espacement de la bibliothèque pour séparer les champs et les modules de vérification. | | applyMode | Mode.Light / Mode.Dark | Changez le mode visuel global des composants natifs et des jetons sémantiques. | ## Guide complet du système de design AWS Cloudscape 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. ## Architecture de configuration du système de design AWS Cloudscape ### Adaptez le workflow à Wizard > Cet exemple sépare la configuration de la vérification. Wizard fournit la navigation entre les étapes et les actions ; l’application gère l’index actuel, les valeurs des champs, la règle de validation et la confirmation finale. Le lecteur peut revenir à la configuration sans recréer le formulaire ni perdre la capacité sélectionnée. Cette approche convient mieux que d’enfermer tout un workflow à plusieurs étapes dans une seule Card générique. ### Créez la mise en page avec les conteneurs natifs Container, Header et SpaceBetween définissent la section du formulaire. Le h1 présente l’opération ; le h2 nomme le groupe de paramètres. Le texte explicatif est placé à côté du champ ou de l’étape qu’il décrit. La largeur maximale de 1200px et le padding de la page sont des choix explicites de mise en page de l’application CSS, et non des jetons de mise en page Cloudscape exportés. ## Jetons sémantiques et modes visuels du système de design AWS Cloudscape ### Choisissez un rôle avant une valeur La référence distingue l’arrière-plan de la mise en page, le contenu des conteneurs, le texte du corps, le texte interactif et les retours d’état. Leurs valeurs ne forment pas une palette uniforme. Pour une interface personnalisée, importez le jeton nommé depuis @cloudscape-design/design-tokens plutôt que de recopier une valeur hexadécimale claire dans chaque état. Le jeton définit une fonction ; sa valeur peut évoluer. ### Changer de mode depuis la bibliothèque L’aperçu appelle applyMode avec Mode.Light ou Mode.Dark depuis global-styles. Cela met à jour le mode utilisé par les composants au lieu de remplacer des couleurs CSS arbitraires. En mode sombre, l’écran de vérification conserve les mêmes libellés, la capacité sélectionnée et l’état de navigation. Le JSON source consigne les valeurs en mode clair et sombre, ce qui permet de les examiner séparément. ## Typographie et hiérarchie des titres du système de design AWS Cloudscape ### Associez les rôles de police et de hauteur de ligne La référence visual-refresh body-m utilise une taille de 14px et une hauteur de ligne de 20px. Le rôle heading-xl correspond à 24px avec une hauteur de ligne de 30px, heading-l à 20px avec 24px, et heading-m à 18px avec 22px. Ces rôles définissent la hiérarchie compacte du formulaire ; ils ne sont pas des tailles d’affichage marketing interchangeables. ### Utilisez les variantes sémantiques des composants La variante Header h1 affiche « Créer un espace de travail ». Les en-têtes des conteneurs utilisent h2, tandis que la variante Box awsui-key-label applique un style secondaire cohérent aux libellés de révision. Les valeurs restent du texte ordinaire et lisible. Ne transformez pas tous les libellés de champ en titres dans le seul but de leur donner plus de poids visuel. ## Système de design AWS Cloudscape : champs contrôlés et composition de la révision ### Comprendre le contrat des événements detail Input émet un événement dont detail.value contient le nouveau texte. Select émet detail.selectedOption, qui est un objet option et non une simple chaîne. L’exemple complet stocke cet objet et affiche son libellé dans la révision. Cela évite une erreur d’intégration fréquente : un Select qui semble vide parce que selectedOption reçoit uniquement un identifiant. ### Associez les instructions au champ concerné FormField regroupe le libellé Workspace name, le texte précisant les contraintes et le message d’erreur. La règle de validation autorise de 3 à 30 lettres minuscules, chiffres et tirets, et impose une lettre en premier caractère. Cette règle relève de la politique de l’application d’exemple ; ce n’est pas une règle de nommage générale d’AWS. De même, l’explication des capacités précise que les profils sont fictifs. - La politique de format des champs relève de cette application d’exemple. - Les options de capacité ne constituent ni des affirmations sur les produits ni des tarifs. - Les composants natifs gèrent la présentation ; l’état React contient la configuration. ## Système de design AWS Cloudscape : densité et mise en page adaptative ### Ne considérez pas le mode compact comme un niveau de zoom Les valeurs d’espacement à l’échelle publiées varient selon la densité. Par exemple, space-scaled-m vaut 16px en mode confortable et 12px en mode compact, tandis que space-scaled-l vaut respectivement 20px et 16px. Ces différences resserrent le rythme vertical sans redéfinir le contenu ni réduire arbitrairement la taille du texte. Les composants natifs appliquent leurs propres règles de densité. ### Laissez les structures d’étapes et de révision s’adapter Wizard adapte la présentation de sa navigation à l’espace disponible ; ColumnLayout organise les métadonnées de révision de façon adaptative. L’application CSS réduit la marge intérieure extérieure en dessous de 600px. L’exemple ne fixe pas en dur la largeur de la navigation des étapes sur ordinateur, et sa version mobile conserve des actions visibles Next, Previous et Confirm, disponibles localement. ## Système de design AWS Cloudscape : validation et confirmation avec Wizard ### Validez avant d’accepter la navigation onNavigate reçoit requestedStepIndex. Avant de passer à la révision, l’application vérifie le nom et conserve l’étape actuelle s’il est invalide. Toute modification efface l’erreur afin que la saisie suivante puisse être évaluée à nouveau. Le retour aux paramètres préserve le nom et l’option sélectionnée. 1. Saisissez un nom invalide et restez dans la configuration. 2. Corrigez le nom et choisissez un autre profil de capacité. 3. Passez à la révision et vérifiez les deux valeurs. 4. Utilisez Edit settings pour revenir sans perdre l’une ou l’autre valeur. 5. Confirmez localement et relancez l’exemple. ### Distinguez une démonstration d’un provisionnement L’action finale affiche une alerte de réussite locale et un récapitulatif de la configuration. Elle ne prétend pas créer une véritable ressource. Dans une application réelle, maintenez l’action de soumission en attente pendant le provisionnement, distinguez les demandes acceptées des ressources effectivement créées et proposez une procédure de récupération en cas d’échec sans supprimer la configuration. ## Système de design AWS Cloudscape : accessibilité des formulaires ### Conservez les libellés et les noms de navigation Wizard reçoit navigationAriaLabel et les chaînes d’action traduites. Chaque Input et Select est inclus dans un FormField doté d’un libellé. Alert communique les résultats invalides ou réussis au moyen des sémantiques natives du composant. Les contraintes visibles complètent le libellé du champ au lieu de le remplacer. ### Vérifiez le parcours au clavier dans l’ensemble de l’opération Utilisez le clavier pour accéder au champ du nom, ouvrir le sélecteur de capacité, passer à l’étape suivante, revenir en arrière, modifier la valeur et confirmer. Le comportement natif de la gestion du focus est utile, mais la règle de validation des étapes et la signification de la confirmation restent du ressort de l’application. Une bibliothèque de composants ne peut pas valider seule une règle métier manquante. ## Système de design AWS Cloudscape : installation et limites de personnalisation ### Installez ensemble les packages associés L’implémentation importe les composants depuis leurs sous-chemins de package individuels et charge une seule fois global-styles. design-tokens fournit une référence pour les styles personnalisés. Le fichier d’entrée React fourni et le fichier compact CSS reproduisent l’exemple interactif dans une application Vite React. Conservez des versions compatibles des packages Cloudscape. ### Utilisez l’exemple fourni comme véritable point de départ Ne remplacez les données de capacité fictives qu’après avoir défini le modèle réel de votre service. Conservez les contrats d’événement et l’étape de révision, puis ajoutez la soumission asynchrone et des réponses d’erreur explicites. Pour tout élément spécifique, privilégiez d’abord un composant Cloudscape existant ; n’introduisez un élément personnalisé qu’ensuite, en utilisant un jeton sémantique approprié. ## Système de design AWS Cloudscape : exemples de composants ### main.jsx — assistant de configuration complet Wizard, FormField, Select et métadonnées de révision natifs, avec navigation contrôlée et confirmation locale. ``` import React, { useState } from "react"; import { createRoot } from "react-dom/client"; import Wizard from "@cloudscape-design/components/wizard"; import Container from "@cloudscape-design/components/container"; import Header from "@cloudscape-design/components/header"; import FormField from "@cloudscape-design/components/form-field"; import Input from "@cloudscape-design/components/input"; import Select from "@cloudscape-design/components/select"; import SpaceBetween from "@cloudscape-design/components/space-between"; import ColumnLayout from "@cloudscape-design/components/column-layout"; import Box from "@cloudscape-design/components/box"; import Button from "@cloudscape-design/components/button"; import Alert from "@cloudscape-design/components/alert"; import Toggle from "@cloudscape-design/components/toggle"; import { applyMode, Mode } from "@cloudscape-design/global-styles"; import "@cloudscape-design/global-styles/index.css"; import "./cloudscape.css"; const sizes = [ { label: "Development · 2 vCPU / 4 GiB", value: "dev" }, { label: "Standard · 4 vCPU / 8 GiB", value: "standard" }, { label: "Compute · 8 vCPU / 16 GiB", value: "compute" }, ]; function App() { const [name, setName] = useState("analytics-sandbox"), [size, setSize] = useState(sizes[0]), [step, setStep] = useState(0), [error, setError] = useState(""), [complete, setComplete] = useState(false), [dark, setDark] = useState(false); function next(index) { if (index > 0 && !/^[a-z][a-z0-9-]{2,29}$/.test(name)) { setError( "Use 3–30 lowercase letters, numbers or hyphens, starting with a letter.", ); return; } setError(""); setStep(index); } function reset() { setStep(0); setComplete(false); setError(""); setName("analytics-sandbox"); setSize(sizes[0]); } return (
CLOUDSCAPE · RESOURCE CONFIGURATION { setDark(detail.checked); applyMode(detail.checked ? Mode.Dark : Mode.Light); }} > Dark mode
Create a workspace
{complete ? ( The {name} recipe is ready for review. No cloud API was called and no resource was provisioned. Workspace recipe
}>
Name {name}
Capacity {size.label}
) : ( next(detail.requestedStepIndex)} onCancel={reset} onSubmit={() => setComplete(true)} i18nStrings={{ stepNumberLabel: (stepNumber) => `Step ${stepNumber}`, collapsedStepsLabel: (stepNumber, stepsCount) => `Step ${stepNumber} of ${stepsCount}`, skipToButtonLabel: (step) => `Skip to ${step.title}`, navigationAriaLabel: "Configuration steps", cancelButton: "Reset", previousButton: "Previous", nextButton: "Next", submitButton: "Confirm locally", optional: "optional", }} steps={[ { title: "Configure workspace", description: "Choose the identity and capacity.", content: ( Workspace settings} > { setName(detail.value); setError(""); }} />