# AWS Cloudscape デザインシステム

## AWS Cloudscape デザインシステムのインターフェースプレビュー

無効な名前を試し、容量プロファイルを選択して、設定と確認の画面を切り替え、外観を変更し、設定内容がローカルで確定されることを確認してください。

## AWS Cloudscape デザインシステムの設計リファレンス

Cloudscape components 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 | 同じ役割の font-size と line-height を組み合わせます。Header と Box のバリアントがコンポーネントの階層を定めます。 |
| font-size-body-s | 12px | 同じ役割の font-size と line-height を組み合わせます。Header と Box のバリアントがコンポーネントの階層を定めます。 |
| font-size-heading-l | 20px | 同じ役割の font-size と line-height を組み合わせます。Header と Box のバリアントがコンポーネントの階層を定めます。 |
| font-size-heading-m | 18px | 同じ役割の font-size と line-height を組み合わせます。Header と Box のバリアントがコンポーネントの階層を定めます。 |
| font-size-heading-s | 16px | 同じ役割の font-size と line-height を組み合わせます。Header と Box のバリアントがコンポーネントの階層を定めます。 |
| font-size-heading-xl | 24px | 同じ役割の font-size と line-height を組み合わせます。Header と Box のバリアントがコンポーネントの階層を定めます。 |
| font-size-heading-xs | 14px | 同じ役割の font-size と line-height を組み合わせます。Header と Box のバリアントがコンポーネントの階層を定めます。 |
| line-height-body-m | 20px | 同じ役割の font-size と line-height を組み合わせます。Header と Box のバリアントがコンポーネントの階層を定めます。 |
| line-height-body-s | 16px | 同じ役割の font-size と line-height を組み合わせます。Header と Box のバリアントがコンポーネントの階層を定めます。 |
| line-height-heading-l | 24px | 同じ役割の font-size と line-height を組み合わせます。Header と Box のバリアントがコンポーネントの階層を定めます。 |
| line-height-heading-m | 22px | 同じ役割の font-size と line-height を組み合わせます。Header と Box のバリアントがコンポーネントの階層を定めます。 |
| line-height-heading-s | 20px | 同じ役割の font-size と line-height を組み合わせます。Header と Box のバリアントがコンポーネントの階層を定めます。 |
| line-height-heading-xl | 30px | 同じ役割の font-size と line-height を組み合わせます。Header と Box のバリアントがコンポーネントの階層を定めます。 |
| line-height-heading-xs | 18px | 同じ役割の font-size と line-height を組み合わせます。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 }) | DOM イベントのターゲットではなく detail.value を読み取ります。 |
| Select | selectedOption · options · onChange | ラベルと値を含む、選択中のオプションオブジェクトを保持します。 |
| Container | header={<Header variant="h2" />} | 関連する設定フィールドをまとめ、新たなカードシステムを独自に作らないでください。 |
| 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 デザインシステムのセマンティックトークンとビジュアルモード

### 値より先に役割を選ぶ

このリファレンスでは、レイアウトの背景、コンテナのコンテンツ、本文テキスト、インタラクティブテキスト、ステータスのフィードバックを区別しています。それぞれの値は、単なる色の一覧ではありません。カスタム UI では、ライトモードの16進数カラーをあらゆる状態にコピーするのではなく、@cloudscape-design/design-tokens から名前付きトークンをインポートしてください。トークンは用途についての共通認識を表し、値は変更されることがあります。

### ライブラリを通じてモードを切り替える

プレビューでは、global-styles の Mode.Light または Mode.Dark を使って applyMode を呼び出します。これにより、任意の CSS カラーを置き換えるのではなく、コンポーネントで使われるモードが更新されます。ダークモードの確認画面でも、ラベル、選択中のキャパシティ、ナビゲーションの状態は変わりません。ソースの JSON にはライトモードとダークモードの両方の解決値が記録されているため、その違いを確認できます。

## AWS Cloudscape デザインシステムのタイポグラフィとヘッダー階層

### フォントと行の高さの役割を組み合わせる

visual-refresh の body-m は、フォントサイズが14px、行の高さが20pxです。heading-xl は24px／30px、heading-l は20px／24px、heading-m は18px／22pxです。これらの役割によってコンパクトなフォームの階層が決まります。マーケティング向けの大見出しサイズと置き換えられるものではありません。

### セマンティックなコンポーネントバリアントを使う

Header の variant h1 には「ワークスペースを作成」と表示します。Container のヘッダーには h2 を使い、Box の variant awsui-key-label で確認画面のラベルを一貫した控えめなスタイルにします。確認画面の値には、通常の読みやすいテキストを使います。視覚的な強調を加えるためだけに、すべてのフィールドラベルを見出しにしないでください。

## AWS Cloudscape デザインシステムの制御フィールドと確認画面の構成

### detail イベントの仕様を理解する

Input は、新しいテキストを detail.value に含むイベントを発行します。Select は detail.selectedOption を発行します。これは単なる文字列ではなく、オプションオブジェクトです。この例では、そのオブジェクトを保存し、確認画面にはその label を表示します。selectedOption に識別子だけを渡したため Select が空に見える、といったよくある連携ミスを防げます。

### フィールドの説明はフィールドと一緒に配置する

FormField がワークスペース名のラベル、入力条件、エラーテキストをまとめて管理します。検証ルールでは、先頭を英字にし、英小文字・数字・ハイフンを使った3～30文字の名前を許可します。このルールはサンプルアプリケーション独自のものであり、AWS 全体に適用される命名ルールではありません。同様に、キャパシティの説明にあるプロファイルも架空のものです。

- フィールドの書式ルールは、このサンプルアプリケーション独自のものです。

- キャパシティの選択肢は、製品や価格に関する主張ではありません。

- 表示は標準コンポーネントが担い、設定は React の状態で管理します。

## AWS Cloudscape デザインシステムの密度とレスポンシブレイアウト

### コンパクトモードを単なる拡大縮小として扱わない

公開されているスペーシングのスケール値は、密度によって異なります。たとえば、space-scaled-m は comfortable で16px、compact で12px、space-scaled-l はそれぞれ20pxと16pxです。こうした違いによって、コンテンツの定義を変えたりテキストを任意に縮小したりせずに、縦方向のリズムを詰められます。標準コンポーネントが、それぞれの密度ルールを適用します。

### ステップと確認画面の構成を幅に合わせて調整する

Wizard は利用可能な幅に合わせてナビゲーションの表示を変え、ColumnLayout は確認画面のメタデータをレスポンシブに配置します。アプリケーションの CSS では、幅が600px未満の場合に外側のパディングを小さくします。このサンプルではデスクトップのステップナビゲーションの幅を固定せず、モバイルでも Next、Previous、Confirm の各アクションを画面内に表示します。

## AWS Cloudscape デザインシステムの Wizard による検証と確認

### ナビゲーションを受け付ける前に検証する

onNavigate は requestedStepIndex を受け取ります。アプリケーションは確認画面に進む前に現在の名前を検証し、無効な場合はステップをそのままにします。編集するとエラーがクリアされ、次の送信時に改めて検証されます。設定に戻っても、名前と選択したオプションは保持されます。

1. 無効な名前を送信し、設定画面にとどまる。

2. 名前を修正し、別のキャパシティプロファイルを選択する。

3. 確認画面に進み、両方の値を確認する。

4. 「設定を編集」を使って、どちらの値も失わずに戻る。

5. ローカルで確認し、サンプルを再開する。

### 手順例とリソースのプロビジョニングを区別する

最後のアクションでは、ローカルの成功を示す Alert と設定の概要を表示します。実際にリソースを作成したかのように装うことはありません。実際のアプリケーションでは、プロビジョニング中は送信アクションを処理中の状態にし、リクエストの受け付けとリソースの作成完了を区別してください。また、設定を破棄せずに失敗から復旧できる方法を提供します。

## AWS Cloudscape デザインシステムのフォームアクセシビリティ

### ラベルとナビゲーション名を維持する

Wizard には navigationAriaLabel と翻訳済みのアクション文字列を渡します。すべての Input と Select は、ラベル付きの FormField に含めます。Alert は、無効な結果や成功結果を標準コンポーネントのセマンティクスで伝えます。画面に表示する入力条件は、フィールドラベルの代わりではなく、その補足として使用します。

### 操作全体を通したキーボード操作を確認する

キーボードで名前フィールドに移動し、キャパシティセレクターを開いて、次へ進み、戻り、編集してから確認します。標準のフォーカス動作は役立ちますが、ステップの検証ルールと確認の意味はアプリケーション側で定義する必要があります。コンポーネントライブラリだけで、不足しているビジネスルールを検証することはできません。

## AWS Cloudscape デザインシステムのインストールとカスタマイズの境界

### 関連パッケージをまとめてインストールする

各コンポーネントを個別のパッケージサブパスからインポートし、global-styles は一度だけ読み込みます。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 (
    <main className="awsui-typography cloudscape-example">
      <div className="appearance">
        <span>CLOUDSCAPE · RESOURCE CONFIGURATION</span>
        <Toggle
          checked={dark}
          onChange={({ detail }) => {
            setDark(detail.checked);
            applyMode(detail.checked ? Mode.Dark : Mode.Light);
          }}
        >
          Dark mode
        </Toggle>
      </div>
      <Header
        variant="h1"
        description="Configure a fictional compute workspace. This example does not create a cloud resource."
      >
        Create a workspace
      </Header>
      <div className="wizard-content">
        {complete ? (
          <SpaceBetween size="l">
            <Alert type="success" header="Configuration confirmed locally">
              The {name} recipe is ready for review. No cloud API was called and
              no resource was provisioned.
            </Alert>
            <Container header={<Header variant="h2">Workspace recipe</Header>}>
              <ColumnLayout columns={2} variant="text-grid">
                <div>
                  <Box variant="awsui-key-label">Name</Box>
                  {name}
                </div>
                <div>
                  <Box variant="awsui-key-label">Capacity</Box>
                  {size.label}
                </div>
              </ColumnLayout>
            </Container>
            <Button onClick={reset}>Start another example</Button>
          </SpaceBetween>
        ) : (
          <Wizard
            activeStepIndex={step}
            onNavigate={({ detail }) => 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: (
                  <Container
                    header={<Header variant="h2">Workspace settings</Header>}
                  >
                    <SpaceBetween size="l">
                      <FormField
                        label="Workspace name"
                        constraintText="3–30 characters; lowercase letters, numbers and hyphens."
                        errorText={error}
                      >
                        <Input
                          value={name}
                          onChange={({ detail }) => {
                            setName(detail.value);
                            setError("");
                          }}
                        />
                      </FormField>
                      <FormField
                        label="Capacity profile"
                        description="These profiles are sample application data, not real cloud products or prices."
                      >
                        <Select
                          selectedOption={size}
                          onChange={({ detail }) =>
                            setSize(detail.selectedOption)
                          }
                          options={sizes}
                        />
                      </FormField>
                    </SpaceBetween>
                  </Container>
                ),
              },
              {
                title: "Review configuration",
                description:
                  "Check the values before confirming the local example.",
                content: (
                  <SpaceBetween size="l">
                    <Container
                      header={
                        <Header
                          variant="h2"
                          actions={
                            <Button onClick={() => setStep(0)}>
                              Edit settings
                            </Button>
                          }
                        >
                          Workspace settings
                        </Header>
                      }
                    >
                      <ColumnLayout columns={2} variant="text-grid">
                        <div>
                          <Box variant="awsui-key-label">Workspace name</Box>
                          {name}
                        </div>
                        <div>
                          <Box variant="awsui-key-label">Capacity profile</Box>
                          {size.label}
                        </div>
                      </ColumnLayout>
                    </Container>
                    <Alert type="info">
                      Confirmation changes the preview only. Production
                      provisioning would require a real service, permissions and
                      a verified response.
                    </Alert>
                  </SpaceBetween>
                ),
              },
            ]}
          />
        )}
      </div>
      <footer>
        Native Cloudscape components 3.0.1390 · configuration, validation,
        review and local confirmation.
      </footer>
    </main>
  );
}
createRoot(document.getElementById("root")).render(<App />);
```

コードリファレンス

- これを src/main.jsx として保存してください。次のコードブロックは、インポートする src/cloudscape.css です。

### cloudscape.css — サンプルページのレイアウト

ネイティブの Cloudscape コンポーネントを囲むアプリケーションの幅と余白。

```
body {
  margin: 0;
}
.cloudscape-example {
  padding: 24px;
  max-width: 1200px;
  margin: auto;
}
.appearance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.appearance > span {
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.wizard-content {
  margin-top: 32px;
}
.cloudscape-example footer {
  font-size: 12px;
  margin-top: 32px;
  color: #5f6b7a;
}
@media (max-width: 600px) {
  .cloudscape-example {
    padding: 16px;
  }
  .appearance {
    align-items: start;
  }
  .appearance > span {
    max-width: 180px;
  }
  .wizard-content {
    margin-top: 24px;
  }
}
```

コードリファレンス

- このアプリケーションのスタイルシートで、ネイティブコンポーネントのクラス名を上書きしないでください。

## AWS Cloudscape デザインシステムのエージェント設定

### 実装の出発点

表示されているネイティブのサンプルは、React 18.3.1 とともにバンドルされています。インストールする Vite のリリースがサポートする Node.js のバージョンを使用し、アプリケーションのロックファイルに記録されたバージョンを維持してください。

```
npm create vite@latest cloudscape-workspace -- --template react
cd cloudscape-workspace
npm install
npm install react@18.3.1 react-dom@18.3.1 @cloudscape-design/components@3.0.1390 @cloudscape-design/design-tokens@3.0.114 @cloudscape-design/global-styles
# Replace src/main.jsx and add src/cloudscape.css from the full examples.
npm run dev
```

### あなたのプロジェクト向けプロンプト

```
Cloudscape を使ってリソース設定のワークフローを構築します。付属のネイティブな Wizard/Container/FormField/Input/Select のコードと、ビジュアルリフレッシュのトークンロールを使用してください。ステップ間でフィールドの値を保持し、画面遷移の前に検証を行い、確認内容をすべて表示します。サンプルの容量プロファイルは、実際のクラウド製品ではなく、ドメインモデル用の仮データとして扱ってください。API が提供された後にのみプロビジョニングを統合し、処理中、失敗、確定の結果を区別してください。
```

## AWS Cloudscape デザインシステムの情報源と対象範囲

OpenDesign ガイドと、ネイティブの Cloudscape コンポーネント 3.0.1390 を使用したオリジナルのローカルワークスペース設定例。容量プロファイルは架空のアプリケーションデータです。クラウドアカウント、プロビジョニング用の API、実際のサービス料金は関係ありません。

- ウィザードコンポーネント ステップのナビゲーション、アクション、コンポーネントの API。

- 公開済みトークン JSON バージョン管理されたライト／ダークおよびコンフォート／コンパクトの値。

- デザイントークンの使い方 セマンティックな命名、インポート、カスタムコンポーネントの指針。

- コンポーネントリポジトリ ネイティブのソースコードと Apache ライセンス。

## AWS Cloudscape デザインシステムの関連リソース

### Backbase デザインシステム

BackbaseのAngularモジュール、セマンティックなテーマのエクスポート、明示的なレビュー状態を活用して、ブランドに合わせた銀行業務の審査フローを構築します。Web APIと、別途ドキュメント化されたネイティブの寸法を比較してください。

### Dell デザインシステム

DDS v3 で対象を絞り込んだデバイス検索を構築します。セマンティックカラー、レスポンシブなタイポグラフィのスケール、トークンによるスペーシングを使い、InputGroup を組み合わせます。フィルター動作はアプリケーション側で実装してください。

### Duet デザインシステム

Duet の LocalTapiola のカラーと間隔のスケールを、日付範囲のワークフローを通して確認します。ISO 形式の日付値、明示的な範囲検証、コンポーネントのフォーカスメソッド、オープンソースの日付選択コンポーネントとの明確な境界を扱います。


- [実装リファレンス](https://cloudscape.design/components/wizard/)
- [ソース](https://cdn.jsdelivr.net/npm/@cloudscape-design/design-tokens@3.0.114/index-visual-refresh.json)
- [ソース](https://cloudscape.design/components/wizard/)
- [コードリファレンス](https://cloudscape.design/components/wizard/)
- [コードリファレンス](https://cloudscape.design/foundation/visual-foundation/layout/)
- [ウィザードコンポーネント ステップのナビゲーション、アクション、コンポーネントの API。](https://cloudscape.design/components/wizard/)
- [公開済みトークン JSON バージョン管理されたライト／ダークおよびコンフォート／コンパクトの値。](https://cdn.jsdelivr.net/npm/@cloudscape-design/design-tokens@3.0.114/index-visual-refresh.json)
- [デザイントークンの使い方 セマンティックな命名、インポート、カスタムコンポーネントの指針。](https://cloudscape.design/foundation/visual-foundation/design-tokens/)
- [コンポーネントリポジトリ ネイティブのソースコードと Apache ライセンス。](https://github.com/cloudscape-design/components)