# Système de design Palantir Blueprint

## Aperçu de l’interface du système de design Palantir Blueprint

Filtrez par nom ou type, sélectionnez un jeu de données, modifiez la densité des lignes, changez l’apparence et validez une note de révision avant de mettre à jour l’état local.

## Référence de conception du système de design Palantir Blueprint

Blueprint core 6.21.0 publié CSS et composants natifs React. Il s’agit de certaines valeurs de jetons du thème clair ; utilisez le thème sombre de la bibliothèque plutôt que de les inverser manuellement. Les choix de mise en page de l’application sont indiqués dans l’exemple CSS.

### Couleurs d’intention et états d’interaction

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --bp-intent-primary-rest | #2d72d2 | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-intent-primary-hover | #215db0 | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-intent-primary-active | #184a90 | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-intent-primary-disabled | #4c90f0 | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-intent-primary-foreground | #ffffff | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-intent-success-rest | #238551 | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-intent-success-hover | #1c6e42 | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-intent-success-active | #165a36 | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-intent-success-disabled | #32a467 | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-intent-success-foreground | #ffffff | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-intent-warning-rest | #c87619 | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-intent-warning-hover | #935610 | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-intent-warning-active | #77450d | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-intent-warning-disabled | #ec9a3c | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-intent-warning-foreground | #111418 | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-intent-danger-rest | #cd4246 | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-intent-danger-hover | #ac2f33 | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-intent-danger-active | #8e292c | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-intent-danger-disabled | #e76a6e | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-intent-danger-foreground | #ffffff | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
### Échelle et graisses typographiques

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --bp-typography-size-body-x-small | 10px | Échelle du corps de texte, des libellés et des données complémentaires ; ne faites pas des petites métadonnées la taille de lecture principale. |
| --bp-typography-size-body-small | 12px | Échelle du corps de texte, des libellés et des données complémentaires ; ne faites pas des petites métadonnées la taille de lecture principale. |
| --bp-typography-size-body-medium | 14px | Échelle du corps de texte, des libellés et des données complémentaires ; ne faites pas des petites métadonnées la taille de lecture principale. |
| --bp-typography-size-body-large | 16px | Échelle du corps de texte, des libellés et des données complémentaires ; ne faites pas des petites métadonnées la taille de lecture principale. |
| --bp-typography-size-heading-small | 16px | Appliquez le rôle au niveau hiérarchique indiqué ; les valeurs du tableau peuvent aussi utiliser des chiffres tabulaires. |
| --bp-typography-size-heading-medium | 20px | Appliquez le rôle au niveau hiérarchique indiqué ; les valeurs du tableau peuvent aussi utiliser des chiffres tabulaires. |
| --bp-typography-size-heading-large | 24px | Appliquez le rôle au niveau hiérarchique indiqué ; les valeurs du tableau peuvent aussi utiliser des chiffres tabulaires. |
| --bp-typography-size-heading-x-large | 28px | Appliquez le rôle au niveau hiérarchique indiqué ; les valeurs du tableau peuvent aussi utiliser des chiffres tabulaires. |
| --bp-typography-size-heading-display | 46px | Appliquez le rôle au niveau hiérarchique indiqué ; les valeurs du tableau peuvent aussi utiliser des chiffres tabulaires. |
| --bp-typography-size-code-small | 12px | Appliquez le rôle au niveau hiérarchique indiqué ; les valeurs du tableau peuvent aussi utiliser des chiffres tabulaires. |
| --bp-typography-size-code-medium | 13px | Appliquez le rôle au niveau hiérarchique indiqué ; les valeurs du tableau peuvent aussi utiliser des chiffres tabulaires. |
| --bp-typography-size-code-large | 14px | Appliquez le rôle au niveau hiérarchique indiqué ; les valeurs du tableau peuvent aussi utiliser des chiffres tabulaires. |
| --bp-typography-weight-default | 400 | Appliquez le rôle au niveau hiérarchique indiqué ; les valeurs du tableau peuvent aussi utiliser des chiffres tabulaires. |
| --bp-typography-weight-bold | 600 | Appliquez le rôle au niveau hiérarchique indiqué ; les valeurs du tableau peuvent aussi utiliser des chiffres tabulaires. |
| --bp-typography-line-height-default | 1.28581 | Appliquez le rôle au niveau hiérarchique indiqué ; les valeurs du tableau peuvent aussi utiliser des chiffres tabulaires. |
| --bp-typography-line-height-large | 1.5 | Appliquez le rôle au niveau hiérarchique indiqué ; les valeurs du tableau peuvent aussi utiliser des chiffres tabulaires. |
### Surfaces, bordures et texte sémantique

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --bp-surface-border-color-default | #5f6b7c1f | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-surface-border-color-strong | #5f6b7c40 | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-surface-border-width | 1px | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-surface-border-radius | 4px | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-surface-spacing | 4px | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-surface-background-color-default-rest | #ffffff | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-surface-background-color-default-hover | #f6f7f9 | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-typography-color-default-rest | #1c2127 | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-typography-color-muted | #5f6b7c | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
### Focus et mouvement

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --bp-emphasis-transition-duration | 100ms | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-emphasis-ease-default | cubic-bezier(0.4, 1, 0.75, 0.9) | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-emphasis-ease-bounce | cubic-bezier(0.54, 1.12, 0.38, 1.11) | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-emphasis-focus-color | #2d72d2 | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-emphasis-focus-width | 2px | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-emphasis-focus-offset | 2px | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
| --bp-emphasis-motion-reduced | 0 | Utilisez le rôle sémantique nommé ; gardez ensemble les associations d’état et de premier plan. |
### Composants natifs utilisés dans l’espace de travail des jeux de données

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| HTMLTable | striped · interactive · condensed | Tableau sémantique natif ; la prop condensed modifie la densité sans changer les données. |
| InputGroup | value · onChange · intent | Recherche contrôlée et note de révision ; la validation de l’application applique l’intention danger. |
| FormGroup | labelFor · helperText · intent | Associez un libellé de champ visible et expliquez pourquoi la note est invalide. |
| HTMLSelect | options · value · onChange | Un select natif pour le petit ensemble fixe de types de jeux de données. |
| Tag | minimal · intent | Associez le texte d’état à un traitement de succès ou d’avertissement. |
| Button | intent="primary" · type="submit" | Validez la révision locale au moyen d’un véritable formulaire ; les boutons de sélection restent secondaires. |
| Switch | checked · onChange | Commandes indépendantes pour l’apparence et la densité. |
| Callout | intent · title | Expliquez l’absence de résultats ou leur signification ; évitez de communiquer l’état uniquement par la couleur. |
## Guide complet du système de design Palantir Blueprint

Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle.

Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources.

## Système de design Palantir Blueprint conçu pour les données

### Commandes compactes avec un ordre de lecture explicite

> Blueprint est utile lorsqu’un écran associe une collection, des filtres, un état et des actions contextuelles. L’exemple place le tableau des jeux de données à gauche et l’enregistrement sélectionné à droite. Le lecteur peut comparer les enregistrements sans ouvrir une nouvelle page pour chacun. L’inspecteur contient la note de révision modifiable ; le tableau reste une surface de consultation.

### Utilisez le contrat du package v6

L’exemple est compilé avec @blueprintjs/core 6.21.0. Son espace de noms CSS est bp6 et ses jetons sémantiques publiés commencent par --bp-. Une feuille de style bp5 plus ancienne ne remplace pas CSS des composants de la v6. Importez la feuille de style du package une seule fois au point d’entrée de l’application, puis appliquez les règles de mise en page de l’application à une classe distincte.

## Intention et rôles des couleurs du système de design Palantir Blueprint

### Distinguez le statut d’un enregistrement de sa sélection

Un Tag d’avertissement indique que le jeu de données doit être vérifié ; la teinte principale de la ligne indique qu’elle est sélectionnée. Ces significations sont indépendantes. Marquer une ligne comme vérifiée modifie son libellé et son intention en succès, sans changer la sélection du jeu de données. Le tableau affiche une mention textuelle pour chaque statut afin que la couleur ne porte pas à elle seule toute la signification.

### Appliquez le mode sombre à la limite du composant

L’exemple ajoute bp6-dark à son conteneur, ce qui permet aux composants natifs d’appliquer leur style sombre. Les valeurs du thème clair ci-dessus constituent un instantané de référence, et non une consigne de remplacer chaque composant. Lors de l’ajout d’un portail tel que Dialog, veillez à ce que son contenu rendu reçoive le même contexte de thème ; un conteneur qui n’inclut pas le portail ne suffit pas.

## Typographie du système de design Palantir Blueprint pour les enregistrements et les métadonnées

### Consultez l’échelle de texte avant de choisir les titres

Les tailles de texte de corps publiées comprennent 10, 12, 14 et 16px ; la taille moyenne est de 14px. Les noms des jeux de données restent au niveau de lecture principal. Les ID et les types d’enregistrement utilisent un texte secondaire, tandis que les nombres d’enregistrements sont affichés avec des chiffres tabulaires afin de faciliter la comparaison lorsque les valeurs changent. Le guide ne recommande pas d’utiliser 10px pour le contenu principal.

### Établissez une hiérarchie compacte dans l’inspecteur

L’inspecteur utilise un titre de 20px et une liste de définitions pour l’ID, le propriétaire, le type et le nombre. Les libellés et les valeurs sont alignés de façon stable sur deux colonnes. La note de vérification suit ces informations, dont elle est séparée par un trait, afin que l’action ne puisse pas être confondue avec un filtre du tableau.

## Tableau, filtres et inspecteur du système de design Palantir Blueprint

### Préservez la sémantique du tableau

HTMLTable fournit un tableau natif avec le style Blueprint. Les boutons de la première cellule permettent de sélectionner des enregistrements et restent accessibles au clavier ; l’exemple ne fait pas d’un gestionnaire de clic sur les lignes, utilisable uniquement à la souris, le seul moyen de sélectionner un enregistrement. La prop interactive applique un style au survol des lignes, tandis que condensed modifie séparément la densité, sans agir sur le filtrage.

### Rendez visible le flux de données contrôlé

La recherche et le sélecteur de type filtrent les mêmes lignes locales pour constituer la collection visible. L’enregistrement sélectionné peut rester dans l’inspecteur même si un filtre masque sa ligne ; ainsi, une note de vérification saisie ne disparaît pas simplement parce qu’un filtre de la collection a changé. Les logiciels de production doivent définir et documenter cette relation plutôt que d’abandonner silencieusement les modifications.

1. Rechercher un jeu de données par son nom affiché.

2. Affiner la même collection à l’aide du sélecteur de type.

3. Sélectionner le bouton portant le nom pour afficher l’inspecteur.

4. Saisir une note de vérification et la soumettre pour la vérification locale.

## Espacement, surfaces et densité du système de design Palantir Blueprint

### Utilisez une unité plus petite sans réduire tous les espaces

Le jeton d’espacement des surfaces publié vaut 4px. L’espace de travail utilise des multiples définis par l’application : 12px entre les commandes de filtre, 20px entre la collection et l’inspecteur, et 24px autour de l’exemple pour ordinateur. Il s’agit de choix de composition présentés dans CSS. Le jeton de rayon de bordure de 4px préserve une géométrie sobre pour les commandes et les surfaces.

### Adaptez la mise en page avant de supprimer des libellés

Au point de rupture de 800px défini pour l’application de l’exemple, l’inspecteur passe sous la collection. Les filtres passent à la ligne, la marge intérieure principale est ramenée à 16px et le tableau dispose de son propre conteneur avec défilement horizontal si nécessaire. Ce point de rupture est propre à cet espace de travail ; il n’est pas présenté comme un point de rupture officiel universel de Blueprint.

## Vérification et états vides du système de design Palantir Blueprint

### La validation fait partie de l’opération de vérification

Lorsqu’une note vide est soumise, une intention danger est appliquée à InputGroup et FormGroup, un texte d’aide explicatif s’affiche et le champ reçoit le focus. La saisie d’un texte efface l’erreur. Une soumission valide ne modifie que l’enregistrement local sélectionné, efface la note et affiche un Callout de succès indiquant explicitement qu’aucune donnée n’a été envoyée.

### Placez la solution de récupération à côté de la collection vide

Le Callout indiquant qu’aucun résultat n’a été trouvé propose l’action Effacer les filtres. Celle-ci réinitialise la recherche et le sélecteur de type pour rétablir la collection complète. Elle ne supprime aucune ligne et ne modifie pas l’inspecteur. Les limites entre les états suivants sont intentionnelles :

- La sélection modifie l’enregistrement inspecté, pas son statut de vérification.

- Le mode compact modifie la densité, pas l’ordre des enregistrements.

- Le thème modifie l’apparence visuelle, pas les filtres appliqués.

- Une vérification locale réussie modifie un seul enregistrement et annonce le résultat.

## Focus et utilisation accessible des composants du système de design Palantir Blueprint

### Attribuez un libellé à chaque commande native

InputGroup reçoit un nom accessible pour la recherche et un id pour le champ de vérification associé à son libellé. HTMLSelect possède son propre nom, Switch affiche des libellés visibles et chaque enregistrement s’ouvre au moyen d’un véritable bouton. Utilisez les API de ces bibliothèques au lieu de remplacer les commandes par des div stylisées.

### Préservez un indicateur de focus visible

La référence du package indique une largeur de focus de 2px et un décalage de 2px. Veillez à ce que l’indicateur de focus reste visible sur les Cards et les lignes sélectionnées. Les personnes utilisant le clavier doivent pouvoir parcourir les filtres, les boutons des lignes et le formulaire de vérification dans l’ordre du document. Le paragraphe de statut et le Callout de succès de l’exemple communiquent les résultats sans faire passer la personne sur un autre écran.

## Installation et limites de l’application du système de design Palantir Blueprint

### Exécutez le même code source que l’exemple

Le code source complet de App et le CSS de l’application sont fournis ci-dessous. App se monte dans l’élément root généré par le modèle React de Vite. L’installation du package core épinglé fournit les composants natifs et le CSS du package ; l’exemple textuel ne nécessite aucun élément de design caché.

### Étendez la vérification en définissant un véritable contrat de persistance

Une revue en production nécessite des identifiants d’enregistrement, des autorisations, un état d’attente et une réponse d’erreur. Gérez ces aspects dans l’application tout en préservant les API FormGroup et intent de Blueprint. N’annoncez pas la réussite de l’enregistrement avant que le service l’ait acceptée ; l’exemple local ne prétend volontairement pas le faire.

## Exemples de composants du système de design Palantir Blueprint

### main.jsx — application complète de revue de jeux de données

Une composition native complète avec filtrage, sélection, densité, thème, validation des champs et résultat de revue local.

```
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 />);
```

Référence du code

- Enregistrez ce fichier sous src/main.jsx et l’exemple suivant sous src/blueprint.css.

- L’appel à createRoot utilise l’élément racine du fichier index.html de Vite React.

### blueprint.css — mise en page adaptative de l’espace de travail

Les règles de mise en page de l’application complètent les styles natifs importés CSS. Le point de rupture de 800px et l’inspecteur de 260px sont des choix explicites propres à l’exemple.

```
* {
  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;
}
```

Référence du code

- La classe bp6-dark active le thème de la bibliothèque ; l’arrière-plan de la zone de démonstration relève des styles de l’application CSS.

## Configuration de l’agent du système de design Palantir Blueprint

### Point de départ de l’implémentation

L’aperçu natif a été compilé et exécuté avec React 18.3.1 et Blueprint 6.21.0. Utilisez une version de Node.js prise en charge par la version de Vite que vous avez choisie. Les deux fichiers de l’application sont fournis ci-dessus.

```
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
```

### Un prompt pour votre projet

```
Utilisez Blueprint 6.21.0 pour créer un espace de travail de revue de jeux de données. Consultez les jetons fournis et l’exemple complet React/CSS. Conservez HTMLTable natif, InputGroup/FormGroup avec libellés, Tags d’état et sélection des lignes accessible au clavier. Gérez séparément le filtre, la sélection, la densité, l’apparence et l’état de revue. N’ajoutez le véritable service d’enregistrement que lorsque son API sera fourni ; affichez les réponses d’attente et d’échec sans perdre la note. Conservez l’inspecteur adaptatif et les indicateurs de focus visibles.
```

## Sources et périmètre du système de design Palantir Blueprint

Guide de l’application OpenDesign pour Blueprint 6.21.0, accompagné d’un exemple original de revue de jeux de données utilisant le véritable package React. Les noms des jeux de données et les résultats de revue sont des données d’exemple locales. La mise en page de l’espace de travail relève du code de l’application ; les valeurs de référence proviennent du package publié correspondant à cette version.

- Documentation des composants Blueprint Contrats et exemples des composants natifs.

- Jetons de design publiés en version 6.21.0 Valeurs exactes correspondant à la version et utilisées dans les tableaux de référence.

- Dépôt source Blueprint Implémentation, historique des versions du package et licence Apache.

## Ressources associées au système de design Palantir Blueprint

### Pega Bolt

Découvrez le système de contenu de Bolt aux couleurs de Pega : typographie fluide, espacements horizontaux et verticaux distincts, et composition d’accordéon Twig pour une page de ressources éditoriale.

### Porsche système de design

Découvrez Porsche Design System v4 à travers ses espacements fluides, ses jeux de couleurs CSS, la typographie Porsche Next et un configurateur à deux choix. La référence comprend les expressions réelles des tokens et un point d’entrée Vite complet utilisant les événements actuels du contrôle segmenté.

### Red Hat PatternFly

Utilisez PatternFly pour créer un espace de travail opérationnel : références aux tokens sémantiques, cartes de service sélectionnables, sélection groupée à trois états, vérification du périmètre et code React natif complet.


- [Référence de mise en œuvre](https://blueprintjs.com/docs/#core/components/html-table)
- [Source](https://cdn.jsdelivr.net/npm/@blueprintjs/core@6.21.0/lib/css/blueprint-design-tokens.css)
- [Source](https://blueprintjs.com/docs/#core/components)
- [Référence du code](https://blueprintjs.com/docs/#core/components)
- [Référence du code](https://blueprintjs.com/docs/#core/typography)
- [Documentation des composants Blueprint Contrats et exemples des composants natifs.](https://blueprintjs.com/docs/#core/components)
- [Jetons de design publiés en version 6.21.0 Valeurs exactes correspondant à la version et utilisées dans les tableaux de référence.](https://cdn.jsdelivr.net/npm/@blueprintjs/core@6.21.0/lib/css/blueprint-design-tokens.css)
- [Dépôt source Blueprint Implémentation, historique des versions du package et licence Apache.](https://github.com/palantir/blueprint)