# Sistema de diseño AWS Cloudscape ## Vista previa de la interfaz del sistema de diseño AWS Cloudscape Prueba nombres no válidos, elige un perfil de capacidad, alterna entre la configuración y la revisión, cambia la apariencia y confirma la receta localmente. ## Referencia de diseño del sistema de diseño AWS Cloudscape Componentes de Cloudscape 3.0.1390 y design-tokens 3.0.114, tema visual-refresh. Los valores se leen del JSON de tokens publicado. Los modos de color y las densidades de contenido son dimensiones independientes. Esta es una referencia de implementación seleccionada, no la exportación completa de tokens. ### Roles de color semánticos en modos claro y oscuro | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | color-background-layout-main | light: #ffffff; dark: #161d26 | Usa este rol con nombre en el contexto previsto; el par muestra los valores para los modos claro y oscuro, no muestras de color intercambiables. | | color-background-container-content | light: #ffffff; dark: #161d26 | Usa este rol con nombre en el contexto previsto; el par muestra los valores para los modos claro y oscuro, no muestras de color intercambiables. | | color-text-body-default | light: #0f141a; dark: #c6c6cd | Usa este rol con nombre en el contexto previsto; el par muestra los valores para los modos claro y oscuro, no muestras de color intercambiables. | | color-text-body-secondary | light: #424650; dark: #c6c6cd | Usa este rol con nombre en el contexto previsto; el par muestra los valores para los modos claro y oscuro, no muestras de color intercambiables. | | color-text-interactive-default | light: #424650; dark: #dedee3 | Usa este rol con nombre en el contexto previsto; el par muestra los valores para los modos claro y oscuro, no muestras de color intercambiables. | | color-text-link-default | light: #006ce0; dark: #42b4ff | Usa este rol con nombre en el contexto previsto; el par muestra los valores para los modos claro y oscuro, no muestras de color intercambiables. | | color-text-status-error | light: #db0000; dark: #ff7a7a | Usa este rol con nombre en el contexto previsto; el par muestra los valores para los modos claro y oscuro, no muestras de color intercambiables. | | color-text-status-success | light: #00802f; dark: #2bb534 | Usa este rol con nombre en el contexto previsto; el par muestra los valores para los modos claro y oscuro, no muestras de color intercambiables. | | color-border-input-default | light: #8c8c94; dark: #656871 | Usa este rol con nombre en el contexto previsto; el par muestra los valores para los modos claro y oscuro, no muestras de color intercambiables. | | color-background-button-primary-default | light: #006ce0; dark: #42b4ff | Usa este rol con nombre en el contexto previsto; el par muestra los valores para los modos claro y oscuro, no muestras de color intercambiables. | ### Tipografía para el cuerpo y los encabezados | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | font-size-body-m | 14px | Combina el tamaño de fuente y la altura de línea del mismo rol. Las variantes Header y Box aplican la jerarquía de componentes. | | font-size-body-s | 12px | Combina el tamaño de fuente y la altura de línea del mismo rol. Las variantes Header y Box aplican la jerarquía de componentes. | | font-size-heading-l | 20px | Combina el tamaño de fuente y la altura de línea del mismo rol. Las variantes Header y Box aplican la jerarquía de componentes. | | font-size-heading-m | 18px | Combina el tamaño de fuente y la altura de línea del mismo rol. Las variantes Header y Box aplican la jerarquía de componentes. | | font-size-heading-s | 16px | Combina el tamaño de fuente y la altura de línea del mismo rol. Las variantes Header y Box aplican la jerarquía de componentes. | | font-size-heading-xl | 24px | Combina el tamaño de fuente y la altura de línea del mismo rol. Las variantes Header y Box aplican la jerarquía de componentes. | | font-size-heading-xs | 14px | Combina el tamaño de fuente y la altura de línea del mismo rol. Las variantes Header y Box aplican la jerarquía de componentes. | | line-height-body-m | 20px | Combina el tamaño de fuente y la altura de línea del mismo rol. Las variantes Header y Box aplican la jerarquía de componentes. | | line-height-body-s | 16px | Combina el tamaño de fuente y la altura de línea del mismo rol. Las variantes Header y Box aplican la jerarquía de componentes. | | line-height-heading-l | 24px | Combina el tamaño de fuente y la altura de línea del mismo rol. Las variantes Header y Box aplican la jerarquía de componentes. | | line-height-heading-m | 22px | Combina el tamaño de fuente y la altura de línea del mismo rol. Las variantes Header y Box aplican la jerarquía de componentes. | | line-height-heading-s | 20px | Combina el tamaño de fuente y la altura de línea del mismo rol. Las variantes Header y Box aplican la jerarquía de componentes. | | line-height-heading-xl | 30px | Combina el tamaño de fuente y la altura de línea del mismo rol. Las variantes Header y Box aplican la jerarquía de componentes. | | line-height-heading-xs | 18px | Combina el tamaño de fuente y la altura de línea del mismo rol. Las variantes Header y Box aplican la jerarquía de componentes. | ### Espaciado adaptado a la densidad | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | space-scaled-xxxs | comfortable: 2px; compact: 0px | Usa el valor de cómodo o compacto según la densidad activa. No escales el texto con estos cambios de espaciado. | | space-scaled-xxs | comfortable: 4px; compact: 2px | Usa el valor de cómodo o compacto según la densidad activa. No escales el texto con estos cambios de espaciado. | | space-scaled-xs | comfortable: 8px; compact: 4px | Usa el valor de cómodo o compacto según la densidad activa. No escales el texto con estos cambios de espaciado. | | space-scaled-s | comfortable: 12px; compact: 8px | Usa el valor de cómodo o compacto según la densidad activa. No escales el texto con estos cambios de espaciado. | | space-scaled-m | comfortable: 16px; compact: 12px | Usa el valor de cómodo o compacto según la densidad activa. No escales el texto con estos cambios de espaciado. | | space-scaled-l | comfortable: 20px; compact: 16px | Usa el valor de cómodo o compacto según la densidad activa. No escales el texto con estos cambios de espaciado. | | space-scaled-xl | comfortable: 24px; compact: 20px | Usa el valor de cómodo o compacto según la densidad activa. No escales el texto con estos cambios de espaciado. | | space-scaled-xxl | comfortable: 32px; compact: 24px | Usa el valor de cómodo o compacto según la densidad activa. No escales el texto con estos cambios de espaciado. | | space-scaled-xxxl | comfortable: 40px; compact: 32px | Usa el valor de cómodo o compacto según la densidad activa. No escales el texto con estos cambios de espaciado. | ### Forma de los componentes | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | border-radius-container | 16px | Conserva la forma del componente indicado. El radio de un botón no es un radio universal para los contenedores. | | border-radius-button | 20px | Conserva la forma del componente indicado. El radio de un botón no es un radio universal para los contenedores. | | border-radius-input | 8px | Conserva la forma del componente indicado. El radio de un botón no es un radio universal para los contenedores. | | border-radius-alert | 12px | Conserva la forma del componente indicado. El radio de un botón no es un radio universal para los contenedores. | | border-radius-dropdown | 8px | Conserva la forma del componente indicado. El radio de un botón no es un radio universal para los contenedores. | | border-radius-card-embedded | 8px | Conserva la forma del componente indicado. El radio de un botón no es un radio universal para los contenedores. | ### Temporización de las interacciones | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | motion-duration-responsive | default: 115ms; disabled: 0ms | El movimiento nativo se reduce a cero en el modo de movimiento desactivado. Evita añadir una transición no relacionada a la misma interacción. | | motion-duration-expressive | default: 165ms; disabled: 0ms | El movimiento nativo se reduce a cero en el modo de movimiento desactivado. Evita añadir una transición no relacionada a la misma interacción. | | motion-duration-complex | default: 250ms; disabled: 0ms | El movimiento nativo se reduce a cero en el modo de movimiento desactivado. Evita añadir una transición no relacionada a la misma interacción. | ### Composición nativa API | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Wizard | activeStepIndex · onNavigate · onSubmit | Controla el paso actual en React; valida antes de aceptar el índice siguiente solicitado. | | FormField | label · constraintText · errorText | Coloca la regla de formato y el mensaje de error junto al campo del nombre. | | Input | value · onChange({ detail }) | Lee detail.value en lugar del destino de un evento del DOM. | | Select | selectedOption · options · onChange | Conserva el objeto de opción seleccionado, incluidos label y value. | | Container | header={
} | Agrupa los campos de configuración relacionados sin inventar un nuevo sistema de tarjetas. | | ColumnLayout | columns={2} · variant="text-grid" | Muestra metadatos de revisión compactos con columnas adaptables a la biblioteca. | | SpaceBetween | size="l" | Usa la escala de separación de la biblioteca para separar los campos y los módulos de revisión. | | applyMode | Mode.Light / Mode.Dark | Cambia el modo visual global para los componentes nativos y los tokens semánticos. | ## Guía completa del sistema de diseño AWS Cloudscape Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## Arquitectura de configuración del sistema de diseño AWS Cloudscape ### Adapta el flujo de trabajo a Wizard > El ejemplo separa la configuración de la revisión. Wizard proporciona la navegación entre pasos y las acciones; la aplicación proporciona el índice actual, los valores de los campos, la regla de validación y la confirmación final. El lector puede volver a la configuración sin reconstruir el formulario ni perder la capacidad seleccionada. Es una opción más adecuada que ocultar todo un flujo de varios pasos dentro de una única Card genérica. ### Construye con contenedores nativos Container, Header y SpaceBetween definen la sección del formulario. El h1 presenta la operación; el h2 nombra el grupo de ajustes. El texto explicativo aparece junto al campo o al paso que describe. El ancho máximo de 1200px y el relleno de página que rodean el contenido son opciones explícitas de la aplicación CSS, no tokens de diseño de Cloudscape exportados. ## Tokens semánticos y modos visuales del sistema de diseño AWS Cloudscape ### Elige un rol antes que un valor La referencia distingue entre el fondo de disposición, el contenido de los contenedores, el texto del cuerpo, el texto interactivo y los mensajes de estado. Sus valores no forman una paleta plana. Para una interfaz personalizada, importa el token con nombre desde @cloudscape-design/design-tokens en lugar de copiar un valor hexadecimal del modo claro en cada estado. El token establece un propósito, mientras que su valor puede evolucionar. ### Cambiar de modo desde la biblioteca La vista previa llama a applyMode con Mode.Light o Mode.Dark desde global-styles. Esto actualiza el modo que usan los componentes, en lugar de reemplazar colores CSS arbitrarios. Una pantalla de revisión en modo oscuro conserva las mismas etiquetas, la capacidad seleccionada y el estado de navegación. El JSON de origen registra los valores de los modos claro y oscuro, por lo que se pueden examinar por separado. ## Tipografía y jerarquía de encabezados del sistema de diseño AWS Cloudscape ### Combina los roles de fuente y altura de línea La referencia body-m de visual-refresh es de 14px con una altura de línea de 20px. heading-xl es de 24px con una altura de línea de 30px; heading-l, de 20px con 24px; y heading-m, de 18px con 22px. Estos roles definen la jerarquía compacta del formulario; no son tamaños intercambiables para titulares de marketing. ### Usa variantes semánticas de componentes La variante h1 de Header se titula Crear un espacio de trabajo. Los encabezados de Container usan h2, y la variante awsui-key-label de Box da a las etiquetas de revisión un tratamiento secundario uniforme. Los valores de la revisión siguen siendo texto normal y legible. No conviertas todas las etiquetas de campo en encabezados solo para darles más peso visual. ## Campos controlados y composición de revisión del sistema de diseño AWS Cloudscape ### Comprende el contrato del evento detail Input emite un evento cuyo detail.value contiene el nuevo texto. Select emite detail.selectedOption, que es un objeto de opción, no una cadena simple. El ejemplo completo almacena ese objeto y muestra su label en la revisión. Así se evita un error común de integración en el que Select aparece vacío porque se proporciona solo un identificador a selectedOption. ### Mantén las instrucciones junto al campo FormField contiene la etiqueta Workspace name, el texto de restricciones y el mensaje de error. La regla de validación permite de 3 a 30 letras minúsculas, números y guiones, y exige que el nombre empiece por una letra. Esta regla es una política de la aplicación de ejemplo, no una regla de nomenclatura general de AWS. La explicación de capacidad también indica que sus perfiles son ficticios. - La política de formato del campo corresponde a esta aplicación de ejemplo. - Las opciones de capacidad no son afirmaciones sobre productos ni precios. - Los componentes nativos se encargan de la presentación; el estado de React mantiene la configuración. ## Densidad y diseño adaptable del sistema de diseño AWS Cloudscape ### No trates el modo compacto como un nivel de zoom Los valores de espaciado escalados publicados varían según la densidad. Por ejemplo, space-scaled-m es de 16px en modo cómodo y de 12px en modo compacto, mientras que space-scaled-l es de 20px y 16px, respectivamente. Estas diferencias comprimen el ritmo vertical sin redefinir el contenido ni reducir el texto arbitrariamente. Los componentes nativos aplican sus propias reglas de densidad. ### Adapta las estructuras de pasos y revisión Wizard cambia la presentación de la navegación según el espacio disponible; ColumnLayout distribuye los metadatos de revisión de forma adaptable. La aplicación CSS reduce el relleno exterior por debajo de 600px. El ejemplo no fija de forma rígida el ancho de la navegación de pasos para escritorio y, en la versión móvil, mantiene visibles las acciones Next, Previous y Confirm. ## Validación y confirmación de Wizard de sistema de diseño AWS Cloudscape ### Valida antes de aceptar la navegación onNavigate recibe requestedStepIndex. La aplicación comprueba el nombre actual antes de avanzar a la revisión y mantiene el paso actual si el nombre no es válido. Al editarlo, se borra el error para que el siguiente envío se pueda evaluar desde cero. Al volver a la configuración, se conservan el nombre y la opción seleccionada. 1. Envía un nombre no válido y permanece en la configuración. 2. Corrige el nombre y elige otro perfil de capacidad. 3. Avanza a la revisión y confirma ambos valores. 4. Usa Edit settings para volver sin perder ninguno de los valores. 5. Confirma localmente y reinicia el ejemplo. ### Distingue una configuración de la provisión La acción final muestra un Alert de éxito local y un resumen de la configuración. No da a entender que se haya creado un recurso real. En una aplicación real, mantén pendiente la acción de envío mientras se ejecuta la provisión, distingue las solicitudes aceptadas de los recursos completados y ofrece una forma de recuperarse de los errores sin descartar la configuración. ## Accesibilidad de formularios de sistema de diseño AWS Cloudscape ### Conserva las etiquetas y los nombres de navegación Wizard recibe navigationAriaLabel y las cadenas traducidas de las acciones. Cada Input y Select está dentro de un FormField etiquetado. Alert comunica los resultados no válidos o satisfactorios mediante la semántica nativa del componente. Las restricciones visibles complementan la etiqueta del campo, no la sustituyen. ### Revisa el recorrido con teclado en toda la operación Usa el teclado para ir al campo del nombre, abrir el selector de capacidad, avanzar, volver, editar y confirmar. El comportamiento de foco nativo ayuda, pero la aplicación sigue siendo responsable de la regla de validación del paso y del significado de la confirmación. Una biblioteca de componentes no puede validar por sí sola una regla de negocio que no se haya definido. ## Instalación y límites personalizados de sistema de diseño AWS Cloudscape ### Instala juntos los paquetes relacionados La implementación importa los componentes mediante sus subrutas de paquete individuales y carga global-styles una sola vez. design-tokens proporciona la referencia para los estilos personalizados. El archivo de entrada React y el archivo compacto CSS incluidos reproducen el ejemplo interactivo en una aplicación Vite React. Mantén juntas las versiones compatibles de los paquetes de Cloudscape. ### Usa el ejemplo proporcionado como punto de partida real Sustituye los datos ficticios de capacidad solo después de definir el modelo real de tu servicio. Conserva los contratos de eventos y el paso de revisión, y luego añade el envío asíncrono y respuestas de error explícitas. Para cualquier elemento específico, prioriza un componente de Cloudscape existente; solo entonces incorpora un elemento personalizado con un token semántico adecuado. ## Ejemplos de componentes de sistema de diseño AWS Cloudscape ### main.jsx — asistente de configuración completo Wizard, FormField, Select y metadatos de revisión nativos, con navegación controlada y confirmación local. ``` 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(""); }} />