83.3K+Scarica
Strumenti per sviluppatori · Nuova risorsa

Sistema di progettazione GitLab Pajamas.

Una guida Pajamas per i flussi di lavoro tecnici: token semantici effettivi, tipografia e spaziatura fluide, un ispettore di pipeline a fasi, messaggi di errore leggibili e una simulazione esplicitamente locale dei nuovi tentativi.

Scarica OpenDesign Scarica DESIGN.md
Guida OpenDesign8 capitoli43 voci di riferimentoGuida applicativa originale
01

Anteprima dell’interfaccia del sistema di design GitLab Pajamas

Filtra i job in base allo stato, selezionane uno per leggerne l’output, simula il completamento del controllo dei link non riuscito e ripristina la fixture originale.

Esamina un errore della pipeline e simula il ripristinoApri l’esempio completo
@gitlab/ui 138.0.0 CSS nativo; layout a fasi originale, HTML e logica di stato locale. Nessuna attività CI reale. · Riferimento per l’implementazione
02

Riferimento di progettazione del sistema di design GitLab Pajamas

Esportazione nativa dei token light di @gitlab/ui 138.0.0 e CSS nativo. I nomi GL_* sono esportazioni di JavaScript; i corrispondenti nomi in minuscolo --gl-* compaiono nel CSS compilato. L’esempio usa il foglio di stile nativo con logica originale di HTML e di stato; non monta componenti Vue.

Superfici semantiche, testo e bordi

Fonte
Nome / regolaValore / configurazioneUtilizzo
GL_BACKGROUND_COLOR_DEFAULT#fffUsa il ruolo indicato dal token; questa è l’esportazione di riferimento light.
GL_BACKGROUND_COLOR_SUBTLE#f7f7f5 Usa il ruolo indicato dal token; questa è l’esportazione di riferimento light.
GL_BACKGROUND_COLOR_STRONG#ecebea Usa il ruolo indicato dal token; questa è l’esportazione di riferimento light.
GL_TEXT_COLOR_DEFAULT#3a383d Usa il ruolo indicato dal token; questa è l’esportazione di riferimento light.
GL_TEXT_COLOR_SUBTLE#646163 Usa il ruolo indicato dal token; questa è l’esportazione di riferimento light.
GL_TEXT_COLOR_STRONG#18171d Usa il ruolo indicato dal token; questa è l’esportazione di riferimento light.
GL_TEXT_COLOR_HEADING#18171d Usa il ruolo indicato dal token; questa è l’esportazione di riferimento light.
GL_TEXT_COLOR_LINK#27599f Usa il ruolo indicato dal token; questa è l’esportazione di riferimento light.
GL_BORDER_COLOR_DEFAULT#dcdbd9 Usa il ruolo indicato dal token; questa è l’esportazione di riferimento light.
GL_BORDER_COLOR_SUBTLE#ecebea Usa il ruolo indicato dal token; questa è l’esportazione di riferimento light.
GL_BORDER_COLOR_STRONG#c1bfbe Usa il ruolo indicato dal token; questa è l’esportazione di riferimento light.

Spaziatura dell’interfaccia

Fonte
Nome / regolaValore / configurazioneUtilizzo
GL_SPACING_SCALE_00pxI valori della scala di spaziatura non corrispondono al loro indice moltiplicato per una costante unica.
GL_SPACING_SCALE_10.125remI valori della scala di spaziatura non corrispondono al loro indice moltiplicato per una costante unica.
GL_SPACING_SCALE_20.25remI valori della scala di spaziatura non corrispondono al loro indice moltiplicato per una costante unica.
GL_SPACING_SCALE_30.5remI valori della scala di spaziatura non corrispondono al loro indice moltiplicato per una costante unica.
GL_SPACING_SCALE_40.75remI valori della scala di spaziatura non corrispondono al loro indice moltiplicato per una costante unica.
GL_SPACING_SCALE_51remI valori della scala di spaziatura non corrispondono al loro indice moltiplicato per una costante unica.
GL_SPACING_SCALE_61.5remI valori della scala di spaziatura non corrispondono al loro indice moltiplicato per una costante unica.
GL_SPACING_SCALE_72remI valori della scala di spaziatura non corrispondono al loro indice moltiplicato per una costante unica.
GL_SPACING_SCALE_82.5remI valori della scala di spaziatura non corrispondono al loro indice moltiplicato per una costante unica.
GL_SPACING_SCALE_93remI valori della scala di spaziatura non corrispondono al loro indice moltiplicato per una costante unica.

Scala tipografica responsiva

Fonte
Nome / regolaValore / configurazioneUtilizzo
GL_FONT_SIZE_1000.75remPer i ruoli più grandi si usa clamp; mantieni l’espressione quando è prevista una tipografia fluida.
GL_FONT_SIZE_2000.8125remPer i ruoli più grandi si usa clamp; mantieni l’espressione quando è prevista una tipografia fluida.
GL_FONT_SIZE_3000.875remPer i ruoli più grandi si usa clamp; mantieni l’espressione quando è prevista una tipografia fluida.
GL_FONT_SIZE_4001remPer i ruoli più grandi si usa clamp; mantieni l’espressione quando è prevista una tipografia fluida.
GL_FONT_SIZE_500clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem)Per i ruoli più grandi si usa clamp; mantieni l’espressione quando è prevista una tipografia fluida.
GL_FONT_SIZE_600clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem)Per i ruoli più grandi si usa clamp; mantieni l’espressione quando è prevista una tipografia fluida.
GL_FONT_SIZE_700clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem)Per i ruoli più grandi si usa clamp; mantieni l’espressione quando è prevista una tipografia fluida.
GL_FONT_SIZE_800clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem)Per i ruoli più grandi si usa clamp; mantieni l’espressione quando è prevista una tipografia fluida.

Raggio di controlli e superfici

Fonte
Nome / regolaValore / configurazioneUtilizzo
GL_BORDER_RADIUS_NONE0pxIl raggio definisce la forma del componente, non l’importanza dell’azione.
GL_BORDER_RADIUS_XS1pxIl raggio definisce la forma del componente, non l’importanza dell’azione.
GL_BORDER_RADIUS_SM0.125remIl raggio definisce la forma del componente, non l’importanza dell’azione.
GL_BORDER_RADIUS_MD0.25remIl raggio definisce la forma del componente, non l’importanza dell’azione.
GL_BORDER_RADIUS_LG0.5remIl raggio definisce la forma del componente, non l’importanza dell’azione.
GL_BORDER_RADIUS_XL0.75remIl raggio definisce la forma del componente, non l’importanza dell’azione.
GL_BORDER_RADIUS_FULL9999pxIl raggio definisce la forma del componente, non l’importanza dell’azione.
GL_BORDER_RADIUS_DEFAULT0.25remIl raggio definisce la forma del componente, non l’importanza dell’azione.

Riferimenti cromatici degli stati

Fonte
Nome / regolaValore / configurazioneUtilizzo
GL_COLOR_GREEN_50#e6f5ea Superficie discreta per lo stato di esito positivo.
GL_COLOR_GREEN_800#075048 Colore di primo piano per l’esito positivo sulla relativa superficie chiara.
GL_COLOR_RED_50#feeef0 Superficie discreta per lo stato di errore.
GL_COLOR_RED_800#891c2f Colore di primo piano per l’errore sulla relativa superficie chiara.
GL_COLOR_BLUE_50#e8f2fd Superficie del job selezionato.
GL_COLOR_BLUE_700#27599f Riferimento per il bordo di selezione e per l’evidenziazione del focus.
03

Guida completa al sistema di design GitLab Pajamas

Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale.

DESIGN-gitlab-pajamas.md

Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti.

Scarica la guida

Architettura informativa della pipeline nel sistema di design GitLab Pajamas

Mostra il contesto dell’errore prima del ripristino

L’intestazione indica una pipeline, un branch e un commit fittizi, così l’ispezione del job ha un contesto. Build, Test e Publish sono raggruppati in modo visibile; selezionando un job si apre il relativo output. Per il controllo dei link non riuscito vengono indicati il percorso e la condizione di uscita che spiegano l’errore prima di mostrare l’azione di nuovo tentativo.

Da questa guida su OpenDesign

Mantieni leggibile un grafo compatto

Questo esempio usa colonne per le fasi e pulsanti, senza fingere di implementare un grafo completo delle dipendenze. Su uno schermo stretto, le fasi si dispongono in colonna seguendo l’ordine del documento. Una pipeline di produzione può richiedere job paralleli, dipendenze e stati in attesa, manuali o annullati: è meglio modellarli esplicitamente, anziché dedurli dai tre titoli di esempio.

Colori semantici e stati del sistema di design GitLab Pajamas

Usa ruoli semantici dell’interfaccia per l’area di lavoro

L’esportazione light offre superfici neutre calde, diversi livelli di contrasto del testo e bordi discreti. L’esempio usa la superficie predefinita per le schede dei job, una superficie blu per quello selezionato e un’area scura per i log. La guida riporta i valori esatti del pacchetto, così è possibile riprodurre queste relazioni senza campionare i pixel di uno screenshot.

Affida alle etichette di stato il compito di comunicare il significato

Ogni riga e badge dei job riporta Passed o Failed. Un segno di spunta o una croce integra il testo; i soli badge colorati sarebbero ambigui. Il viola del brand non viene usato come indicatore generico di esito positivo. I riferimenti di stato nella tabella sono intenzionalmente distinti dal blu di selezione.

Scala tipografica e testo tecnico del sistema di design GitLab Pajamas

Mantieni le espressioni fluide dove sono previste

Il pacchetto espone ruoli piccoli con valori fissi e ruoli più grandi basati su clamp. Sostituire un clamp con il suo valore massimo modifica il comportamento responsivo. L’esempio originale usa un titolo da 24px, dimensionato per l’applicazione, e ruoli secondari compatti da 12–14px; queste scelte sono indicate come decisioni di layout, non come token aggiuntivi del pacchetto.

Usa un carattere monospaziato per gli identificatori e l’output

Branch e commit usano lo stile del codice, mentre i nomi dei job restano testo d’interfaccia leggibile. L’output è mostrato in un blocco monospaziato con testo a capo e un punto di attivazione per il focus da tastiera. I percorsi lunghi possono andare a capo, evitando di allargare l’intera pagina oltre lo schermo di un telefono; la selezione sostituisce il testo invece di inserire HTML grezzo.

Spaziatura e ritmo dei bordi nel sistema di design GitLab Pajamas

Non calcolare i valori dei token a partire dal loro numero

GL_SPACING_SCALE_3 corrisponde a 0.5rem e scale_5 a 1rem; l’indice è una chiave, non un moltiplicatore diretto. Per implementare la scala, usa il valore esportato. La tabella di riferimento mantiene le unità esatte, incluso lo scatto da zero pixel.

Usa i bordi per distinguere le aree

Selezione e filtri dei job nel sistema di design GitLab Pajamas

Mantieni l’identità del job selezionato indipendente dalla posizione nel filtro

Lo script usa ID stringa stabili come links e accessibility. Il filtro modifica l’elenco dei job e, se possibile, seleziona un job corrispondente. Facendo clic su un job, vengono aggiornati insieme lo stato premuto, la fase, il badge di stato e il log. In questo modo il titolo di un job non viene mostrato insieme all’output di un altro.

Mantieni il contesto di ripristino quando il risultato scompare

Dopo aver simulato il completamento del job non riuscito, il filtro Failed jobs non restituisce risultati. Il messaggio di elenco vuoto spiega come ripristinare l’elenco, mentre il pannello di ispezione conserva il risultato appena completato. Questa scelta intenzionale aiuta a capire perché la riga è scomparsa, senza perdere la conferma.

Nuovo tentativo e ripristino nel sistema di design GitLab Pajamas

Descrivi la simulazione con chiarezza

L’azione è denominata Simulate successful retry: modifica solo la fixture locale e sostituisce il log con il resoconto scritto della simulazione. Non accoda un runner, non crea un job e non ispeziona un repository. Il badge della pipeline viene ricalcolato in base allo stato di tutti i job, anziché impostare ciecamente l’esito positivo dopo un clic qualsiasi.

Ripristina l’intera fixture iniziale

Reset crea una nuova copia dei dati iniziali dei job, seleziona il job dei link non riuscito, ripristina All jobs e ridisegna entrambi i pannelli. La simulazione viene cancellata senza ricaricare la pagina. In questo modo l’esempio può essere ripetuto e chi lo visualizza in seguito non scambia un esito positivo simulato in precedenza per la condizione iniziale.

  1. Seleziona Failed jobs e ispeziona il percorso che ha causato l’errore.
  2. Simula l’esito positivo e leggi il pannello di ispezione mantenuto insieme all’elenco filtrato vuoto.
  3. Ripristina l’esempio e verifica che ricompaiano l’errore e l’output originale.

Controlli accessibili dei job nel sistema di design GitLab Pajamas

Usa pulsanti per la selezione locale

Ogni job è un vero pulsante con aria-pressed. Lo stato è riportato accanto alla durata e il focus da tastiera visibile è distinto dall’aspetto selezionato. Il filtro ha un’etichetta visibile. Questi semplici controlli non dichiarano di offrire una navigazione personalizzata del grafo riservata alla tastiera.

Comunica il risultato senza spostare il focus del lettore

Dopo un nuovo tentativo o un ripristino, il risultato viene scritto in un’area di stato. Il log è testo selezionabile e può ricevere il focus da tastiera per essere letto, ma l’applicazione non sposta automaticamente il focus al suo interno a ogni selezione. In questo modo, il confronto ripetuto tra i job resta prevedibile.

Confini dell’integrazione con CSS e Vue nel sistema di design GitLab Pajamas

Scegli in modo esplicito un livello d’integrazione

Questo sorgente importa la distribuzione pubblicata di CSS e fornisce un comportamento originale di HTML/JavaScript. Non istanzia GlButton, GlFormSelect né altre esportazioni Vue. Un’applicazione Vue dovrebbe usare i componenti nativi corrispondenti e le relative props/eventi aggiornati, anziché considerare questa implementazione DOM un esempio Vue.

  • Distribuzione di CSS: aspetto nativo e variabili semantiche.
  • HTML originale: controlli accessibili e struttura delle aree.
  • JavaScript originale: dati della fixture, selezione, filtri e simulazione.

Mantieni i token allineati alla versione importata

Esempi di componenti del sistema di design GitLab Pajamas

index.html — area di lavoro della pipeline

Layout semantico e controlli completi.

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>

Riferimento del codice

  • Salva nella directory radice del progetto Vite.

main.js — logica della fixture e del ripristino

Importazione nativa di CSS e comportamento completo dei job organizzati per fasi.

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

Riferimento del codice

  • Salva come src/main.js. Non vengono effettuate richieste CI.

pajamas.css — composizione originale

Fasi responsive, schede selezionate, metadati e output dei log con testo a capo.

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;
  }
}

Riferimento del codice

  • Salva come src/pajamas.css. È indicato esplicitamente un font di sistema come alternativa; non è incluso alcun font brandizzato GitLab.
04

Configurazione dell’agente per il sistema di design GitLab Pajamas

Punto di partenza per l’implementazione

Questa integrazione importa solo la distribuzione nativa di CSS. Se si adottano i componenti Vue di GitLab UI, seguire separatamente i requisiti per le dipendenze peer.

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

Un prompt per il tuo progetto

Prompt per l’agente
Crea uno strumento tecnico per ispezionare i job, usando le superfici semantiche di Pajamas, riferimenti autentici per spaziatura e tipografia, ID stabili per i job e una selezione accessibile. Usa il sorgente completo della fixture, mantieni visibile il contesto dell’errore, rendi comprensibili gli stati filtrati senza risultati e indica chiaramente ogni simulazione locale. Non suggerire che CSS o il nuovo tentativo di esempio creino un job GitLab CI.
05

Fonti e ambito del sistema di design GitLab Pajamas

Guida applicativa OpenDesign a GitLab Pajamas e @gitlab/ui 138.0.0. Gli stili nativi del pacchetto CSS definiscono l’aspetto di questo esempio originale con HTML/JavaScript. La pipeline è fittizia e non viene eseguita alcuna azione GitLab API, runtime Vue, runner CI o repository.