83.3K+Baixar
Ferramentas para desenvolvedores · Novo recurso

Sistema de design GitLab Pajamas.

Um guia Pajamas para fluxos de trabalho técnicos: tokens semânticos reais, tipografia e espaçamento fluidos, um inspetor de pipeline em etapas, saída de falhas legível e uma simulação de nova tentativa explicitamente local.

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

Prévia da interface do sistema de design GitLab Pajamas

Filtre as tarefas por estado, selecione uma tarefa para ler sua saída, simule o êxito da verificação de links com falha e restaure os dados originais de exemplo.

Inspecione uma falha no pipeline e simule a recuperaçãoAbrir exemplo completo
@gitlab/ui 138.0.0 nativo CSS; layout original organizado por etapas, HTML e lógica de estado local. Nenhuma atividade real de CI. · Referência de implementação
02

Referência de design do sistema de design GitLab Pajamas

Exportação publicada de tokens do tema claro do @gitlab/ui 138.0.0 e CSS nativo. Os nomes GL_* são exportações de JavaScript; os equivalentes em minúsculas --gl-* aparecem no CSS compilado. O exemplo usa a folha de estilos nativa com HTML original e lógica de estado, sem montar componentes Vue.

Superfícies semânticas, texto e bordas

Fonte
Nome / RegraValor / ConfiguraçãoUso
GL_BACKGROUND_COLOR_DEFAULT#fffUse a função indicada pelo token; esta é a exportação de referência do tema claro.
GL_BACKGROUND_COLOR_SUBTLE#f7f7f5 Use a função indicada pelo token; esta é a exportação de referência do tema claro.
GL_BACKGROUND_COLOR_STRONG#ecebea Use a função indicada pelo token; esta é a exportação de referência do tema claro.
GL_TEXT_COLOR_DEFAULT#3a383d Use a função indicada pelo token; esta é a exportação de referência do tema claro.
GL_TEXT_COLOR_SUBTLE#646163 Use a função indicada pelo token; esta é a exportação de referência do tema claro.
GL_TEXT_COLOR_STRONG#18171d Use a função indicada pelo token; esta é a exportação de referência do tema claro.
GL_TEXT_COLOR_HEADING#18171d Use a função indicada pelo token; esta é a exportação de referência do tema claro.
GL_TEXT_COLOR_LINK#27599f Use a função indicada pelo token; esta é a exportação de referência do tema claro.
GL_BORDER_COLOR_DEFAULT#dcdbd9 Use a função indicada pelo token; esta é a exportação de referência do tema claro.
GL_BORDER_COLOR_SUBTLE#ecebea Use a função indicada pelo token; esta é a exportação de referência do tema claro.
GL_BORDER_COLOR_STRONG#c1bfbe Use a função indicada pelo token; esta é a exportação de referência do tema claro.

Espaçamento da interface

Fonte
Nome / RegraValor / ConfiguraçãoUso
GL_SPACING_SCALE_00pxOs valores da escala de espaçamento não correspondem ao índice multiplicado por uma constante única.
GL_SPACING_SCALE_10.125remOs valores da escala de espaçamento não correspondem ao índice multiplicado por uma constante única.
GL_SPACING_SCALE_20.25remOs valores da escala de espaçamento não correspondem ao índice multiplicado por uma constante única.
GL_SPACING_SCALE_30.5remOs valores da escala de espaçamento não correspondem ao índice multiplicado por uma constante única.
GL_SPACING_SCALE_40.75remOs valores da escala de espaçamento não correspondem ao índice multiplicado por uma constante única.
GL_SPACING_SCALE_51remOs valores da escala de espaçamento não correspondem ao índice multiplicado por uma constante única.
GL_SPACING_SCALE_61.5remOs valores da escala de espaçamento não correspondem ao índice multiplicado por uma constante única.
GL_SPACING_SCALE_72remOs valores da escala de espaçamento não correspondem ao índice multiplicado por uma constante única.
GL_SPACING_SCALE_82.5remOs valores da escala de espaçamento não correspondem ao índice multiplicado por uma constante única.
GL_SPACING_SCALE_93remOs valores da escala de espaçamento não correspondem ao índice multiplicado por uma constante única.

Escala tipográfica responsiva

Fonte
Nome / RegraValor / ConfiguraçãoUso
GL_FONT_SIZE_1000.75remAs funções tipográficas maiores usam clamp; preserve a expressão quando a tipografia fluida for desejada.
GL_FONT_SIZE_2000.8125remAs funções tipográficas maiores usam clamp; preserve a expressão quando a tipografia fluida for desejada.
GL_FONT_SIZE_3000.875remAs funções tipográficas maiores usam clamp; preserve a expressão quando a tipografia fluida for desejada.
GL_FONT_SIZE_4001remAs funções tipográficas maiores usam clamp; preserve a expressão quando a tipografia fluida for desejada.
GL_FONT_SIZE_500clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem)As funções tipográficas maiores usam clamp; preserve a expressão quando a tipografia fluida for desejada.
GL_FONT_SIZE_600clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem)As funções tipográficas maiores usam clamp; preserve a expressão quando a tipografia fluida for desejada.
GL_FONT_SIZE_700clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem)As funções tipográficas maiores usam clamp; preserve a expressão quando a tipografia fluida for desejada.
GL_FONT_SIZE_800clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem)As funções tipográficas maiores usam clamp; preserve a expressão quando a tipografia fluida for desejada.

Raio dos controles e das superfícies

Fonte
Nome / RegraValor / ConfiguraçãoUso
GL_BORDER_RADIUS_NONE0pxO raio representa a forma do componente, não a importância da ação.
GL_BORDER_RADIUS_XS1pxO raio representa a forma do componente, não a importância da ação.
GL_BORDER_RADIUS_SM0.125remO raio representa a forma do componente, não a importância da ação.
GL_BORDER_RADIUS_MD0.25remO raio representa a forma do componente, não a importância da ação.
GL_BORDER_RADIUS_LG0.5remO raio representa a forma do componente, não a importância da ação.
GL_BORDER_RADIUS_XL0.75remO raio representa a forma do componente, não a importância da ação.
GL_BORDER_RADIUS_FULL9999pxO raio representa a forma do componente, não a importância da ação.
GL_BORDER_RADIUS_DEFAULT0.25remO raio representa a forma do componente, não a importância da ação.

Referências de cores de estado

Fonte
Nome / RegraValor / ConfiguraçãoUso
GL_COLOR_GREEN_50#e6f5ea Superfície discreta para o estado de sucesso.
GL_COLOR_GREEN_800#075048 Texto do estado de sucesso sobre sua superfície clara.
GL_COLOR_RED_50#feeef0 Superfície discreta para o estado de falha.
GL_COLOR_RED_800#891c2f Texto do estado de falha sobre sua superfície clara.
GL_COLOR_BLUE_50#e8f2fd Superfície da tarefa selecionada.
GL_COLOR_BLUE_700#27599f Referência da borda de seleção e do foco visível.
03

Guia completo do sistema de design GitLab Pajamas

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

DESIGN-gitlab-pajamas.md

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

Baixar o guia

Arquitetura da informação do pipeline no sistema de design GitLab Pajamas

Apresente o contexto da falha antes da recuperação

O cabeçalho identifica um pipeline fictício, uma ramificação e um commit, dando contexto ao inspetor de tarefas. Compilação, Teste e Publicação aparecem agrupados, e cada tarefa selecionada abre sua própria saída. A verificação de links com falha inclui a rota e a condição de saída que explicam o problema antes de apresentar a ação para tentar novamente.

Com base neste guia de OpenDesign

Mantenha um gráfico compacto e legível

Este exemplo usa colunas por etapa e botões, sem pretender implementar um grafo completo de dependências. Em telas estreitas, as etapas são empilhadas na ordem do documento. Um pipeline de produção pode precisar de tarefas paralelas, dependências e estados de aguardando, manual e cancelado; eles devem ser modelados explicitamente, em vez de inferidos a partir dos três títulos de exemplo.

Cores semânticas e estados no sistema de design GitLab Pajamas

Use funções semânticas da interface para a área de trabalho

A exportação do tema claro oferece superfícies neutras quentes, diferentes intensidades de texto e bordas sutis. O exemplo usa a superfície padrão nos cartões de tarefa, uma superfície azul para a seleção e uma região escura para os registros. O guia lista os valores exatos do pacote para que seja possível reproduzir essas relações sem extrair cores de uma captura de tela.

Faça com que os rótulos de estado expressem o significado

Aprovado e Falhou aparecem por extenso em cada linha e selo de tarefa. Um sinal de verificação ou de cruz complementa o texto; selos coloridos, por si só, seriam ambíguos. O roxo da marca não é usado como indicador genérico de sucesso. As referências de estado na tabela são intencionalmente distintas do azul de seleção.

Escala tipográfica e texto técnico no sistema de design GitLab Pajamas

Preserve as expressões fluidas quando aplicáveis

O pacote oferece funções pequenas com valores fixos e funções maiores baseadas em clamp. Substituir um clamp pelo valor máximo altera o comportamento responsivo. O exemplo original usa um título de 24px, dimensionado para a aplicação, e funções auxiliares compactas de 12–14px; essas escolhas são identificadas como decisões de layout, não como tokens adicionais do pacote.

Use fonte monoespaçada para identificadores e saídas

A ramificação e o commit usam estilo de código, enquanto os nomes das tarefas permanecem como texto de interface legível. A saída aparece em um bloco monoespaçado com foco pelo teclado. Caminhos longos podem quebrar linha, evitando que toda a página fique mais larga que a tela de um celular; ao selecionar outra tarefa, o texto é substituído, em vez de inserir HTML bruto.

Espaçamento e ritmo das bordas no sistema de design GitLab Pajamas

Não calcule os valores dos tokens a partir de seus números

GL_SPACING_SCALE_3 equivale a 0.5rem e scale_5 a 1rem; o índice é uma chave, não um multiplicador direto. Use o valor exportado ao implementar a escala. A tabela de referência mantém a unidade exata, inclusive o valor de zero pixels.

Use limites para esclarecer as regiões

Seleção e filtragem de tarefas no sistema de design GitLab Pajamas

Mantenha a identidade selecionada independente da posição no filtro

O script usa IDs de texto estáveis, como links e accessibility. O filtro altera as tarefas exibidas e seleciona uma correspondente quando houver. Clicar em uma tarefa atualiza em conjunto seu estado pressionado, etapa, selo de estado e registro. Assim, o título de uma tarefa não aparece junto à saída de outra.

Mantenha o contexto da recuperação quando o resultado desaparecer

Depois que a tarefa com falha é simulada como aprovada, o filtro de tarefas com falha não retorna resultados. A mensagem de lista vazia explica como restaurar a lista, enquanto o inspetor mantém o resultado recém-concluído. Essa escolha deliberada ajuda a pessoa a entender por que a linha desapareceu, sem perder a confirmação.

Comportamento de nova tentativa e redefinição no sistema de design GitLab Pajamas

Identifique a simulação com clareza

A ação se chama Simular nova tentativa bem-sucedida, altera apenas os dados locais de exemplo e substitui o registro por um resultado que descreve a simulação. Ela não aciona um executor, cria uma tarefa nem inspeciona um repositório. O selo geral do pipeline é recalculado com base no estado de todas as tarefas, em vez de definir sucesso automaticamente após qualquer clique.

Restaure todos os dados iniciais de exemplo

A redefinição cria uma cópia nova dos dados iniciais do job, seleciona o job de link com falha, restaura Todos os jobs e renderiza novamente os dois painéis. Ela limpa o resultado simulado sem recarregar a página. Assim, o exemplo pode ser repetido e evita que outra pessoa confunda um sucesso simulado anteriormente com a condição inicial.

  1. Selecione Jobs com falha e confira a rota com falha.
  2. Simule o sucesso e leia o inspetor mantido na tela e a lista filtrada vazia.
  3. Redefina o exemplo e confira se a falha e a saída original foram restauradas.

Controles acessíveis para jobs do sistema de design GitLab Pajamas

Use botões para a seleção local

Cada job é um botão real com aria-pressed. O estado aparece ao lado da duração, e o foco visível do teclado permanece distinto da aparência de seleção. O filtro tem um rótulo visível. Não há navegação personalizada por teclado em um gráfico, pois esses controles simples não exigem esse recurso.

Anuncie o resultado sem mover o foco de leitura

O resultado é exibido em uma região de status após uma nova tentativa ou redefinição. O log é um texto selecionável e pode receber foco do teclado para leitura, mas o aplicativo não move o foco para ele automaticamente após cada seleção. Isso torna previsíveis as comparações repetidas entre jobs.

Limites de integração entre Vue e CSS do sistema de design GitLab Pajamas

Defina explicitamente o nível de integração

Este código importa a distribuição publicada CSS e implementa o comportamento original de HTML/JavaScript. Ele não instancia GlButton, GlFormSelect nem outras exportações do Vue. Um aplicativo Vue deve usar os componentes nativos correspondentes e suas props/eventos atuais, em vez de tratar esta implementação DOM como um exemplo de Vue.

  • Distribuição CSS: aparência nativa e variáveis semânticas.
  • HTML original: controles acessíveis e estrutura das regiões.
  • JavaScript original: dados de fixture, seleção, filtros e simulação.

Mantenha os tokens vinculados à versão importada

Exemplos de componentes do sistema de design GitLab Pajamas

index.html — área de trabalho do pipeline

Layout semântico completo e controles.

html
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Pipeline specimen</title>
<body>
<main class="pipeline-example">
  <header>
    <p class="eyebrow">sample-team / documentation</p>
    <div class="title-row">
      <div>
        <h1>Pipeline #1842</h1>
        <p>
          Preview build for <code>docs/update-navigation</code> ·
          <code>7c31a82</code>
        </p>
      </div>
      <span id="pipeline-state" class="state failed">Failed</span>
    </div>
  </header>
  <div class="toolbar">
    <label for="job-filter">Show jobs</label
    ><select id="job-filter" class="gl-form-select">
      <option value="all">All jobs</option>
      <option value="failed">Failed jobs</option>
      <option value="passed">Passed jobs</option></select
    ><button id="reset" class="btn btn-default gl-button">
      Reset specimen
    </button>
  </div>
  <div class="pipeline-layout">
    <section aria-label="Pipeline stages">
      <div id="stages" class="stages"></div>
      <p id="empty" hidden>
        No jobs match this filter. Choose All jobs to restore the pipeline.
      </p>
    </section>
    <section class="job-detail" aria-labelledby="job-title">
      <div class="detail-heading">
        <h2 id="job-title"></h2>
        <span id="job-state" class="state"></span>
      </div>
      <dl>
        <dt>Stage</dt>
        <dd id="job-stage"></dd>
        <dt>Runner</dt>
        <dd>local-example-runner</dd>
        <dt>Execution</dt>
        <dd>Simulated in this page</dd>
      </dl>
      <h3>Job output</h3>
      <pre id="job-log" tabindex="0" aria-label="Selected job output"></pre>
      <button id="retry" class="btn btn-confirm gl-button">
        Simulate successful retry
      </button>
      <p id="feedback" role="status"></p>
    </section>
  </div>
  <footer>
    Native @gitlab/ui 138.0.0 CSS with original HTML and state logic. Fictional
    pipeline; no runner, repository or CI job is started.
  </footer>
</main>

<script type="module" src="/src/main.js"></script>
</body></html>

Referência de código

  • Salve na raiz do projeto Vite.

main.js — fixture e lógica de recuperação

Importação nativa de CSS e comportamento completo de jobs em etapas.

js
import "@gitlab/ui/dist/index.css";
import "./pajamas.css";
const initial = [
  {
    id: "lint",
    stage: "Build",
    state: "passed",
    time: "12s",
    log: "$ npm run lint\nNo lint errors.\nJob succeeded.",
  },
  {
    id: "bundle",
    stage: "Build",
    state: "passed",
    time: "31s",
    log: "$ npm run build\nStatic assets generated.\nJob succeeded.",
  },
  {
    id: "links",
    stage: "Test",
    state: "failed",
    time: "18s",
    log: "$ npm run check:links\n/docs/old-navigation returned 404\n1 broken internal link.\nJob failed: exit code 1.",
  },
  {
    id: "accessibility",
    stage: "Test",
    state: "passed",
    time: "24s",
    log: "$ npm run check:a11y\nExample fixture checks passed.\nJob succeeded.",
  },
  {
    id: "preview",
    stage: "Publish",
    state: "passed",
    time: "9s",
    log: "$ npm run package:preview\nLocal preview archive generated.\nJob succeeded.",
  },
];
let jobs = structuredClone(initial),
  selected = "links";
const filter = document.querySelector("#job-filter"),
  stages = document.querySelector("#stages"),
  retry = document.querySelector("#retry"),
  feedback = document.querySelector("#feedback");
function render() {
  stages.replaceChildren();
  let count = 0;
  for (const name of ["Build", "Test", "Publish"]) {
    const matches = jobs.filter(
      (j) =>
        j.stage === name &&
        (filter.value === "all" || j.state === filter.value),
    );
    if (!matches.length) continue;
    const section = document.createElement("div");
    section.className = "stage";
    const h = document.createElement("h2");
    h.textContent = name;
    section.append(h);
    for (const j of matches) {
      count++;
      const b = document.createElement("button");
      b.type = "button";
      b.className = "job";
      b.setAttribute("aria-pressed", String(j.id === selected));
      const strong = document.createElement("strong"),
        small = document.createElement("small");
      strong.textContent = j.id;
      small.textContent =
        (j.state === "passed" ? "✓ Passed" : "× Failed") + " · " + j.time;
      b.append(strong, small);
      b.onclick = () => {
        selected = j.id;
        feedback.textContent = "";
        render();
      };
      section.append(b);
    }
    stages.append(section);
  }
  document.querySelector("#empty").hidden = count !== 0;
  const j = jobs.find((j) => j.id === selected);
  document.querySelector("#job-title").textContent = j.id;
  document.querySelector("#job-stage").textContent = j.stage;
  document.querySelector("#job-log").textContent = j.log;
  const state = document.querySelector("#job-state");
  state.className = "state " + j.state;
  state.textContent = j.state === "passed" ? "Passed" : "Failed";
  retry.hidden = j.state !== "failed";
  const failed = jobs.some((j) => j.state === "failed"),
    overall = document.querySelector("#pipeline-state");
  overall.textContent = failed ? "Failed" : "Passed";
  overall.className = "state " + (failed ? "failed" : "passed");
}
filter.onchange = () => {
  const match = jobs.find(
    (j) => filter.value === "all" || j.state === filter.value,
  );
  if (match) selected = match.id;
  feedback.textContent = "";
  render();
};
retry.onclick = () => {
  const j = jobs.find((j) => j.id === selected);
  j.state = "passed";
  j.time = "15s";
  j.log =
    "$ npm run check:links\nSimulation: updated route found.\nNo broken internal links.\nJob succeeded (local simulation).";
  render();
  feedback.textContent =
    "Simulated retry completed locally. No CI job was started.";
};
document.querySelector("#reset").onclick = () => {
  jobs = structuredClone(initial);
  selected = "links";
  filter.value = "all";
  feedback.textContent = "Specimen restored.";
  render();
};
render();

Referência de código

  • Salve como src/main.js. Não há chamadas de CI.

pajamas.css — composição original

Etapas responsivas, cartões selecionados, metadados e saída de log com quebra de linha.

css
[hidden] {
  display: none !important;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: var(--gl-text-color-default, #3a383d);
  background: var(--gl-background-color-default, #fff);
}
.pipeline-example {
  padding: 28px;
}
.pipeline-example header {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--gl-border-color-default);
}
.eyebrow {
  font-size: 12px;
  color: var(--gl-text-color-subtle);
  margin-bottom: 16px;
}
.title-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
h1 {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px;
}
h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}
h3 {
  font-size: 14px;
  font-weight: 600;
}
.title-row p {
  margin: 0;
  color: var(--gl-text-color-subtle);
}
code {
  font: 12px monospace;
  background: #f7f7f5;
  color: #3a383d;
  padding: 2px 4px;
  overflow-wrap: anywhere;
}
.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
}
.toolbar label {
  margin: 0;
  font-weight: 600;
}
.toolbar select {
  max-width: 180px;
}
.toolbar button {
  margin-left: auto;
}
.pipeline-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr);
  gap: 24px;
}
.stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.stage h2 {
  font-size: 13px;
  margin-bottom: 12px;
  color: var(--gl-text-color-subtle);
}
.job {
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--gl-border-color-default);
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 8px;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.job[aria-pressed="true"] {
  border-color: #27599f;
  box-shadow: inset 0 0 0 1px #27599f;
  background: #e8f2fd;
}
.job strong {
  display: block;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.job small {
  display: block;
  margin-top: 6px;
  color: var(--gl-text-color-subtle);
}
.job-detail {
  border: 1px solid var(--gl-border-color-default);
  border-radius: 4px;
  padding: 20px;
  min-width: 0;
}
.detail-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.state {
  font-size: 12px;
  font-weight: 600;
  border-radius: 9999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.state.failed {
  background: #feeef0;
  color: #891c2f;
}
.state.passed {
  background: #e6f5ea;
  color: #075048;
}
dl {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 8px;
  margin: 20px 0;
  font-size: 12px;
}
dt {
  color: var(--gl-text-color-subtle);
  font-weight: 400;
}
dd {
  margin: 0;
  overflow-wrap: anywhere;
}
pre {
  background: #18171d;
  color: #ecebea;
  padding: 16px;
  border-radius: 4px;
  font: 12px/1.7 monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-height: 160px;
  margin-bottom: 16px;
}
#feedback {
  font-size: 12px;
  margin: 12px 0 0;
}
footer {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--gl-border-color-subtle);
  font-size: 12px;
  color: var(--gl-text-color-subtle);
}
button:focus-visible,
select:focus-visible,
pre:focus-visible {
  outline: 2px solid #27599f;
  outline-offset: 3px;
}
@media (max-width: 1050px) {
  .pipeline-layout {
    grid-template-columns: 1fr;
  }
  .stages {
    gap: 16px;
  }
}
@media (max-width: 550px) {
  .pipeline-example {
    padding: 16px;
  }
  .toolbar {
    flex-wrap: wrap;
  }
  .toolbar button {
    margin-left: 0;
  }
  .stages {
    grid-template-columns: 1fr;
  }
  .stage {
    border-bottom: 1px solid var(--gl-border-color-subtle);
    padding-bottom: 8px;
  }
  .title-row {
    flex-wrap: wrap;
  }
  .job-detail {
    padding: 16px;
  }
}

Referência de código

  • Salve como src/pajamas.css. O fallback de fontes do sistema é explícito; nenhuma fonte com a marca GitLab está incluída.
04

Configuração de agente do sistema de design GitLab Pajamas

Ponto de partida para implementação

Esta integração importa apenas a distribuição nativa de CSS. Se você adotar os componentes Vue, siga separadamente os requisitos de dependência peer do GitLab UI.

sh
npm create vite@latest pajamas-pipeline -- --template vanilla
cd pajamas-pipeline
npm install
npm install @gitlab/[email protected]
# Replace index.html; add src/main.js and src/pajamas.css from the complete examples.
npm run dev

Um prompt para seu projeto

Prompt para agente de IA
Crie um inspetor técnico de jobs com superfícies semânticas do Pajamas, referências reais de espaçamento e tipografia, IDs estáveis de jobs e seleção acessível. Use a fonte completa da fixture, preserve o contexto visível da falha, torne compreensíveis os estados vazios dos filtros e identifique toda simulação local. Não dê a entender que CSS ou a nova tentativa de exemplo cria um job de GitLab CI.
05

Fontes e escopo do sistema de design GitLab Pajamas

Guia do aplicativo OpenDesign para GitLab Pajamas e @gitlab/ui 138.0.0. O pacote nativo CSS estiliza este exemplo original de HTML/JavaScript. O pipeline é fictício; nenhuma API API do GitLab, ambiente de execução Vue, executor de CI ou ação de repositório é acionado.