# AWS Cloudscape: дизайн-система ## Предварительный просмотр интерфейса дизайн-системы AWS Cloudscape Попробуйте недопустимые имена, выберите профиль ресурсов, переключайтесь между настройкой и проверкой, изменяйте оформление и подтверждайте конфигурацию локально. ## Справочник по дизайну-системе дизайн-система AWS Cloudscape Компоненты Cloudscape 3.0.1390 и design-tokens 3.0.114, тема visual-refresh. Значения считываются из опубликованного JSON с токенами. Цветовые режимы и плотность контента — отдельные параметры. Здесь показан выбранный пример реализации, а не полный экспорт токенов. ### Семантические цветовые роли в светлом и тёмном режимах | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | color-background-layout-main | light: #ffffff; dark: #161d26 | Используйте именованную роль в предусмотренном для неё контексте; в паре показаны значения для светлого и тёмного режимов, а не взаимозаменяемые образцы цвета. | | color-background-container-content | light: #ffffff; dark: #161d26 | Используйте именованную роль в предусмотренном для неё контексте; в паре показаны значения для светлого и тёмного режимов, а не взаимозаменяемые образцы цвета. | | color-text-body-default | light: #0f141a; dark: #c6c6cd | Используйте именованную роль в предусмотренном для неё контексте; в паре показаны значения для светлого и тёмного режимов, а не взаимозаменяемые образцы цвета. | | color-text-body-secondary | light: #424650; dark: #c6c6cd | Используйте именованную роль в предусмотренном для неё контексте; в паре показаны значения для светлого и тёмного режимов, а не взаимозаменяемые образцы цвета. | | color-text-interactive-default | light: #424650; dark: #dedee3 | Используйте именованную роль в предусмотренном для неё контексте; в паре показаны значения для светлого и тёмного режимов, а не взаимозаменяемые образцы цвета. | | color-text-link-default | light: #006ce0; dark: #42b4ff | Используйте именованную роль в предусмотренном для неё контексте; в паре показаны значения для светлого и тёмного режимов, а не взаимозаменяемые образцы цвета. | | color-text-status-error | light: #db0000; dark: #ff7a7a | Используйте именованную роль в предусмотренном для неё контексте; в паре показаны значения для светлого и тёмного режимов, а не взаимозаменяемые образцы цвета. | | color-text-status-success | light: #00802f; dark: #2bb534 | Используйте именованную роль в предусмотренном для неё контексте; в паре показаны значения для светлого и тёмного режимов, а не взаимозаменяемые образцы цвета. | | color-border-input-default | light: #8c8c94; dark: #656871 | Используйте именованную роль в предусмотренном для неё контексте; в паре показаны значения для светлого и тёмного режимов, а не взаимозаменяемые образцы цвета. | | color-background-button-primary-default | light: #006ce0; dark: #42b4ff | Используйте именованную роль в предусмотренном для неё контексте; в паре показаны значения для светлого и тёмного режимов, а не взаимозаменяемые образцы цвета. | ### Типографика основного текста и заголовков | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | font-size-body-m | 14px | Сочетайте размер и межстрочный интервал для одной и той же роли. Варианты Header и Box задают иерархию компонентов. | | font-size-body-s | 12px | Сочетайте размер и межстрочный интервал для одной и той же роли. Варианты Header и Box задают иерархию компонентов. | | font-size-heading-l | 20px | Сочетайте размер и межстрочный интервал для одной и той же роли. Варианты Header и Box задают иерархию компонентов. | | font-size-heading-m | 18px | Сочетайте размер и межстрочный интервал для одной и той же роли. Варианты Header и Box задают иерархию компонентов. | | font-size-heading-s | 16px | Сочетайте размер и межстрочный интервал для одной и той же роли. Варианты Header и Box задают иерархию компонентов. | | font-size-heading-xl | 24px | Сочетайте размер и межстрочный интервал для одной и той же роли. Варианты Header и Box задают иерархию компонентов. | | font-size-heading-xs | 14px | Сочетайте размер и межстрочный интервал для одной и той же роли. Варианты Header и Box задают иерархию компонентов. | | line-height-body-m | 20px | Сочетайте размер и межстрочный интервал для одной и той же роли. Варианты Header и Box задают иерархию компонентов. | | line-height-body-s | 16px | Сочетайте размер и межстрочный интервал для одной и той же роли. Варианты Header и Box задают иерархию компонентов. | | line-height-heading-l | 24px | Сочетайте размер и межстрочный интервал для одной и той же роли. Варианты Header и Box задают иерархию компонентов. | | line-height-heading-m | 22px | Сочетайте размер и межстрочный интервал для одной и той же роли. Варианты Header и Box задают иерархию компонентов. | | line-height-heading-s | 20px | Сочетайте размер и межстрочный интервал для одной и той же роли. Варианты Header и Box задают иерархию компонентов. | | line-height-heading-xl | 30px | Сочетайте размер и межстрочный интервал для одной и той же роли. Варианты Header и Box задают иерархию компонентов. | | line-height-heading-xs | 18px | Сочетайте размер и межстрочный интервал для одной и той же роли. Варианты Header и Box задают иерархию компонентов. | ### Интервалы с учётом плотности | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | space-scaled-xxxs | comfortable: 2px; compact: 0px | В зависимости от активной плотности используйте значение для комфортного или компактного режима. Не масштабируйте текст вместе с этими изменениями интервалов. | | space-scaled-xxs | comfortable: 4px; compact: 2px | В зависимости от активной плотности используйте значение для комфортного или компактного режима. Не масштабируйте текст вместе с этими изменениями интервалов. | | space-scaled-xs | comfortable: 8px; compact: 4px | В зависимости от активной плотности используйте значение для комфортного или компактного режима. Не масштабируйте текст вместе с этими изменениями интервалов. | | space-scaled-s | comfortable: 12px; compact: 8px | В зависимости от активной плотности используйте значение для комфортного или компактного режима. Не масштабируйте текст вместе с этими изменениями интервалов. | | space-scaled-m | comfortable: 16px; compact: 12px | В зависимости от активной плотности используйте значение для комфортного или компактного режима. Не масштабируйте текст вместе с этими изменениями интервалов. | | space-scaled-l | comfortable: 20px; compact: 16px | В зависимости от активной плотности используйте значение для комфортного или компактного режима. Не масштабируйте текст вместе с этими изменениями интервалов. | | space-scaled-xl | comfortable: 24px; compact: 20px | В зависимости от активной плотности используйте значение для комфортного или компактного режима. Не масштабируйте текст вместе с этими изменениями интервалов. | | space-scaled-xxl | comfortable: 32px; compact: 24px | В зависимости от активной плотности используйте значение для комфортного или компактного режима. Не масштабируйте текст вместе с этими изменениями интервалов. | | space-scaled-xxxl | comfortable: 40px; compact: 32px | В зависимости от активной плотности используйте значение для комфортного или компактного режима. Не масштабируйте текст вместе с этими изменениями интервалов. | ### Форма компонентов | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | border-radius-container | 16px | Сохраняйте форму, заданную для конкретного компонента. Радиус скругления кнопки не является универсальным радиусом для контейнеров. | | border-radius-button | 20px | Сохраняйте форму, заданную для конкретного компонента. Радиус скругления кнопки не является универсальным радиусом для контейнеров. | | border-radius-input | 8px | Сохраняйте форму, заданную для конкретного компонента. Радиус скругления кнопки не является универсальным радиусом для контейнеров. | | border-radius-alert | 12px | Сохраняйте форму, заданную для конкретного компонента. Радиус скругления кнопки не является универсальным радиусом для контейнеров. | | border-radius-dropdown | 8px | Сохраняйте форму, заданную для конкретного компонента. Радиус скругления кнопки не является универсальным радиусом для контейнеров. | | border-radius-card-embedded | 8px | Сохраняйте форму, заданную для конкретного компонента. Радиус скругления кнопки не является универсальным радиусом для контейнеров. | ### Длительность анимации взаимодействия | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | motion-duration-responsive | default: 115ms; disabled: 0ms | В нативном режиме отключения анимации её длительность становится нулевой. Не добавляйте к тому же взаимодействию посторонний переход. | | motion-duration-expressive | default: 165ms; disabled: 0ms | В нативном режиме отключения анимации её длительность становится нулевой. Не добавляйте к тому же взаимодействию посторонний переход. | | motion-duration-complex | default: 250ms; disabled: 0ms | В нативном режиме отключения анимации её длительность становится нулевой. Не добавляйте к тому же взаимодействию посторонний переход. | ### Нативная композиция API | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | Wizard | activeStepIndex · onNavigate · onSubmit | Управляйте текущим шагом в React; проверяйте данные перед переходом к запрошенному индексу следующего шага. | | FormField | label · constraintText · errorText | Разместите правило формата и сообщение об ошибке рядом с полем имени. | | Input | value · onChange({ detail }) | Читайте detail.value, а не цель DOM-события. | | Select | selectedOption · options · onChange | Сохраняйте выбранный объект опции целиком, включая label и value. | | Container | header={
} | Группируйте связанные поля настройки, не создавая новую систему карточек. | | ColumnLayout | columns={2} · variant="text-grid" | Отображайте компактные сведения для проверки в адаптивных колонках библиотеки. | | SpaceBetween | size="l" | Используйте шкалу интервалов библиотеки, чтобы разделять поля и блоки проверки. | | applyMode | Mode.Light / Mode.Dark | Переключайте общий визуальный режим для нативных компонентов и семантических токенов. | ## Полное руководство по дизайн-системе AWS Cloudscape Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса. Подробные рекомендации, отправная точка для реализации и ссылки на источники. ## Архитектура настройки в дизайн-системе AWS Cloudscape ### Выберите Wizard для этого рабочего процесса > В этом примере настройка отделена от проверки. Wizard предоставляет навигацию по шагам и действия, а приложение — текущий индекс, значения полей, правило проверки и окончательное подтверждение. Читатель может вернуться к настройке, не перестраивая форму и не теряя выбранный профиль ресурсов. Это решение лучше, чем скрывать весь многошаговый процесс в одной универсальной Card. ### Используйте нативные контейнеры Container, Header и SpaceBetween формируют секцию формы. Заголовок h1 обозначает действие, а h2 — группу настроек. Пояснения размещаются рядом с полем или шагом, к которому относятся. Максимальная ширина 1200px и отступы страницы заданы явно на уровне приложения CSS и не являются экспортируемыми токенами компоновки Cloudscape. ## Семантические токены и визуальные режимы дизайн-системы AWS Cloudscape ### Сначала выберите роль, затем значение В справочнике отдельно указаны фон макета, содержимое контейнеров, основной текст, интерактивный текст и обратная связь о состоянии. Это не единая палитра. Для пользовательского интерфейса импортируйте именованный токен из @cloudscape-design/design-tokens, а не копируйте светлое шестнадцатеричное значение для каждого состояния. Токен фиксирует назначение цвета, а само значение может меняться. ### Переключайте режимы через библиотеку В примере applyMode вызывается с Mode.Light или Mode.Dark из global-styles. Это меняет режим, используемый компонентами, а не подменяет произвольные цвета CSS. На тёмном экране проверки остаются неизменными подписи, выбранный профиль ресурсов и состояние навигации. В исходном JSON записаны значения для обоих режимов, поэтому эту разницу можно проверить. ## Типографика и иерархия заголовков дизайн-системы AWS Cloudscape ### Сочетайте роли шрифта и межстрочного интервала В теме visual-refresh для основного текста размера m задан размер 14px и межстрочный интервал 20px. Для heading-xl указаны 24px и 30px, для heading-l — 20px и 24px, а для heading-m — 18px и 22px. Эти роли задают компактную иерархию формы и не предназначены для крупных рекламных заголовков. ### Используйте семантические варианты компонентов Вариант Header h1 задаёт заголовок «Создание рабочей области». Для заголовков контейнеров используйте h2, а вариант Box awsui-key-label придаёт подписям в блоке проверки единообразное вторичное оформление. Значения в блоке проверки остаются обычным читаемым текстом. Не превращайте каждую подпись поля в заголовок, чтобы просто усилить визуальный акцент. ## Поля с управляемым состоянием и композиция проверки в дизайн-системе AWS Cloudscape ### Разберитесь в контракте detail-событий Input отправляет событие, в котором новое значение текста содержится в detail.value. Select отправляет detail.selectedOption — объект опции, а не обычную строку. В полном примере сохраняется этот объект, а при проверке отображается его label. Так можно избежать распространённой ошибки интеграции, из-за которой Select оказывается пустым, когда в selectedOption передаётся только идентификатор. ### Размещайте инструкции рядом с полем FormField содержит подпись Workspace name, текст с ограничениями и сообщение об ошибке. Правило проверки разрешает от 3 до 30 строчных букв, цифр и дефисов; имя должно начинаться с буквы. Это правило относится к политике демонстрационного приложения, а не к общему правилу именования AWS. Пояснение к профилям ресурсов также отмечает, что они вымышленные. - Правило формата поля действует только в этом демонстрационном приложении. - Профили ресурсов не являются сведениями о продукте или ценах. - За представление отвечают нативные компоненты, а за конфигурацию — состояние React. ## Плотность и адаптивный макет в дизайн-системе AWS Cloudscape ### Не считайте компактный режим масштабированием В опубликованных масштабированных значениях интервалов предусмотрены разные значения для каждой плотности. Например, space-scaled-m составляет 16px в комфортном режиме и 12px в компактном, а space-scaled-l — 20px и 16px соответственно. Такие различия сжимают вертикальный ритм, не меняя содержимое и не уменьшая произвольно размер текста. Нативные компоненты применяют собственные правила плотности. ### Адаптируйте структуру шагов и проверки Wizard меняет представление навигации в зависимости от доступной ширины, а ColumnLayout адаптивно размещает сведения для проверки. При ширине менее 600px приложение CSS уменьшает внешние отступы. В примере не задана жёстко ширина навигации для настольного представления; в мобильном варианте кнопки «Далее», «Назад» и «Подтвердить локально» остаются видимыми. ## Проверка и подтверждение в Wizard дизайн-системы AWS Cloudscape ### Проверяйте данные до перехода onNavigate получает requestedStepIndex. Перед переходом к проверке приложение проверяет текущее имя и остаётся на том же шаге, если оно недопустимо. При редактировании ошибка сбрасывается, чтобы при следующей отправке данные проверялись заново. При возврате к настройкам имя и выбранная опция сохраняются. 1. Введите недопустимое имя и убедитесь, что приложение остаётся на шаге настройки. 2. Исправьте имя и выберите другой профиль ресурсов. 3. Перейдите к проверке и подтвердите оба значения. 4. Нажмите «Изменить настройки», чтобы вернуться, не теряя ни одного значения. 5. Подтвердите локально и перезапустите пример. ### Не путайте сохранение конфигурации с созданием ресурса После последнего действия отображаются локальное уведомление Alert об успешном выполнении и сводка конфигурации. Это не имитирует создание настоящего ресурса. В реальном приложении во время подготовки ресурса сохраняйте состояние отправки, различайте принятые запросы и созданные ресурсы, а также предусмотрите восстановление после ошибки без потери конфигурации. ## Доступность форм в дизайн-системе AWS Cloudscape ### Сохраняйте подписи и названия навигации Для Wizard заданы navigationAriaLabel и переведённые строки действий. Каждый Input и Select заключён в FormField с подписью. Alert сообщает о недопустимом вводе или успешном выполнении с помощью нативной семантики компонента. Видимые ограничения дополняют подпись поля, а не заменяют её. ### Проверьте весь процесс с клавиатуры С помощью клавиатуры перейдите к полю имени, откройте список Select, перейдите дальше, вернитесь, внесите изменения и подтвердите их. Нативное управление фокусом упрощает взаимодействие, но правило проверки шага и смысл подтверждения по-прежнему определяет приложение. Сама библиотека компонентов не может проверить отсутствующее бизнес-правило. ## Установка и границы пользовательской настройки в дизайн-системе AWS Cloudscape ### Устанавливайте связанные пакеты вместе В реализации компоненты импортируются из отдельных подпутей пакетов, а global-styles подключается один раз. В custom-style используется справочник design-tokens. Предоставленный входной файл React и компактный файл CSS позволяют запустить интерактивный пример в приложении Vite React. Используйте совместимые версии пакетов Cloudscape. ### Используйте пример как основу для реального проекта Заменяйте вымышленные данные о профилях ресурсов, только определив фактическую модель своего сервиса. Сохраните контракты событий и шаг проверки, затем добавьте асинхронную отправку и явную обработку ошибок. Для нестандартных элементов сначала рассмотрите существующие компоненты Cloudscape и лишь затем добавляйте пользовательский элемент с подходящим семантическим токеном. ## Примеры компонентов дизайн-системы AWS Cloudscape ### main.jsx — мастер настройки целиком Нативные Wizard, FormField, Select и метаданные проверки с управляемой навигацией и локальным подтверждением. ``` 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(""); }} />