83.3K+Baixar
Análise de dados · Novo recurso

sistema de design Palantir Blueprint.

Crie um espaço de trabalho de dados denso com Blueprint: tokens verificados de tipografia e intenção, uma tabela de conjuntos de dados selecionáveis, um painel de revisão e o código-fonte completo de React.

Baixar OpenDesign Baixar DESIGN.md
Guia OpenDesign8 capítulos60 itens de referênciaGuia de aplicação original
01

Prévia da interface do sistema de design Palantir Blueprint

Filtre por nome ou tipo, selecione um conjunto de dados, altere a densidade das linhas, mude a aparência e valide uma nota de revisão antes de atualizar o status local.

Tabela do conjunto de dados e painel de revisãoAbrir exemplo completo
Blueprint nativo 6.21.0 com React 18.3.1. Composição original e responsiva de área de trabalho; sem servidor ou revisão salva. · Referência de implementação
02

Referência de design do sistema de design Palantir Blueprint

Blueprint core 6.21.0, publicado CSS, e componentes nativos React. Estes são valores selecionados dos tokens do tema claro; use o tema escuro da biblioteca em vez de invertê-los manualmente. As escolhas de layout do aplicativo estão identificadas no exemplo CSS.

Cores de intenção e estados de interação

Fonte
Nome / RegraValor / ConfiguraçãoUso
--bp-intent-primary-rest#2d72d2 Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-intent-primary-hover#215db0 Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-intent-primary-active#184a90 Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-intent-primary-disabled#4c90f0 Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-intent-primary-foreground#ffffff Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-intent-success-rest#238551 Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-intent-success-hover#1c6e42 Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-intent-success-active#165a36 Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-intent-success-disabled#32a467 Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-intent-success-foreground#ffffff Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-intent-warning-rest#c87619 Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-intent-warning-hover#935610 Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-intent-warning-active#77450d Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-intent-warning-disabled#ec9a3c Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-intent-warning-foreground#111418 Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-intent-danger-rest#cd4246 Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-intent-danger-hover#ac2f33 Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-intent-danger-active#8e292c Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-intent-danger-disabled#e76a6e Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-intent-danger-foreground#ffffff Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.

Escala e pesos tipográficos

Fonte
Nome / RegraValor / ConfiguraçãoUso
--bp-typography-size-body-x-small10pxEscalas de texto de corpo, rótulos e dados auxiliares; não transforme metadados pequenos no tamanho principal de leitura.
--bp-typography-size-body-small12pxEscalas de texto de corpo, rótulos e dados auxiliares; não transforme metadados pequenos no tamanho principal de leitura.
--bp-typography-size-body-medium14pxEscalas de texto de corpo, rótulos e dados auxiliares; não transforme metadados pequenos no tamanho principal de leitura.
--bp-typography-size-body-large16pxEscalas de texto de corpo, rótulos e dados auxiliares; não transforme metadados pequenos no tamanho principal de leitura.
--bp-typography-size-heading-small16pxAplique a função na hierarquia indicada pelo nome; os valores da tabela também podem usar algarismos tabulares.
--bp-typography-size-heading-medium20pxAplique a função na hierarquia indicada pelo nome; os valores da tabela também podem usar algarismos tabulares.
--bp-typography-size-heading-large24pxAplique a função na hierarquia indicada pelo nome; os valores da tabela também podem usar algarismos tabulares.
--bp-typography-size-heading-x-large28pxAplique a função na hierarquia indicada pelo nome; os valores da tabela também podem usar algarismos tabulares.
--bp-typography-size-heading-display46pxAplique a função na hierarquia indicada pelo nome; os valores da tabela também podem usar algarismos tabulares.
--bp-typography-size-code-small12pxAplique a função na hierarquia indicada pelo nome; os valores da tabela também podem usar algarismos tabulares.
--bp-typography-size-code-medium13pxAplique a função na hierarquia indicada pelo nome; os valores da tabela também podem usar algarismos tabulares.
--bp-typography-size-code-large14pxAplique a função na hierarquia indicada pelo nome; os valores da tabela também podem usar algarismos tabulares.
--bp-typography-weight-default400Aplique a função na hierarquia indicada pelo nome; os valores da tabela também podem usar algarismos tabulares.
--bp-typography-weight-bold600Aplique a função na hierarquia indicada pelo nome; os valores da tabela também podem usar algarismos tabulares.
--bp-typography-line-height-default1.28581Aplique a função na hierarquia indicada pelo nome; os valores da tabela também podem usar algarismos tabulares.
--bp-typography-line-height-large1.5Aplique a função na hierarquia indicada pelo nome; os valores da tabela também podem usar algarismos tabulares.

Superfícies, bordas e texto semântico

Fonte
Nome / RegraValor / ConfiguraçãoUso
--bp-surface-border-color-default#5f6b7c1fUse a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-surface-border-color-strong#5f6b7c40Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-surface-border-width1pxUse a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-surface-border-radius4pxUse a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-surface-spacing4pxUse a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-surface-background-color-default-rest#ffffff Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-surface-background-color-default-hover#f6f7f9 Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-typography-color-default-rest#1c2127 Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-typography-color-muted#5f6b7c Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.

Foco e movimento

Fonte
Nome / RegraValor / ConfiguraçãoUso
--bp-emphasis-transition-duration100msUse a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-emphasis-ease-defaultcubic-bezier(0.4, 1, 0.75, 0.9)Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-emphasis-ease-bouncecubic-bezier(0.54, 1.12, 0.38, 1.11)Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-emphasis-focus-color#2d72d2 Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-emphasis-focus-width2pxUse a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-emphasis-focus-offset2pxUse a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.
--bp-emphasis-motion-reduced0Use a função semântica indicada pelo nome; mantenha juntos o estado e as combinações de cores do texto em primeiro plano.

Componentes nativos usados na área de trabalho do conjunto de dados

Fonte
Nome / RegraValor / ConfiguraçãoUso
HTMLTablestriped · interactive · condensedTabela semântica nativa; a propriedade condensed altera a densidade sem mudar os dados.
InputGroupvalue · onChange · intentBusca controlada e nota de revisão; a validação do aplicativo define a intenção danger.
FormGrouplabelFor · helperText · intentAssocie um rótulo visível ao campo e explique por que a nota é inválida.
HTMLSelectoptions · value · onChangeUm select nativo para o conjunto pequeno e fixo de tipos de conjunto de dados.
Tagminimal · intentCombine o texto de status com o estilo success ou warning.
Buttonintent="primary" · type="submit"Confirme a revisão local por meio de um formulário real; os botões de seleção continuam sendo secundários.
Switchchecked · onChangeControles independentes de aparência e densidade.
Calloutintent · titleExplique a ausência de resultados ou o desfecho; não comunique o status apenas pela cor.
03

Guia completo do sistema de design Palantir Blueprint

Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real.

DESIGN-palantir-blueprint.md

Orientações completas, um ponto de partida para a implementação e links para o código-fonte.

Baixar o guia

Área de trabalho com foco em dados do sistema de design Palantir Blueprint

Controles compactos com uma ordem de leitura explícita

O Blueprint é útil quando uma tela combina uma coleção, filtros, status e ações contextuais. O exemplo mantém a tabela do conjunto de dados à esquerda e o registro selecionado à direita. Assim, é possível comparar registros sem abrir uma nova página para cada um. O painel de inspeção contém a nota de revisão editável; a tabela permanece como uma superfície de consulta rápida.

Com base neste guia de OpenDesign

Use o contrato do pacote v6

O exemplo é compilado com @blueprintjs/core 6.21.0. O namespace CSS é bp6 e seus tokens semânticos publicados começam com --bp-. Uma folha de estilos bp5 mais antiga não substitui os componentes CSS da v6. Importe a folha de estilos do pacote uma única vez na entrada do aplicativo e, em seguida, restrinja as regras de layout do aplicativo a uma classe separada.

Intenção e funções das cores do sistema de design Palantir Blueprint

Mantenha o status do registro separado da seleção

Uma Tag warning indica que o conjunto de dados precisa de revisão; a linha com tonalidade primária indica que ele está selecionado. Esses significados são independentes. Marcar uma linha como revisada altera seu rótulo e sua intenção para success, enquanto a seleção permanece no mesmo conjunto de dados. A tabela mantém o texto de cada status para que a cor não seja o único meio de transmitir o significado.

Mantenha o modo escuro no limite do componente

O exemplo adiciona bp6-dark ao elemento contêiner, permitindo que os componentes nativos apliquem seus estilos escuros. Os valores do tema claro acima são uma referência, não uma instrução para sobrescrever todos os componentes. Ao introduzir um portal, como Dialog, garanta que o conteúdo renderizado receba o mesmo contexto de tema; um contêiner que não englobe o portal não é suficiente.

Tipografia do sistema de design Palantir Blueprint para registros e metadados

Leia a escala do texto de corpo antes de escolher os títulos

Os tamanhos publicados para o texto de corpo incluem 10, 12, 14 e 16px; o tamanho médio é 14px. Os nomes dos conjuntos de dados permanecem no nível principal de leitura. IDs e tipos de registro usam texto auxiliar, enquanto as contagens numéricas usam algarismos tabulares, facilitando a comparação de valores que mudam. O guia não recomenda 10px para o conteúdo principal.

Crie uma hierarquia compacta no painel de inspeção

O painel de inspeção usa um título de 20px e uma lista de definições para ID, responsável, tipo e contagem. Rótulos e valores compartilham um alinhamento estável em duas colunas. A nota de revisão vem depois desses dados, separada por uma linha, para que a ação não seja confundida com um filtro da tabela.

Tabela, filtros e painel de inspeção do sistema de design Palantir Blueprint

Preserve a semântica da tabela

HTMLTable fornece uma tabela nativa com o estilo do Blueprint. Os botões na primeira célula selecionam registros e continuam acessíveis pelo teclado; o exemplo não depende de um manipulador de linha acionado apenas pelo ponteiro como único meio de seleção. A propriedade interactive aplica estilo de realce ao passar o cursor sobre as linhas, e condensed alterna a densidade independentemente da filtragem.

Deixe visível o fluxo controlado de dados

  1. Encontre um conjunto de dados pelo nome exibido.
  2. Restrinja a mesma coleção com o seletor de tipo.
  3. Selecione o botão do nome para carregar o painel de inspeção.
  4. Digite uma nota de revisão e envie a revisão local.

Espaçamento, superfícies e densidade do sistema de design Palantir Blueprint

Use uma unidade menor sem reduzir demais todos os espaços

O token publicado de espaçamento entre superfícies é 4px. A bancada usa múltiplos definidos pela aplicação: 12px entre os controles de filtro, 20px entre a coleção e o inspetor e 24px ao redor do exemplo para desktop. Essas são decisões de composição mostradas em CSS. O token de raio de borda de 4px mantém a geometria dos controles e das superfícies discreta.

Ajuste o layout antes de sacrificar os rótulos

No ponto de quebra de 800px definido para a aplicação de exemplo, o inspetor passa para baixo da coleção. Os filtros passam para a linha seguinte, o preenchimento principal muda para 16px e, quando necessário, a tabela recebe seu próprio contêiner com rolagem horizontal. Esse ponto de quebra pertence a esta bancada; ele não é apresentado como um ponto de quebra oficial e universal do Blueprint.

Revisão e estados vazios do Sistema de Design Palantir Blueprint

A validação faz parte da operação de revisão

Ao enviar uma nota vazia, o InputGroup e o FormGroup recebem a intenção de erro, é exibido um texto auxiliar explicativo e o foco vai para o campo. Ao inserir texto, o erro é removido. Um envio válido altera apenas o registro local selecionado, limpa a nota e exibe um Callout de sucesso que informa explicitamente que nenhum dado foi enviado.

Mantenha a recuperação próxima da coleção vazia

O Callout de nenhum resultado oferece a opção Limpar filtros. Ela redefine tanto a consulta de pesquisa quanto o seletor de tipo, restaurando a coleção completa. Não exclui linhas nem altera o inspetor. Os seguintes limites entre estados são intencionais:

  • A seleção altera o registro inspecionado, não seu status de revisão.
  • O modo compacto altera a densidade, não a ordem dos registros.
  • O tema altera a aparência visual, não os filtros atuais.
  • Uma revisão local bem-sucedida altera um registro e anuncia o resultado.

Foco e uso acessível de componentes do Sistema de Design Palantir Blueprint

Rotule cada controle nativo

O InputGroup recebe um nome acessível para a pesquisa e um id para o campo de revisão rotulado. O HTMLSelect tem seu próprio nome, o Switch exibe rótulos visíveis e cada registro é aberto por um botão real. Use essas APIs da biblioteca em vez de substituir os controles por divs estilizadas.

Mantenha o indicador de foco visível

A referência do pacote especifica uma largura de foco de 2px e um deslocamento de 2px. Mantenha o indicador de foco visível sobre Cards e linhas selecionadas. Usuários de teclado devem conseguir acessar os filtros, os botões das linhas e o formulário de revisão na ordem do documento. O parágrafo de status e o Callout de sucesso do exemplo comunicam os resultados sem levar a pessoa para outra tela.

Instalação e limites da aplicação do Sistema de Design Palantir Blueprint

Execute o mesmo código-fonte do exemplo

O código-fonte completo de App e o CSS da aplicação são fornecidos abaixo. App é montado no elemento raiz gerado pelo modelo do Vite React. A instalação do pacote principal fixado fornece os componentes nativos e o pacote CSS; o exemplo baseado em texto não requer nenhum recurso de design oculto.

Amplie a revisão com um contrato real de persistência

Exemplos de componentes do Sistema de Design Palantir Blueprint

main.jsx — aplicação completa para revisão de conjuntos de dados

Uma composição totalmente nativa com filtragem, seleção, densidade, tema, validação de campo e resultado de revisão local.

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

Referência de código

  • Salve este arquivo como src/main.jsx e o próximo exemplo como src/blueprint.css.
  • A chamada createRoot usa o elemento raiz de index.html do Vite React.

blueprint.css — layout responsivo da bancada

As regras de layout da aplicação complementam o CSS nativo importado. O ponto de quebra de 800px e o inspetor de 260px são escolhas explícitas deste exemplo.

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

Referência de código

  • A classe bp6-dark ativa o tema da biblioteca; o fundo da tela do exemplo é definido pela aplicação CSS.
04

Configuração do agente de IA para o Sistema de Design Palantir Blueprint

Ponto de partida para implementação

A prévia nativa foi empacotada e executada com React 18.3.1 e Blueprint 6.21.0. Use uma versão do Node.js compatível com a versão do Vite escolhida. Os dois arquivos da aplicação são fornecidos acima.

sh
npm create vite@latest blueprint-review -- --template react
cd blueprint-review
npm install
npm install [email protected] [email protected] @blueprintjs/[email protected]
# Replace src/main.jsx and add src/blueprint.css using the complete examples.
npm run dev

Um prompt para seu projeto

Prompt para agente de IA
Use Blueprint 6.21.0 para criar um espaço de trabalho de revisão de conjuntos de dados. Consulte os tokens fornecidos e o exemplo completo em React/CSS. Preserve HTMLTable nativo, InputGroup/FormGroup rotulados, Tags de status e seleção de linhas acessível por teclado. Mantenha independentes os estados de filtro, seleção, densidade, aparência e revisão. Adicione o serviço real de salvamento somente quando seu API for fornecido; mostre respostas pendentes e com falha sem perder a nota. Mantenha o inspetor responsivo e os estados de foco visíveis.
05

Fontes e escopo do Sistema de Design Palantir Blueprint

OpenDesign: guia de aplicação para Blueprint 6.21.0, com um exemplo original de revisão de conjuntos de dados que executa o pacote React real. Os nomes dos conjuntos de dados e os resultados das revisões são dados de exemplo locais. O layout da bancada é código da aplicação; os valores de referência vêm do pacote publicado com versão definida.