# Red Hat PatternFly デザインシステム

## Red Hat PatternFly デザインシステムのインターフェースプレビュー

サービスギャラリーを検索し、個別のサービスまたは表示中のサービスを選択して、レプリカ数を確認します。選択内容を見直し、ローカルのプランを確定してください。

## Red Hat PatternFly デザインシステムのデザインリファレンス

PatternFly React 6.6.1と@patternfly/react-tokens 6.6.1を使用しています。以下に選択したライトテーマの公開済みトークン値を示します。ダークスタイルはネイティブコンポーネントとpf-v6-theme-darkによって適用されます。サービスのサンプルデータとレイアウトはアプリケーション側で設定したものです。

### セマンティックな背景層とテキストの役割

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --pf-t--global--background--color--primary--default | rgb(255, 255, 255, 0.6000) | アクティブなテーマにおけるセマンティックな役割を使用してください。ブランドアクセントの赤は、あらゆる場面で使うプライマリーアクションの色ではありません。 |
| --pf-t--global--background--color--secondary--default | rgb(199, 199, 199, 0.3000) | アクティブなテーマにおけるセマンティックな役割を使用してください。ブランドアクセントの赤は、あらゆる場面で使うプライマリーアクションの色ではありません。 |
| --pf-t--global--text--color--regular | #151515 | アクティブなテーマにおけるセマンティックな役割を使用してください。ブランドアクセントの赤は、あらゆる場面で使うプライマリーアクションの色ではありません。 |
| --pf-t--global--text--color--subtle | #383838 | アクティブなテーマにおけるセマンティックな役割を使用してください。ブランドアクセントの赤は、あらゆる場面で使うプライマリーアクションの色ではありません。 |
| --pf-t--global--text--color--disabled | #a3a3a3 | アクティブなテーマにおけるセマンティックな役割を使用してください。ブランドアクセントの赤は、あらゆる場面で使うプライマリーアクションの色ではありません。 |
| --pf-t--global--color--brand--default | #004d99 | アクティブなテーマにおけるセマンティックな役割を使用してください。ブランドアクセントの赤は、あらゆる場面で使うプライマリーアクションの色ではありません。 |
| --pf-t--global--color--brand--hover | #003366 | アクティブなテーマにおけるセマンティックな役割を使用してください。ブランドアクセントの赤は、あらゆる場面で使うプライマリーアクションの色ではありません。 |
| --pf-t--global--color--brand--accent--default | #ee0000 | アクティブなテーマにおけるセマンティックな役割を使用してください。ブランドアクセントの赤は、あらゆる場面で使うプライマリーアクションの色ではありません。 |
| --pf-t--global--color--brand--subtle--default | #e0f0ff | アクティブなテーマにおけるセマンティックな役割を使用してください。ブランドアクセントの赤は、あらゆる場面で使うプライマリーアクションの色ではありません。 |
### ステータスの役割

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --pf-t--global--color--status--success--default | #204d00 | ステータスの意図は、必ずテキストラベルと組み合わせてください。これらのライトテーマの値は、ネイティブのLabelやAlertのバリアントを置き換えるものではありません。 |
| --pf-t--global--color--status--warning--default | #73480b | ステータスの意図は、必ずテキストラベルと組み合わせてください。これらのライトテーマの値は、ネイティブのLabelやAlertのバリアントを置き換えるものではありません。 |
| --pf-t--global--color--status--danger--default | #731f00 | ステータスの意図は、必ずテキストラベルと組み合わせてください。これらのライトテーマの値は、ネイティブのLabelやAlertのバリアントを置き換えるものではありません。 |
| --pf-t--global--color--status--info--default | #3d2785 | ステータスの意図は、必ずテキストラベルと組み合わせてください。これらのライトテーマの値は、ネイティブのLabelやAlertのバリアントを置き換えるものではありません。 |
| --pf-t--global--color--status--custom--default | #004d4d | ステータスの意図は、必ずテキストラベルと組み合わせてください。これらのライトテーマの値は、ネイティブのLabelやAlertのバリアントを置き換えるものではありません。 |
| --pf-t--global--color--status--unread--default | #0066cc | ステータスの意図は、必ずテキストラベルと組み合わせてください。これらのライトテーマの値は、ネイティブのLabelやAlertのバリアントを置き換えるものではありません。 |
### 本文と見出しの書体

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --pf-t--global--font--size--body--default | 0.875rem | タイポグラフィの役割とセマンティックな見出しレベルを意図的に使い分けてください。見た目のサイズは、文書のアウトラインを決めるものではありません。 |
| --pf-t--global--font--size--body--lg | 1rem | タイポグラフィの役割とセマンティックな見出しレベルを意図的に使い分けてください。見た目のサイズは、文書のアウトラインを決めるものではありません。 |
| --pf-t--global--font--size--heading--h1 | 1.5rem | タイポグラフィの役割とセマンティックな見出しレベルを意図的に使い分けてください。見た目のサイズは、文書のアウトラインを決めるものではありません。 |
| --pf-t--global--font--size--heading--h2 | 1.25rem | タイポグラフィの役割とセマンティックな見出しレベルを意図的に使い分けてください。見た目のサイズは、文書のアウトラインを決めるものではありません。 |
| --pf-t--global--font--size--heading--h3 | 1.125rem | タイポグラフィの役割とセマンティックな見出しレベルを意図的に使い分けてください。見た目のサイズは、文書のアウトラインを決めるものではありません。 |
| --pf-t--global--font--size--heading--h4 | 1rem | タイポグラフィの役割とセマンティックな見出しレベルを意図的に使い分けてください。見た目のサイズは、文書のアウトラインを決めるものではありません。 |
| --pf-t--global--font--size--heading--h5 | 1rem | タイポグラフィの役割とセマンティックな見出しレベルを意図的に使い分けてください。見た目のサイズは、文書のアウトラインを決めるものではありません。 |
| --pf-t--global--font--size--heading--h6 | 1rem | タイポグラフィの役割とセマンティックな見出しレベルを意図的に使い分けてください。見た目のサイズは、文書のアウトラインを決めるものではありません。 |
### スペーシングスケール

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --pf-t--global--spacer--xs | 0.25rem | グループやコントロールには、名前付きのスペーシングスケールを使用してください。remの値はユーザーのルートフォントサイズに応じて変わります。 |
| --pf-t--global--spacer--sm | 0.5rem | グループやコントロールには、名前付きのスペーシングスケールを使用してください。remの値はユーザーのルートフォントサイズに応じて変わります。 |
| --pf-t--global--spacer--md | 1rem | グループやコントロールには、名前付きのスペーシングスケールを使用してください。remの値はユーザーのルートフォントサイズに応じて変わります。 |
| --pf-t--global--spacer--lg | 1.5rem | グループやコントロールには、名前付きのスペーシングスケールを使用してください。remの値はユーザーのルートフォントサイズに応じて変わります。 |
| --pf-t--global--spacer--xl | 2rem | グループやコントロールには、名前付きのスペーシングスケールを使用してください。remの値はユーザーのルートフォントサイズに応じて変わります。 |
| --pf-t--global--spacer--2xl | 3rem | グループやコントロールには、名前付きのスペーシングスケールを使用してください。remの値はユーザーのルートフォントサイズに応じて変わります。 |
| --pf-t--global--spacer--3xl | 4rem | グループやコントロールには、名前付きのスペーシングスケールを使用してください。remの値はユーザーのルートフォントサイズに応じて変わります。 |
| --pf-t--global--spacer--4xl | 5rem | グループやコントロールには、名前付きのスペーシングスケールを使用してください。remの値はユーザーのルートフォントサイズに応じて変わります。 |
### 形状とフォーカス

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --pf-t--global--border--radius--tiny | 4px | あらゆる背景層にピル型の角丸を適用するのではなく、適切なコンポーネントの形状を使用してください。 |
| --pf-t--global--border--radius--small | 6px | あらゆる背景層にピル型の角丸を適用するのではなく、適切なコンポーネントの形状を使用してください。 |
| --pf-t--global--border--radius--medium | 16px | あらゆる背景層にピル型の角丸を適用するのではなく、適切なコンポーネントの形状を使用してください。 |
| --pf-t--global--border--radius--large | 24px | あらゆる背景層にピル型の角丸を適用するのではなく、適切なコンポーネントの形状を使用してください。 |
| --pf-t--global--border--radius--pill | 999px | あらゆる背景層にピル型の角丸を適用するのではなく、適切なコンポーネントの形状を使用してください。 |
| --pf-t--global--border--radius--control--form-element | 6px | あらゆる背景層にピル型の角丸を適用するのではなく、適切なコンポーネントの形状を使用してください。 |
| --pf-t--global--border--radius--action--default | 999px | あらゆる背景層にピル型の角丸を適用するのではなく、適切なコンポーネントの形状を使用してください。 |
## Red Hat PatternFly デザインシステム完全ガイド

実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。

詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。

## Red Hat PatternFly デザインシステムの運用レイアウト

### 運用状況を常に確認できるコレクション

> サービスギャラリーでは、オペレーターがヘルス、ロケーション、利用率を比較でき、別の範囲パネルには選択した項目が記録されます。選択内容と現在の検索結果は同じではありません。フィルターで非表示になったサービスも、明示的に削除されるまで選択されたままです。この違いは、画面に表示されている範囲を超えて影響が及ぶ一括操作では特に重要です。

### ネイティブコンポーネントの階層構造を使用する

Galleryはレスポンシブなカード列を処理し、Cardは各サービスを分け、Labelはステータスを示します。Progressはタイトルとともにサンプルの割合を表示します。任意の色付き矩形を並べてインフラストラクチャーのコンソールを模倣しているわけではありません。データモデル、コントロール、確認状態は、Reactの完全な例で実装されています。

## Red Hat PatternFly デザインシステムのセマンティックカラーとテーマの役割

### プライマリーブランドと赤のアクセントは別の役割

PatternFly v6では、ブランド、アクセント、テキスト、背景、ステータスの役割がそれぞれ別に定義されています。選択したライトテーマのスナップショットには、blue brand-defaultとred brand-accent-defaultが含まれています。目立つアクションすべてにRed Hatの赤を使うと、こうした役割の違いが失われます。ネイティブのButtonとLabelコンポーネントは、それぞれのバリアントに適したシステムの役割を使用します。

### ドキュメントでダークテーマを適用する

この例では、ドキュメント要素にpf-v6-theme-darkを切り替えて適用します。アプリケーションの背景面とテキストには--pf-t--globalセマンティック変数を使用し、テーマに応じて色が切り替わるようにします。カスタムカードにライトテーマの色を固定し、ドキュメントのテーマクラスで修正されることを期待しないでください。

## Red Hat PatternFly デザインシステムのタイポグラフィとサービスのメタデータ

### 見た目のサイズと見出しの意味を分ける

TitleのheadingLevel h1でページの見出しを定義し、sizeで視覚的な強調度を設定します。このパッケージのスナップショットでは、Body-defaultは0.875remです。カードのラベル、ステータス、数値の使用率は、すべての値を見出しにしなくても読みやすく保てます。メタデータには定義リストを使い、レプリカ数とサービスIDを明示します。

### 意味が曖昧な運用ラベルを避ける

使用率は、コンポーネントとフッターの両方でサンプルデータと明記します。説明のないプログレスバーは、デプロイ作業や読み込み中の状態と誤解されるおそれがあります。キャプションでパーセンテージの意味を説明し、ステータスLabelではHealthyまたはReviewの容量を別途示します。

## Red Hat PatternFly デザインシステムのギャラリーと一括選択

### チェックボックスの3つの状態を使う

Select visibleは、表示中のサービスがすべて選択されているときはtrue、1つも選択されていないときはfalse、一部のみ選択されているときはnullになります。PatternFly Checkboxは、中間状態を示すnull値に対応しています。アプリケーションでは絞り込み後のコレクションからこの状態を計算します。行ごとの選択と食い違う可能性がある別個の真偽値は使用しません。

1. サービスを1つ選択して、一部選択の状態を確認します。

2. 現在表示されているサービスをすべて選択します。

3. 名前を1つ検索し、非表示になった選択項目が保持されていることを確認します。

4. 正確な選択項目とレプリカの合計数を確認します。

5. ローカルプランを確認し、結果を読みます。

### 選択項目の集合を信頼できる唯一の情報源にする

各サービスには固定のIDがあります。個別のチェックボックスとSelect visibleは、同じID集合を更新します。スコープパネルは、その集合からサービス名とレプリカの合計数を導出します。検索で変わるのは表示状態のみです。これにより、オペレーターが複数のサービスを選択した後にギャラリーを絞り込んでも、確認用の概要に一貫性が保たれます。

## Red Hat PatternFly デザインシステムのスペーシングとレスポンシブカード

### ページの基本レイアウトにセマンティックトークンを使う

この例では、背景、通常のテキスト、控えめなメタデータに、公開済みトークンパッケージのセマンティックなCSSプロパティを使用します。標準のスペーシングスケールはxsから4xlまであります。一方、このアプリケーションではコレクションとスコープパネルの間隔に24pxを使用しています。この明示的なレイアウト値は、トークン参照とは別のものです。

### コンテンツを縮小する前にギャラリーを折り返す

Galleryには、最小アイテム幅230pxと間隔を設定します。アプリケーションのブレークポイント850pxでは、スコープパネルをコレクションの下に移動します。500pxでは、ページのパディングを16pxにし、検索欄をツールバーの全幅に広げます。これらはこの例のレイアウト上の選択であり、すべてのPatternFly製品が同じブレークポイントを使うという意味ではありません。

## Red Hat PatternFly デザインシステムの確認と選択状態

### 選択操作で処理を実行しない

サービスにチェックを入れると、スコープに追加されるだけです。「選択内容を確認」を選ぶと情報Alertと確認操作が表示されます。「ローカルプランを確定」を選んでも、選択したサービス数とレプリカ数を報告するだけで、メンテナンスジョブは開始されません。選択内容が変わったら確認状態を閉じ、古い選択内容が気づかないまま確定されるのを防ぎます。

### 検索の復帰操作と選択を分ける

検索結果がない場合は、「検索をクリア」操作付きのインライン情報Alertを表示します。これによりクリアされるのは検索クエリのみで、選択済みのサービスは保持されます。そのため、ツールバーの選択件数とスコープパネルの内容に一貫性が保たれます。検索結果がないことを理由に選択もリセットすると、気づきにくい破壊的な動作になります。

## Red Hat PatternFly デザインシステムのアクセシブルなコントロールとステータス

### 選択項目にラベルを付け、ネイティブコントロールを使う

各Checkboxには固定のidと、サービス名を示す可視ラベルがあります。SearchInputにはアクセシブルな名前があり、Switchでは外観設定の名称を示します。「選択内容を確認」は、選択項目がないときは無効になります。ネイティブのProgressは値とタイトルを伝えます。カード内に隠された、ホバー時にしか使えない操作には依存しません。

### 状態を言葉でも示す

選択件数には丁寧な通知を行うライブリージョンを使い、サービスのステータスはLabel内に記述し、最終Alertでは何が起きたかを説明します。選択範囲やサービスの状態を色だけで示さないでください。キーボードでのテストでは、一部選択、選択済みサービスをフィルターで非表示にする操作、全コレクションへの復帰を確認してください。

- チェックボックスの選択状態は、対象に含めるかどうかを示すものであり、成功状態ではありません。

- ステータスLabelはサービスの状態を示すものであり、選択状態を示すものではありません。

- Progressはサンプルの使用率を示すものであり、操作の完了を示すものではありません。

## Red Hat PatternFly デザインシステムのReact連携

### リセットスタイルとコンポーネントスタイルは一度だけインポートする

この例では、エントリーポイントで@patternfly/react-core/dist/styles/base.cssをインポートします。ネイティブのReactコンポーネントのスタイルは、パッケージから適用されます。アプリケーションのCSSスタイルはpf-exampleのスコープ内に限定し、現在の--pf-t--global名前空間を参照します。コンポーネントの内部スタイルは上書きしません。

### 実際のスケジューリングはサービス契約の背後にのみ追加する

ローカルプランは意図的にプレビューとして実装しています。本番環境で実装するには、認可、メンテナンス時間枠、影響を受ける依存関係、処理中のフィードバック、サーバー側の検証が必要です。リクエスト中も選択したIDを維持し、確定した結果を実際のサービス応答と照合してください。ネイティブの表示用コンポーネントに運用バックエンドは含まれていません。

## Red Hat PatternFly デザインシステムのコンポーネント例

### main.jsx — サービスギャラリーと一括確認

Gallery/Card/Checkbox/Progressを使った完全なネイティブ構成です。選択範囲を導出して表示し、ローカルで確定できます。

```
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import {
  Alert,
  Button,
  Card,
  CardBody,
  CardTitle,
  Checkbox,
  Gallery,
  GalleryItem,
  Label,
  Progress,
  SearchInput,
  Switch,
  Title,
} from "@patternfly/react-core";
import "@patternfly/react-core/dist/styles/base.css";
import "./patternfly.css";
const services = [
  {
    id: "api",
    name: "Public API",
    region: "eu-west",
    replicas: 6,
    load: 62,
    status: "Healthy",
  },
  {
    id: "jobs",
    name: "Background jobs",
    region: "eu-west",
    replicas: 3,
    load: 81,
    status: "Review capacity",
  },
  {
    id: "search",
    name: "Search index",
    region: "us-east",
    replicas: 4,
    load: 44,
    status: "Healthy",
  },
  {
    id: "events",
    name: "Event stream",
    region: "us-east",
    replicas: 8,
    load: 72,
    status: "Healthy",
  },
];
function App() {
  const [query, setQuery] = useState(""),
    [selected, setSelected] = useState([]),
    [review, setReview] = useState(false),
    [notice, setNotice] = useState(""),
    [dark, setDark] = useState(false);
  const visible = services.filter((x) =>
    x.name.toLowerCase().includes(query.toLowerCase()),
  );
  const picked = services.filter((x) => selected.includes(x.id));
  const allVisible =
    visible.length > 0 && visible.every((x) => selected.includes(x.id));
  const someVisible = visible.some((x) => selected.includes(x.id));
  function choose(id, checked) {
    setSelected((v) =>
      checked ? [...new Set([...v, id])] : v.filter((x) => x !== id),
    );
    setReview(false);
  }
  function selectVisible(checked) {
    setSelected((v) =>
      checked
        ? [...new Set([...v, ...visible.map((x) => x.id)])]
        : v.filter((id) => !visible.some((x) => x.id === id)),
    );
    setReview(false);
  }
  return (
    <main className="pf-example">
      <header>
        <div>
          <span className="overline">PATTERNFLY · SERVICE OPERATIONS</span>
          <Title headingLevel="h1" size="2xl">
            Plan a maintenance review
          </Title>
          <p>
            Select services and inspect the combined scope before creating a
            local plan.
          </p>
        </div>
        <Switch
          id="dark-theme"
          label="Dark theme"
          isChecked={dark}
          onChange={(_, checked) => {
            setDark(checked);
            document.documentElement.classList.toggle(
              "pf-v6-theme-dark",
              checked,
            );
          }}
        />
      </header>
      <div className="service-toolbar">
        <SearchInput
          aria-label="Find a service"
          placeholder="Find a service"
          value={query}
          onChange={(_, value) => setQuery(value)}
          onClear={() => setQuery("")}
        />
        <Checkbox
          id="select-visible"
          label="Select visible"
          isChecked={allVisible ? true : someVisible ? null : false}
          isDisabled={!visible.length}
          onChange={(_, checked) => selectVisible(checked)}
        />
        <span aria-live="polite">{selected.length} selected</span>
        <Button isDisabled={!selected.length} onClick={() => setReview(true)}>
          Review selection
        </Button>
      </div>
      <div className="service-layout">
        <Gallery hasGutter minWidths={{ default: "230px" }}>
          {visible.map((s) => (
            <GalleryItem key={s.id}>
              <Card>
                <CardTitle>
                  <Checkbox
                    id={"select-" + s.id}
                    label={s.name}
                    isChecked={selected.includes(s.id)}
                    onChange={(_, checked) => choose(s.id, checked)}
                  />
                </CardTitle>
                <CardBody>
                  <div className="service-meta">
                    <Label color={s.status === "Healthy" ? "green" : "orange"}>
                      {s.status}
                    </Label>
                    <span>{s.region}</span>
                  </div>
                  <Progress
                    value={s.load}
                    title="Sample utilization"
                    measureLocation="outside"
                  />
                  <dl>
                    <dt>Replicas</dt>
                    <dd>{s.replicas}</dd>
                    <dt>Service ID</dt>
                    <dd>
                      <code>{s.id}</code>
                    </dd>
                  </dl>
                </CardBody>
              </Card>
            </GalleryItem>
          ))}
        </Gallery>
        <aside>
          <Card>
            <CardTitle>Maintenance scope</CardTitle>
            <CardBody>
              <p>
                {picked.length} services ·{" "}
                {picked.reduce((n, s) => n + s.replicas, 0)} replicas
              </p>
              {picked.length ? (
                <ul>
                  {picked.map((s) => (
                    <li key={s.id}>
                      {s.name}
                      <span>{s.region}</span>
                    </li>
                  ))}
                </ul>
              ) : (
                <p className="muted">Select a service to inspect its scope.</p>
              )}
              {review && (
                <div className="review">
                  <Alert
                    isInline
                    variant="info"
                    title="Review the selected services"
                  >
                    This is a fictional plan. No workload will be restarted.
                  </Alert>
                  <Button
                    onClick={() => {
                      setNotice(
                        `Local plan includes ${picked.length} services and ${picked.reduce((n, s) => n + s.replicas, 0)} replicas. No operation was scheduled.`,
                      );
                      setReview(false);
                    }}
                  >
                    Confirm local plan
                  </Button>
                </div>
              )}
            </CardBody>
          </Card>
        </aside>
      </div>
      {!visible.length && (
        <Alert isInline variant="info" title="No services match">
          <Button variant="link" onClick={() => setQuery("")}>
            Clear search
          </Button>
        </Alert>
      )}
      {notice && (
        <Alert isInline variant="success" title="Local plan recorded">
          {notice}
        </Alert>
      )}
      <footer>
        Native PatternFly 6.6.1 · service data and capacity figures are
        fictional, memory-only examples.
      </footer>
    </main>
  );
}
createRoot(document.getElementById("root")).render(<App />);
```

コードリファレンス

- src/main.jsxとして保存します。CheckboxのonChangeにはイベントとcheckedの値が渡されます。選択項目が一部の場合、isCheckedはnullになります。

### patternfly.css — レスポンシブな運用画面の基本レイアウト

カスタムのページレイアウトではセマンティックなv6トークンを使用し、ネイティブコンポーネントのスタイルを維持します。

```
body {
  margin: 0;
}
.pf-example {
  padding: 24px;
  background: var(--pf-t--global--background--color--secondary--default);
  color: var(--pf-t--global--text--color--regular);
  font-family: var(--pf-t--global--font--family--body);
}
.pf-example header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}
.overline {
  font-size: 11px;
  letter-spacing: 0.07em;
  color: var(--pf-t--global--text--color--subtle);
}
.pf-example header h1 {
  margin: 8px 0;
}
.service-toolbar {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.service-toolbar > .pf-v6-c-search-input {
  width: 280px;
}
.service-toolbar > span {
  margin-left: auto;
}
.service-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 24px;
  align-items: start;
}
.service-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  margin-bottom: 24px;
}
.service-layout dl {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  font-size: 12px;
}
.service-layout dd {
  margin: 0;
}
.service-layout ul {
  padding: 0;
  list-style: none;
  margin: 16px 0;
}
.service-layout li {
  padding: 12px 0;
  border-bottom: 1px solid var(--pf-t--global--border--color--default);
}
.service-layout li span {
  display: block;
  font-size: 12px;
  color: var(--pf-t--global--text--color--subtle);
}
.muted {
  color: var(--pf-t--global--text--color--subtle);
  margin-top: 16px;
}
.review > .pf-v6-c-button {
  margin-top: 16px;
}
.pf-example > .pf-v6-c-alert {
  margin-top: 24px;
}
.pf-example footer {
  font-size: 12px;
  color: var(--pf-t--global--text--color--subtle);
  margin-top: 24px;
}
@media (max-width: 850px) {
  .service-layout {
    grid-template-columns: 1fr;
  }
  .pf-example header {
    align-items: start;
  }
  .service-toolbar > span {
    margin-left: 0;
  }
}
@media (max-width: 500px) {
  .pf-example {
    padding: 16px;
  }
  .pf-example header {
    flex-direction: column;
  }
  .service-toolbar {
    gap: 16px;
  }
  .service-toolbar > .pf-v6-c-search-input {
    width: 100%;
  }
}
```

コードリファレンス

- src/patternfly.cssとして保存します。この例では、アプリケーションのブレークポイントを明示的に定義しています。

## Red Hat PatternFly デザインシステム AI エージェントのセットアップ

### 実装の出発点

ネイティブのReact 18.3.1 / PatternFly 6.6.1 を使用した構成です。Vite の実行には、サポート対象の Node.js バージョンが必要です。実際のサービスデータと運用APIは、アプリケーション側の責任範囲です。

```
npm create vite@latest patternfly-services -- --template react
cd patternfly-services
npm install
npm install react@18.3.1 react-dom@18.3.1 @patternfly/react-core@6.6.1
# Replace src/main.jsx and add src/patternfly.css using the complete examples.
npm run dev
```

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

```
PatternFly 6.6.1 のネイティブな Gallery、Card、Checkbox、Progress、Label、Alert を使って、運用対象の一覧を作成します。提供されたセマンティックトークンと完全なサンプルを使用してください。フィルター後の表示対象と選択済み ID を分けて管理し、一括選択が一部のみの場合の状態を算出したうえで、影響を受ける対象を正確に確認するようにします。実際のAPIを追加する場合は、保留・失敗・成功の状態を正確に伝えてください。モバイルでのレイアウト変更とキーボード操作も維持します。
```

## Red Hat PatternFly デザインシステムのソースと適用範囲

OpenDesignが作成したアプリケーションガイドと、架空のメンテナンス計画サンプルです。ネイティブの PatternFly React 6.6.1 で動作します。稼働率、リージョン、レプリカ数はサンプルデータです。確認操作で更新されるのはローカルの状態のみで、サービスの再起動やスケジュール設定は行われません。

- PatternFly で開発する ネイティブのパッケージとスタイルシートの連携。

- 公開トークンモジュール バージョン管理されたトークン名と、解決済みのライトテーマの値。

- 一括選択のパターン 選択範囲と一覧の動作。

- PatternFly React リポジトリ ネイティブコンポーネントの実装とライセンス。

## Red Hat PatternFly デザインシステムの関連リソース

### REI Cedar

検証済みのトークン値を使ったCedarの配送方法選択UIを作成してください。Vueのタイルで構成し、キーボードでの完全な操作と、レスポンシブな商品レイアウトを実現します。

### Sainsbury's デザインシステム

Sainsbury’sの公開デザインガイドラインを、注文枠選択の一連の操作に適用します。実際の配色とサイズの参照、アクセシブルなラジオボタンの選択肢、更新されるサマリー、ページ内で完結する操作の適切なフィードバックを紹介します。

### Salesforce Lightning

詳細なレコードを扱うための Lightning ブループリントガイドです。実際の余白、タイポグラフィ、セマンティックカラー、編集可能なケースワークスペース、フィールド検証、ローカルの変更を反映するアクティビティ履歴を紹介します。


- [実装リファレンス](https://www.patternfly.org/patterns/bulk-selection/)
- [ソース](https://cdn.jsdelivr.net/npm/@patternfly/react-tokens@6.6.1/dist/esm/)
- [コードリファレンス](https://www.patternfly.org/components/checkbox/)
- [コードリファレンス](https://www.patternfly.org/foundations-and-styles/design-tokens/develop/)
- [PatternFly で開発する ネイティブのパッケージとスタイルシートの連携。](https://www.patternfly.org/get-started/develop/)
- [公開トークンモジュール バージョン管理されたトークン名と、解決済みのライトテーマの値。](https://cdn.jsdelivr.net/npm/@patternfly/react-tokens@6.6.1/dist/esm/)
- [一括選択のパターン 選択範囲と一覧の動作。](https://www.patternfly.org/patterns/bulk-selection/)
- [PatternFly React リポジトリ ネイティブコンポーネントの実装とライセンス。](https://github.com/patternfly/patternfly-react)