# Palantir Blueprint デザインシステム

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

名前または種類で絞り込み、データセットを選択し、行の密度や外観を切り替え、レビュー用ノートを検証してからローカルの状態を更新できます。

## Palantir Blueprint デザインシステムのデザインリファレンス

Blueprint コア 6.21.0 は CSS で公開された、ネイティブの React コンポーネントを提供します。ここに示すのはライトテーマで選択したトークン値です。手動で反転せず、ライブラリのダークテーマを使用してください。アプリケーションのレイアウトに関する選択は、例の CSS に記載しています。

### 意図を示す色とインタラクションの状態

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --bp-intent-primary-rest | #2d72d2 | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-intent-primary-hover | #215db0 | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-intent-primary-active | #184a90 | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-intent-primary-disabled | #4c90f0 | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-intent-primary-foreground | #ffffff | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-intent-success-rest | #238551 | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-intent-success-hover | #1c6e42 | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-intent-success-active | #165a36 | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-intent-success-disabled | #32a467 | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-intent-success-foreground | #ffffff | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-intent-warning-rest | #c87619 | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-intent-warning-hover | #935610 | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-intent-warning-active | #77450d | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-intent-warning-disabled | #ec9a3c | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-intent-warning-foreground | #111418 | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-intent-danger-rest | #cd4246 | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-intent-danger-hover | #ac2f33 | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-intent-danger-active | #8e292c | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-intent-danger-disabled | #e76a6e | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-intent-danger-foreground | #ffffff | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
### タイポグラフィのスケールとウェイト

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --bp-typography-size-body-x-small | 10px | 本文、ラベル、補足データのスケールです。小さなメタデータを主な読み取りサイズにしないでください。 |
| --bp-typography-size-body-small | 12px | 本文、ラベル、補足データのスケールです。小さなメタデータを主な読み取りサイズにしないでください。 |
| --bp-typography-size-body-medium | 14px | 本文、ラベル、補足データのスケールです。小さなメタデータを主な読み取りサイズにしないでください。 |
| --bp-typography-size-body-large | 16px | 本文、ラベル、補足データのスケールです。小さなメタデータを主な読み取りサイズにしないでください。 |
| --bp-typography-size-heading-small | 16px | 名前付きの階層に合わせてロールを適用します。表内の数値には、タブラー数字を追加で使用できます。 |
| --bp-typography-size-heading-medium | 20px | 名前付きの階層に合わせてロールを適用します。表内の数値には、タブラー数字を追加で使用できます。 |
| --bp-typography-size-heading-large | 24px | 名前付きの階層に合わせてロールを適用します。表内の数値には、タブラー数字を追加で使用できます。 |
| --bp-typography-size-heading-x-large | 28px | 名前付きの階層に合わせてロールを適用します。表内の数値には、タブラー数字を追加で使用できます。 |
| --bp-typography-size-heading-display | 46px | 名前付きの階層に合わせてロールを適用します。表内の数値には、タブラー数字を追加で使用できます。 |
| --bp-typography-size-code-small | 12px | 名前付きの階層に合わせてロールを適用します。表内の数値には、タブラー数字を追加で使用できます。 |
| --bp-typography-size-code-medium | 13px | 名前付きの階層に合わせてロールを適用します。表内の数値には、タブラー数字を追加で使用できます。 |
| --bp-typography-size-code-large | 14px | 名前付きの階層に合わせてロールを適用します。表内の数値には、タブラー数字を追加で使用できます。 |
| --bp-typography-weight-default | 400 | 名前付きの階層に合わせてロールを適用します。表内の数値には、タブラー数字を追加で使用できます。 |
| --bp-typography-weight-bold | 600 | 名前付きの階層に合わせてロールを適用します。表内の数値には、タブラー数字を追加で使用できます。 |
| --bp-typography-line-height-default | 1.28581 | 名前付きの階層に合わせてロールを適用します。表内の数値には、タブラー数字を追加で使用できます。 |
| --bp-typography-line-height-large | 1.5 | 名前付きの階層に合わせてロールを適用します。表内の数値には、タブラー数字を追加で使用できます。 |
### 背景レイヤー、境界線、セマンティックテキスト

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --bp-surface-border-color-default | #5f6b7c1f | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-surface-border-color-strong | #5f6b7c40 | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-surface-border-width | 1px | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-surface-border-radius | 4px | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-surface-spacing | 4px | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-surface-background-color-default-rest | #ffffff | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-surface-background-color-default-hover | #f6f7f9 | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-typography-color-default-rest | #1c2127 | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-typography-color-muted | #5f6b7c | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
### フォーカスとモーション

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --bp-emphasis-transition-duration | 100ms | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-emphasis-ease-default | cubic-bezier(0.4, 1, 0.75, 0.9) | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-emphasis-ease-bounce | cubic-bezier(0.54, 1.12, 0.38, 1.11) | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-emphasis-focus-color | #2d72d2 | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-emphasis-focus-width | 2px | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-emphasis-focus-offset | 2px | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
| --bp-emphasis-motion-reduced | 0 | 名前付きのセマンティックロールを使用し、状態と前景色の組み合わせを保ってください。 |
### データセットの作業画面で使用するネイティブコンポーネント

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| HTMLTable | striped · interactive · condensed | ネイティブのセマンティックテーブルです。condensed プロパティで、データを変更せずに密度を調整します。 |
| InputGroup | value · onChange · intent | 制御された検索とレビュー用ノートです。アプリケーション側の検証で danger の意図を設定します。 |
| FormGroup | labelFor · helperText · intent | 表示フィールドラベルを紐付け、無効なノートの理由を説明してください。 |
| HTMLSelect | options · value · onChange | 種類が少数かつ固定されたデータセットには、ネイティブのセレクトを使用します。 |
| Tag | minimal · intent | ステータステキストには、success または warning のスタイルを組み合わせてください。 |
| Button | intent="primary" · type="submit" | 実際のフォームからローカルのレビューを確定します。選択ボタンには、二次的なスタイルを適用します。 |
| Switch | checked · onChange | 外観と密度を個別に調整するコントロール。 |
| Callout | intent · title | 結果がないことや処理結果を説明し、色だけで状態を伝えないでください。 |
## Palantir Blueprint デザインシステム完全ガイド

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

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

## データを中心に構成した Palantir Blueprint デザインシステムの作業画面

### 明確な読み取り順序を備えた高密度なコントロール

> Blueprint は、一覧、フィルター、ステータス、状況に応じたアクションを組み合わせる画面に適しています。この例では、左側にデータセットのテーブル、右側に選択したレコードを配置しています。レコードごとに新しいページを開かなくても、比較できます。編集可能なレビュー用ノートはインスペクターに表示し、テーブルは一覧性を保ちます。

### v6 のパッケージ仕様を使用する

この例は @blueprintjs/core 6.21.0 でコンパイルされています。CSS 名前空間は bp6 で、公開されているセマンティックトークンは --bp- で始まります。古い bp5 のスタイルシートは、v6 コンポーネントの CSS の代わりにはなりません。パッケージのスタイルシートはアプリケーションのエントリーポイントで一度だけインポートし、アプリケーションのレイアウトルールは別のクラスにスコープします。

## Palantir Blueprint デザインシステムの意図と色の役割

### レコードのステータスと選択状態を分ける

warning の Tag はデータセットに確認が必要であることを示し、プライマリカラーで色付けされた行は選択中であることを示します。この2つの意味は独立しています。行を確認済みにするとラベルと intent は success に変わりますが、同じデータセットが選択されたままです。テーブルには各ステータスを示すテキストもあり、色だけに意味を担わせていません。

### ダークモードはコンポーネント境界で適用する

このサンプルではラッパーに bp6-dark を追加し、ネイティブコンポーネントがダークモード用のスタイルを適用できるようにしています。上記のライトテーマの値は参考用のスナップショットであり、すべてのコンポーネントを上書きする指示ではありません。Dialog などのポータルを導入する場合は、描画されたコンテンツにも同じテーマコンテキストが適用されるようにしてください。ポータルを内包しないラッパーでは不十分です。

## Palantir Blueprint レコードとメタデータのためのデザインシステムのタイポグラフィ

### 見出しを選ぶ前に本文の文字サイズを確認する

公開されている本文の文字サイズには 10、12、14、16px があり、標準の本文サイズは 14px です。データセット名には本文と同じ主要な文字サイズを使います。ID とレコード種別には補足テキストを使い、数値のレコード件数には表形式数字を使うことで、値が変わっても比較しやすくしています。主要なコンテンツに 10px を使うことは推奨していません。

### インスペクターに簡潔な階層を設ける

インスペクターでは 20px の見出しと定義リストを使い、ID、担当者、種別、件数を表示します。ラベルと値は、安定した2列の配置で揃えます。確認メモはこれらの情報の後に区切り線を挟んで配置し、アクションをテーブルフィルターと誤認しないようにします。

## Palantir Blueprint デザインシステムのテーブル、フィルター、インスペクター

### テーブルのセマンティクスを保つ

HTMLTable は Blueprint のスタイルを適用したネイティブなテーブルを提供します。最初のセル内のボタンでレコードを選択でき、キーボードでも操作できます。この例では、ポインター操作専用の行ハンドラーだけを選択手段にしていません。interactive prop は行のホバー時のスタイルを適用し、condensed はフィルタリングとは独立して表示密度を切り替えます。

### 制御されたデータフローを明確にする

検索と種別セレクターは、同じローカルの行データから表示対象のコレクションを絞り込みます。フィルターによって行が非表示になっても、選択中のレコードはインスペクターに残ります。これにより、コレクションのフィルターを変更しただけで入力済みの確認メモが消えるのを防げます。本番ソフトウェアでは、編集内容を黙って破棄するのではなく、この関係を決めて明記してください。

1. 表示名でデータセットを検索します。

2. 種別セレクターで同じコレクションを絞り込みます。

3. 名前のボタンを選択してインスペクターに読み込みます。

4. 確認メモを入力し、ローカルで確認を送信します。

## Palantir Blueprint デザインシステムの間隔、サーフェス、表示密度

### 単位を小さくしても、すべての間隔を狭くしない

公開されているサーフェス間隔のトークンは 4px です。このワークベンチでは、アプリケーション側でその倍数を使っています。フィルターコントロール間は 12px、コレクションとインスペクターの間は 20px、デスクトップ用サンプルの周囲は 24px です。これらは CSS に示すレイアウト上の設計判断です。4px の角丸トークンにより、コントロールとサーフェスの形状を控えめにしています。

### ラベルを削る前にレイアウトを変える

この例では、アプリケーション独自のブレークポイントである 800px で、インスペクターをコレクションの下に移動します。フィルターは折り返し、メインのパディングは 16px になり、必要に応じてテーブル専用の横スクロール領域が使われます。このブレークポイントはこのワークベンチ固有のものであり、Blueprint 全体に適用される公式のブレークポイントとして示しているわけではありません。

## Palantir Blueprint デザインシステムの確認と空の状態

### バリデーションは確認操作に含める

空のメモを送信すると、InputGroup と FormGroup の intent が danger に設定され、説明用の補助テキストが表示され、フィールドにフォーカスが移ります。テキストを入力するとエラーは解除されます。有効な内容を送信すると、選択中のローカルレコードだけが変更され、メモがクリアされます。また、データは送信されていないことを明記した成功 Callout が表示されます。

### 空のコレクションの近くに復帰手段を設ける

該当する結果がない場合の Callout には「フィルターをクリア」が表示されます。これを選択すると、検索クエリと種別セレクターの両方がリセットされ、コレクション全体が再表示されます。行の削除やインスペクターの変更は行いません。以下の状態の境界は意図的に設けています。

- 選択を変えると、確認対象のレコードが変わります。確認ステータスは変わりません。

- コンパクトモードで変わるのは表示密度であり、レコードの順序ではありません。

- テーマを変えると見た目が変わります。現在のフィルターは変わりません。

- ローカルでの確認に成功すると、1件のレコードが変更され、結果が通知されます。

## Palantir Blueprint デザインシステムのフォーカスとアクセシブルなコンポーネントの使い方

### 各ネイティブコントロールにラベルを付ける

InputGroup には検索用のアクセシブルな名前を設定し、ラベル付きの確認フィールドには id を設定します。HTMLSelect には名前を付け、Switch には見えるラベルを表示します。また、各レコードは実際のボタンから開けるようにします。コントロールをスタイル付きの div に置き換えるのではなく、ライブラリの API を使ってください。

### フォーカス表示を見える状態に保つ

パッケージのリファレンスでは、フォーカスの幅とオフセットがそれぞれ 2px とされています。Card や選択中の行の上でも、フォーカス表示が見えるようにしてください。キーボード利用者が、文書の順序に沿ってフィルター、行のボタン、確認フォームに移動できる必要があります。この例では、ステータスの段落と成功 Callout で結果を伝え、別の画面へ移動させません。

## Palantir Blueprint デザインシステムのインストールとアプリケーションの境界

### サンプルと同じソースを実行する

完全な App のソースとアプリケーション CSS を以下に示します。App は、Vite の React テンプレートが生成するルート要素にマウントされます。バージョンを固定した core パッケージをインストールすると、ネイティブコンポーネントとパッケージ CSS が利用できます。テキストベースのサンプルに、非公開のデザインアセットは必要ありません。

### 実際の永続化契約を用いて確認機能を拡張する

本番環境でのレビューには、レコード識別子、権限、処理中の状態、エラーレスポンスが必要です。BlueprintのFormGroupとintent APIを活用しながら、これらの処理はアプリケーション側に実装してください。サービスが保存を受け付ける前に、保存成功を通知してはいけません。このローカルのサンプルでは、意図的にそのような表示をしていません。

## Palantir Blueprint デザインシステム コンポーネントの使用例

### main.jsx — データセットレビューアプリケーションの全コード

フィルタリング、選択、密度、テーマ、フィールド検証、ローカルなレビュー結果を備えた、ネイティブなコンポーネント構成の全体例です。

```
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import {
  Button,
  Card,
  Callout,
  FormGroup,
  HTMLSelect,
  HTMLTable,
  InputGroup,
  Switch,
  Tag,
} from "@blueprintjs/core";
import "@blueprintjs/core/lib/css/blueprint.css";
import "./blueprint.css";
const initial = [
  {
    id: "D-1042",
    name: "Harbor sensors",
    type: "Telemetry",
    rows: "18,420",
    owner: "Maya",
    status: "Reviewed",
  },
  {
    id: "D-1043",
    name: "Transit stops",
    type: "Reference",
    rows: "842",
    owner: "Alex",
    status: "Needs review",
  },
  {
    id: "D-1044",
    name: "Water samples",
    type: "Field survey",
    rows: "2,608",
    owner: "Sam",
    status: "Reviewed",
  },
  {
    id: "D-1045",
    name: "Street survey",
    type: "Field survey",
    rows: "4,120",
    owner: "Lee",
    status: "Needs review",
  },
];
function App() {
  const [dark, setDark] = useState(false),
    [compact, setCompact] = useState(false),
    [query, setQuery] = useState(""),
    [rows, setRows] = useState(initial),
    [selected, setSelected] = useState(initial[1]),
    [note, setNote] = useState(""),
    [notice, setNotice] = useState(""),
    [error, setError] = useState(false),
    [type, setType] = useState("All");
  const visible = rows.filter(
    (r) =>
      r.name.toLowerCase().includes(query.toLowerCase()) &&
      (type === "All" || r.type === type),
  );
  function review(e) {
    e.preventDefault();
    if (!note.trim()) {
      setError(true);
      document.getElementById("review-note").focus();
      return;
    }
    const updated = { ...selected, status: "Reviewed" };
    setRows(rows.map((r) => (r.id === selected.id ? updated : r)));
    setSelected(updated);
    setNotice(
      `${selected.name} marked reviewed in this local example. No data was sent.`,
    );
    setNote("");
    setError(false);
  }
  return (
    <main className={"specimen " + (dark ? "bp6-dark" : "")}>
      <header>
        <div>
          <span className="eyebrow">BLUEPRINT · DATA WORKSPACE</span>
          <h1 className="bp6-heading">Dataset review</h1>
          <p className="bp6-text-muted">
            Inspect a record and attach a review note.
          </p>
        </div>
        <Switch
          label="Dark theme"
          checked={dark}
          onChange={(e) => setDark(e.target.checked)}
        />
      </header>
      <div className="workbench">
        <Card className="collection">
          <div className="toolbar">
            <InputGroup
              aria-label="Find a dataset"
              placeholder="Find a dataset…"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
            />
            <HTMLSelect
              aria-label="Dataset type"
              value={type}
              onChange={(e) => setType(e.target.value)}
              options={["All", "Telemetry", "Reference", "Field survey"]}
            />
            <Switch
              label="Compact rows"
              checked={compact}
              onChange={(e) => setCompact(e.target.checked)}
            />
          </div>
          <p className="bp6-text-small bp6-text-muted" role="status">
            {visible.length} matching datasets
          </p>
          <div className="table-scroll">
            <HTMLTable
              striped
              interactive
              condensed={compact}
              style={{ width: "100%" }}
            >
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Records</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                {visible.map((r) => (
                  <tr
                    key={r.id}
                    className={selected.id === r.id ? "selected" : ""}
                  >
                    <td>
                      <Button
                        variant="minimal"
                        onClick={() => {
                          setSelected(r);
                          setError(false);
                          setNote("");
                        }}
                        text={r.name}
                      />
                      <div className="bp6-text-small bp6-text-muted">
                        {r.id} · {r.type}
                      </div>
                    </td>
                    <td className="numeric">{r.rows}</td>
                    <td>
                      <Tag
                        minimal
                        intent={r.status === "Reviewed" ? "success" : "warning"}
                      >
                        {r.status}
                      </Tag>
                    </td>
                  </tr>
                ))}
              </tbody>
            </HTMLTable>
          </div>
          {!visible.length && (
            <Callout title="No matching datasets">
              Clear the search or choose a different dataset type.
              <Button
                variant="minimal"
                onClick={() => {
                  setQuery("");
                  setType("All");
                }}
              >
                Clear filters
              </Button>
            </Callout>
          )}
        </Card>
        <Card className="inspector">
          <span className="eyebrow">SELECTED DATASET</span>
          <h2 className="bp6-heading">{selected.name}</h2>
          <dl>
            <dt>Dataset ID</dt>
            <dd>
              <code>{selected.id}</code>
            </dd>
            <dt>Owner</dt>
            <dd>{selected.owner}</dd>
            <dt>Type</dt>
            <dd>{selected.type}</dd>
            <dt>Records</dt>
            <dd>{selected.rows}</dd>
          </dl>
          <form onSubmit={review}>
            <FormGroup
              label="Review note"
              labelFor="review-note"
              intent={error ? "danger" : "none"}
              helperText={
                error
                  ? "Add a note describing what you checked."
                  : "A short note keeps the decision understandable."
              }
            >
              <InputGroup
                id="review-note"
                value={note}
                intent={error ? "danger" : "none"}
                aria-invalid={error}
                onChange={(e) => {
                  setNote(e.target.value);
                  setError(false);
                }}
              />
            </FormGroup>
            <Button intent="primary" type="submit" fill>
              Mark reviewed locally
            </Button>
          </form>
          <p className="bp6-text-small bp6-text-muted">
            Selection, filters and review notes exist only in this preview.
          </p>
        </Card>
      </div>
      {notice && (
        <Callout intent="success" role="status">
          {notice}
        </Callout>
      )}
      <footer>
        Native Blueprint 6.21.0 · HTMLTable, Card, FormGroup, InputGroup,
        Switch, Tag and Callout.
      </footer>
    </main>
  );
}
createRoot(document.getElementById("root")).render(<App />);
```

コードリファレンス

- こちらをsrc/main.jsx、次の例をsrc/blueprint.cssとして保存してください。

- createRootの呼び出しでは、ViteのReact index.htmlにあるルート要素を使用します。

### blueprint.css — レスポンシブな作業画面のレイアウト

アプリケーションのレイアウトルールは、インポートしたネイティブなCSSを補完します。800pxのブレークポイントと260pxのインスペクターは、この例で明示的に設定した値です。

```
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.specimen {
  padding: 24px;
  background: #f6f7f9;
  color: #1c2127;
  font-size: 14px;
}
.specimen.bp6-dark {
  background: #252a31;
  color: #f6f7f9;
}
.specimen header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 24px;
}
.eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--bp-typography-color-muted);
}
h1.bp6-heading {
  margin: 8px 0;
  font-size: 28px;
}
.workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 20px;
}
.collection,
.inspector {
  min-width: 0;
}
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.toolbar > .bp6-input-group {
  flex: 1;
  min-width: 150px;
}
.toolbar .bp6-control {
  margin: 0;
}
.table-scroll {
  overflow: auto;
}
table td {
  vertical-align: middle !important;
}
.numeric {
  font-variant-numeric: tabular-nums;
}
tr.selected td {
  background: #2d72d20d !important;
}
.inspector h2 {
  font-size: 20px;
  margin-top: 12px;
}
.inspector dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 24px 0;
}
.inspector dt {
  color: var(--bp-typography-color-muted);
}
.inspector dd {
  margin: 0;
}
.inspector form {
  border-top: 1px solid var(--bp-surface-border-color-default);
  padding-top: 20px;
}
.inspector p {
  margin: 16px 0 0;
}
.specimen > .bp6-callout {
  margin-top: 20px;
}
.specimen footer {
  font-size: 11px;
  margin-top: 24px;
  color: var(--bp-typography-color-muted);
}
@media (max-width: 800px) {
  .workbench {
    grid-template-columns: 1fr;
  }
  .specimen {
    padding: 16px;
  }
  .specimen header {
    align-items: start;
  }
  .toolbar {
    gap: 16px;
  }
  h1.bp6-heading {
    font-size: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

.bp6-dark .eyebrow,
.bp6-dark .inspector dt,
.bp6-dark footer {
  color: #abb3bf;
}
```

コードリファレンス

- bp6-darkクラスでライブラリのテーマが有効になります。サンプル表示領域の背景色はアプリケーション側のCSSです。

## Palantir Blueprint デザインシステム エージェントのセットアップ

### 実装の出発点

ネイティブプレビューはReact 18.3.1とBlueprint 6.21.0でバンドルして実行しました。選択したViteのリリースがサポートするNode.jsバージョンを使用してください。アプリケーションファイルはどちらも上記に記載しています。

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

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

```
Blueprint 6.21.0を使って、データセットのレビューワークスペースを構築してください。提示されたトークンと、完成したReact/CSSの例を確認してください。ネイティブのHTMLTable、ラベル付きのInputGroup/FormGroup、ステータスを示すTag、キーボードで選択できる行を維持してください。フィルター、選択、密度、表示設定、レビュー状態はそれぞれ独立させてください。APIが提供された場合に限り、実際の保存サービスを追加してください。メモを失わずに、処理中と失敗のレスポンスを表示してください。レスポンシブなインスペクターと、視認できるフォーカス状態も維持してください。
```

## Palantir Blueprint デザインシステムの出典と対象範囲

Blueprint 6.21.0を対象とするOpenDesignアプリケーションガイドです。実際のReactパッケージを実行する、独自のデータセットレビュー例を掲載しています。データセット名とレビュー結果はローカルのサンプルデータです。ワークベンチのレイアウトはアプリケーションコードで、リファレンス値はバージョンを指定した公開パッケージに基づいています。

- Blueprintコンポーネントのドキュメント ネイティブコンポーネントの仕様と使用例。

- 公開されている6.21.0のデザイントークン リファレンステーブルで使用している、バージョン指定済みの正確な値。

- Blueprintのソースリポジトリ 実装、パッケージのリリース履歴、Apacheライセンス。

## Palantir Blueprint デザインシステム 関連リソース

### Pega Bolt

BoltのPegaブランドコンテンツシステムを紹介します。流動的なタイポグラフィ、横方向と縦方向で分けた余白、編集者向けリソースページを構成するTwigアコーディオンを取り上げます。

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

流動的なスペーシング、CSSのカラースキーム、Porsche Nextのタイポグラフィ、2択のコンフィギュレーターを通じて、Porsche Design System v4を見てみましょう。実際のトークン式と、最新のセグメントコントロールイベントを使用した完全なViteエントリーを掲載しています。

### Red Hat PatternFly

運用ワークスペースにはPatternFlyを使用してください。セマンティックなトークン参照、選択可能なサービスカード、3状態の一括選択、適用範囲の確認、ネイティブなReactのコード一式を備えています。


- [実装リファレンス](https://blueprintjs.com/docs/#core/components/html-table)
- [ソース](https://cdn.jsdelivr.net/npm/@blueprintjs/core@6.21.0/lib/css/blueprint-design-tokens.css)
- [ソース](https://blueprintjs.com/docs/#core/components)
- [コードリファレンス](https://blueprintjs.com/docs/#core/components)
- [コードリファレンス](https://blueprintjs.com/docs/#core/typography)
- [Blueprintコンポーネントのドキュメント ネイティブコンポーネントの仕様と使用例。](https://blueprintjs.com/docs/#core/components)
- [公開されている6.21.0のデザイントークン リファレンステーブルで使用している、バージョン指定済みの正確な値。](https://cdn.jsdelivr.net/npm/@blueprintjs/core@6.21.0/lib/css/blueprint-design-tokens.css)
- [Blueprintのソースリポジトリ 実装、パッケージのリリース履歴、Apacheライセンス。](https://github.com/palantir/blueprint)