# GitLab Pajamas-Designsystem

## Vorschau der Benutzeroberfläche des GitLab Pajamas-Designsystems

Filtere Jobs nach Status, wähle einen Job aus, um seine Ausgabe zu lesen, simuliere einen erfolgreichen Linkcheck nach einem Fehler und setze die ursprünglichen Testdaten zurück.

## Designreferenz für das GitLab Pajamas-Designsystem

Der veröffentlichte Light-Token-Export und das native CSS von @gitlab/ui 138.0.0. GL_*-Namen sind JavaScript-Exporte; ihre kleingeschriebenen --gl-*-Entsprechungen erscheinen im kompilierten CSS. Das Beispiel verwendet das native Stylesheet mit der ursprünglichen HTML- und Zustandslogik, nicht eingebundene Vue-Komponenten.

### Semantische Oberflächen, Texte und Rahmen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| GL_BACKGROUND_COLOR_DEFAULT | #fff | Verwende die durch das Token bezeichnete Rolle; dies ist der Light-Referenzexport. |
| GL_BACKGROUND_COLOR_SUBTLE | #f7f7f5 | Verwende die durch das Token bezeichnete Rolle; dies ist der Light-Referenzexport. |
| GL_BACKGROUND_COLOR_STRONG | #ecebea | Verwende die durch das Token bezeichnete Rolle; dies ist der Light-Referenzexport. |
| GL_TEXT_COLOR_DEFAULT | #3a383d | Verwende die durch das Token bezeichnete Rolle; dies ist der Light-Referenzexport. |
| GL_TEXT_COLOR_SUBTLE | #646163 | Verwende die durch das Token bezeichnete Rolle; dies ist der Light-Referenzexport. |
| GL_TEXT_COLOR_STRONG | #18171d | Verwende die durch das Token bezeichnete Rolle; dies ist der Light-Referenzexport. |
| GL_TEXT_COLOR_HEADING | #18171d | Verwende die durch das Token bezeichnete Rolle; dies ist der Light-Referenzexport. |
| GL_TEXT_COLOR_LINK | #27599f | Verwende die durch das Token bezeichnete Rolle; dies ist der Light-Referenzexport. |
| GL_BORDER_COLOR_DEFAULT | #dcdbd9 | Verwende die durch das Token bezeichnete Rolle; dies ist der Light-Referenzexport. |
| GL_BORDER_COLOR_SUBTLE | #ecebea | Verwende die durch das Token bezeichnete Rolle; dies ist der Light-Referenzexport. |
| GL_BORDER_COLOR_STRONG | #c1bfbe | Verwende die durch das Token bezeichnete Rolle; dies ist der Light-Referenzexport. |
### Abstände der Benutzeroberfläche

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| GL_SPACING_SCALE_0 | 0px | Die Werte der Abstandsskala ergeben sich nicht daraus, dass man ihren Index mit einem einzigen konstanten Faktor multipliziert. |
| GL_SPACING_SCALE_1 | 0.125rem | Die Werte der Abstandsskala ergeben sich nicht daraus, dass man ihren Index mit einem einzigen konstanten Faktor multipliziert. |
| GL_SPACING_SCALE_2 | 0.25rem | Die Werte der Abstandsskala ergeben sich nicht daraus, dass man ihren Index mit einem einzigen konstanten Faktor multipliziert. |
| GL_SPACING_SCALE_3 | 0.5rem | Die Werte der Abstandsskala ergeben sich nicht daraus, dass man ihren Index mit einem einzigen konstanten Faktor multipliziert. |
| GL_SPACING_SCALE_4 | 0.75rem | Die Werte der Abstandsskala ergeben sich nicht daraus, dass man ihren Index mit einem einzigen konstanten Faktor multipliziert. |
| GL_SPACING_SCALE_5 | 1rem | Die Werte der Abstandsskala ergeben sich nicht daraus, dass man ihren Index mit einem einzigen konstanten Faktor multipliziert. |
| GL_SPACING_SCALE_6 | 1.5rem | Die Werte der Abstandsskala ergeben sich nicht daraus, dass man ihren Index mit einem einzigen konstanten Faktor multipliziert. |
| GL_SPACING_SCALE_7 | 2rem | Die Werte der Abstandsskala ergeben sich nicht daraus, dass man ihren Index mit einem einzigen konstanten Faktor multipliziert. |
| GL_SPACING_SCALE_8 | 2.5rem | Die Werte der Abstandsskala ergeben sich nicht daraus, dass man ihren Index mit einem einzigen konstanten Faktor multipliziert. |
| GL_SPACING_SCALE_9 | 3rem | Die Werte der Abstandsskala ergeben sich nicht daraus, dass man ihren Index mit einem einzigen konstanten Faktor multipliziert. |
### Responsive Schriftskala

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| GL_FONT_SIZE_100 | 0.75rem | Für größere Rollen wird clamp verwendet; wenn eine fließende Typografie vorgesehen ist, sollte der Ausdruck erhalten bleiben. |
| GL_FONT_SIZE_200 | 0.8125rem | Für größere Rollen wird clamp verwendet; wenn eine fließende Typografie vorgesehen ist, sollte der Ausdruck erhalten bleiben. |
| GL_FONT_SIZE_300 | 0.875rem | Für größere Rollen wird clamp verwendet; wenn eine fließende Typografie vorgesehen ist, sollte der Ausdruck erhalten bleiben. |
| GL_FONT_SIZE_400 | 1rem | Für größere Rollen wird clamp verwendet; wenn eine fließende Typografie vorgesehen ist, sollte der Ausdruck erhalten bleiben. |
| GL_FONT_SIZE_500 | clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem) | Für größere Rollen wird clamp verwendet; wenn eine fließende Typografie vorgesehen ist, sollte der Ausdruck erhalten bleiben. |
| GL_FONT_SIZE_600 | clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem) | Für größere Rollen wird clamp verwendet; wenn eine fließende Typografie vorgesehen ist, sollte der Ausdruck erhalten bleiben. |
| GL_FONT_SIZE_700 | clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem) | Für größere Rollen wird clamp verwendet; wenn eine fließende Typografie vorgesehen ist, sollte der Ausdruck erhalten bleiben. |
| GL_FONT_SIZE_800 | clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem) | Für größere Rollen wird clamp verwendet; wenn eine fließende Typografie vorgesehen ist, sollte der Ausdruck erhalten bleiben. |
### Eckenradien für Steuerelemente und Oberflächen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| GL_BORDER_RADIUS_NONE | 0px | Der Radius beschreibt die Form einer Komponente, nicht die Wichtigkeit einer Aktion. |
| GL_BORDER_RADIUS_XS | 1px | Der Radius beschreibt die Form einer Komponente, nicht die Wichtigkeit einer Aktion. |
| GL_BORDER_RADIUS_SM | 0.125rem | Der Radius beschreibt die Form einer Komponente, nicht die Wichtigkeit einer Aktion. |
| GL_BORDER_RADIUS_MD | 0.25rem | Der Radius beschreibt die Form einer Komponente, nicht die Wichtigkeit einer Aktion. |
| GL_BORDER_RADIUS_LG | 0.5rem | Der Radius beschreibt die Form einer Komponente, nicht die Wichtigkeit einer Aktion. |
| GL_BORDER_RADIUS_XL | 0.75rem | Der Radius beschreibt die Form einer Komponente, nicht die Wichtigkeit einer Aktion. |
| GL_BORDER_RADIUS_FULL | 9999px | Der Radius beschreibt die Form einer Komponente, nicht die Wichtigkeit einer Aktion. |
| GL_BORDER_RADIUS_DEFAULT | 0.25rem | Der Radius beschreibt die Form einer Komponente, nicht die Wichtigkeit einer Aktion. |
### Referenzwerte für Statusfarben

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| GL_COLOR_GREEN_50 | #e6f5ea | Dezente Oberfläche für einen erfolgreichen Status. |
| GL_COLOR_GREEN_800 | #075048 | Vordergrundfarbe für einen erfolgreichen Status auf heller Oberfläche. |
| GL_COLOR_RED_50 | #feeef0 | Dezente Oberfläche für einen fehlgeschlagenen Status. |
| GL_COLOR_RED_800 | #891c2f | Vordergrundfarbe für einen fehlgeschlagenen Status auf heller Oberfläche. |
| GL_COLOR_BLUE_50 | #e8f2fd | Oberfläche des ausgewählten Jobs. |
| GL_COLOR_BLUE_700 | #27599f | Referenz für Auswahlrahmen und sichtbaren Fokus. |
## Vollständiger Leitfaden zum GitLab Pajamas-Designsystem

Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface.

Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen.

## Informationsarchitektur der Pipeline im GitLab Pajamas-Designsystem

### Fehlerkontext vor Wiederherstellungsoptionen anzeigen

> Die Kopfzeile nennt eine fiktive Pipeline, einen Branch und einen Commit, damit der Job-Inspektor den nötigen Kontext bietet. Build, Test und Publish sind als Gruppen sichtbar, und für den ausgewählten Job wird die zugehörige Ausgabe angezeigt. Beim fehlgeschlagenen Linkcheck werden Route und Abbruchbedingung erläutert, bevor die Person die Wiederholungsaktion sieht.

### Ein kompaktes Diagramm übersichtlich halten

Dieses Beispiel verwendet Spalten für Phasen und Schaltflächen, statt die Implementierung eines vollständigen Abhängigkeitsdiagramms vorzutäuschen. Auf schmalen Bildschirmen werden die Phasen in der Dokumentreihenfolge untereinander angeordnet. Eine Produktionspipeline benötigt möglicherweise parallele Jobs, Abhängigkeiten sowie wartende, manuelle und abgebrochene Status; diese sollten ausdrücklich modelliert und nicht aus den drei Beispielüberschriften abgeleitet werden.

## Semantische Farben und Status im GitLab Pajamas-Designsystem

### Semantische Rollen der Benutzeroberfläche für die Arbeitsfläche verwenden

Der Light-Export bietet warme neutrale Oberflächen, klar abgestufte Textkontraste und dezente Rahmen. Das Beispiel verwendet die Standardoberfläche für Jobkarten, eine blaue Auswahloberfläche und einen dunklen Protokollbereich. Der Leitfaden nennt die genauen Paketwerte, damit sich diese Beziehungen nachvollziehen lassen, ohne Farben aus einem Screenshot abzulesen.

### Statusbezeichnungen aussagekräftig gestalten

In jeder Jobzeile und jedem Badge steht Passed oder Failed. Ein Häkchen oder Kreuz ergänzt den Text; farbige Badges allein wären nicht eindeutig. Markenlila wird nicht als allgemeines Erfolgssignal verwendet. Die Statusreferenzen in der Tabelle sind bewusst von der Auswahlfarbe Blau getrennt.

## Typografische Skala und technische Texte im GitLab Pajamas-Designsystem

### Fließende Ausdrücke beibehalten, wo sie vorgesehen sind

Das Paket stellt feste kleine Rollen und größere Rollen auf Basis von clamp bereit. Wird clamp durch seinen größten Endwert ersetzt, ändert sich das responsive Verhalten. Das ursprüngliche Beispiel verwendet einen 24px-Titel in Anwendungsgröße und kompakte unterstützende Rollen von 12–14px; diese Entscheidungen sind als Layoutvorgaben gekennzeichnet, nicht als zusätzliche Paket-Tokens.

### Monospace für Kennungen und Ausgaben verwenden

Branch und Commit sind im Code-Stil gesetzt, während Jobnamen als gut lesbarer Benutzeroberflächentext erscheinen. Die Ausgabe steht in einem umbrochenen Monospace-Block mit einem Tastaturfokusziel. Lange Pfade können umgebrochen werden, statt die ganze Seite breiter als ein Smartphone zu machen. Bei einer Auswahl wird der Text ersetzt, anstatt rohes HTML einzufügen.

## Abstände und Rahmenrhythmus im GitLab Pajamas-Designsystem

### Tokenwerte nicht anhand ihrer Nummer berechnen

GL_SPACING_SCALE_3 entspricht 0.5rem und scale_5 entspricht 1rem; der Index ist ein Schlüssel, kein direkter Multiplikator. Verwende bei der Implementierung der Skala den exportierten Wert. Die Referenztabelle enthält die exakten Einheiten, auch für die Stufe mit null Pixeln.

### Bereiche durch Abgrenzungen klarer strukturieren

Ein heller Rahmen trennt die Kopfzeile des Arbeitsbereichs von der Werkzeugleiste, während ein stärkerer Kartenrahmen den Ausgabeinspektor umfasst. Schaltflächen für Jobs haben einen eigenen Auswahlrahmen. Durch diese klar unterscheidbaren Abgrenzungen ist erkennbar, welches Element ausgewählt ist, ohne jede Metadatenzeile in eine weitere Box einzuschließen.

## Jobauswahl und -filterung im GitLab Pajamas-Designsystem

### Die Identität der Auswahl unabhängig von der Filterposition beibehalten

Das Skript verwendet stabile Zeichenfolgen-IDs wie links und accessibility. Der Filter ändert die angezeigten Jobs und wählt einen passenden Job aus, falls einer vorhanden ist. Durch Klicken auf einen Job werden gleichzeitig sein gedrückter Zustand, seine Phase, sein Status-Badge und sein Protokoll aktualisiert. So wird vermieden, dass der Titel eines Jobs zusammen mit der Ausgabe eines anderen erscheint.

### Wiederherstellungskontext beibehalten, wenn das Ergebnis verschwindet

Nachdem der fehlgeschlagene Job simuliert auf „Passed“ gesetzt wurde, liefert ein Filter für fehlgeschlagene Jobs keine Ergebnisse mehr. Der Hinweis für leere Listen erklärt, wie die Liste wiederhergestellt werden kann, während der Inspektor das gerade abgeschlossene Ergebnis weiterhin anzeigt. So kann die Person nachvollziehen, warum die Zeile verschwunden ist, ohne die Bestätigung zu verlieren.

## Wiederholungs- und Zurücksetzungsverhalten im GitLab Pajamas-Designsystem

### Die Simulation eindeutig kennzeichnen

Die Aktion heißt „Erfolgreichen Wiederholungsversuch simulieren“, ändert nur die lokalen Testdaten und ersetzt das Protokoll durch einen Beschreibungstext zum Simulationsergebnis. Sie startet keinen Runner, erstellt keinen Job und untersucht kein Repository. Der Status der gesamten Pipeline wird anhand der Status aller Jobs neu berechnet, statt nach einem beliebigen Klick blind auf Erfolg gesetzt zu werden.

### Die gesamten ursprünglichen Testdaten wiederherstellen

Zurücksetzen erstellt eine frische Kopie der ursprünglichen Jobdaten, wählt den fehlgeschlagenen Link-Job aus, stellt „Alle Jobs“ wieder her und rendert beide Bereiche neu. Das simulierte Ergebnis wird ohne Neuladen gelöscht. So lässt sich das Beispiel wiederholt vorführen und ein zweiter Betrachter hält einen zuvor simulierten Erfolg nicht für den Ausgangszustand.

1. Wähle „Fehlgeschlagene Jobs“ aus und prüfe die fehlgeschlagene Route.

2. Simuliere einen Erfolg und lies den unverändert angezeigten Inspektor sowie die leere gefilterte Liste.

3. Setze das Beispiel zurück und überprüfe, ob der Fehler und die ursprüngliche Ausgabe wieder angezeigt werden.

## GitLab Pajamas-Designsystem: barrierefreie Job-Steuerelemente

### Verwende Schaltflächen für die lokale Auswahl

Jeder Job ist eine echte Schaltfläche mit aria-pressed. Der Status wird neben der Dauer angezeigt, und der sichtbare Tastaturfokus bleibt vom Auswahlstil getrennt. Der Filter hat eine sichtbare Beschriftung. Für diese einfachen Steuerelemente wird keine benutzerdefinierte Tastaturnavigation in einem Diagramm behauptet.

### Gib das Ergebnis bekannt, ohne den Fokus zu verschieben

Das Ergebnis wird nach einem erneuten Versuch oder dem Zurücksetzen in einen Statusbereich geschrieben. Das Protokoll besteht aus auswählbarem Text und kann zum Lesen den Tastaturfokus erhalten. Die Anwendung verschiebt den Fokus jedoch nicht nach jeder Auswahl automatisch dorthin. So bleiben wiederholte Vergleiche zwischen Jobs vorhersehbar.

## Designsystem und Integrationsgrenzen für Vue für GitLab Pajamas und CSS

### Lege die Integrationsebene ausdrücklich fest

Dieser Quellcode importiert die veröffentlichte CSS-Distribution und ergänzt sie um ursprüngliches Verhalten mit HTML/JavaScript. Er instanziiert weder GlButton noch GlFormSelect oder andere Vue-Exporte. Eine Vue-Anwendung sollte die entsprechenden nativen Komponenten und ihre aktuellen Props und Events verwenden, statt diese DOM-Implementierung als Vue-Beispiel zu behandeln.

- CSS-Distribution: natives Erscheinungsbild und semantische Variablen.

- Ursprüngliches HTML: barrierefreie Steuerelemente und Bereichsstruktur.

- Ursprüngliches JavaScript: Fixture-Daten, Auswahl, Filter und Simulation.

### Binde Tokens an die importierte Version

Die Referenzwerte stammen aus demselben Paket in Version 138.0.0, das auch in der Vorschau verwendet wird. Künftige Änderungen an Tokens und Komponenten sollten gemeinsam geprüft werden. Der vollständige Quellcode weiter unten enthält die ursprüngliche CSS-Komposition und Fixture-Logik. Der herunterladbare Leitfaden enthält somit genügend Material, um das gezeigte Verhalten nachzubilden.

## GitLab Pajamas-Designsystem: Komponentenbeispiele

### index.html — Pipeline-Arbeitsbereich

Vollständiges semantisches Layout und Steuerelemente.

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

Code-Referenz

- Im Stammverzeichnis des Vite-Projekts speichern.

### main.js — Fixture- und Wiederherstellungslogik

Nativer CSS-Import sowie das vollständige Verhalten für gestufte Jobs.

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

Code-Referenz

- Als src/main.js speichern. Es werden keine CI-Anfragen gesendet.

### pajamas.css — ursprüngliche Komposition

Responsive Phasen, ausgewählte Karten, Metadaten und umbrochene Protokollausgabe.

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

Code-Referenz

- Als src/pajamas.css speichern. Die Ausweichschrift des Systems ist ausdrücklich festgelegt; eine gebrandete GitLab-Schriftart ist nicht enthalten.

## GitLab Pajamas-Designsystem: Einrichtung des AI-Agenten

### Ausgangspunkt für die Implementierung

Diese Integration importiert ausschließlich die native CSS-Distribution. Beachte die Anforderungen an GitLab-UI-Peer-Abhängigkeiten separat, wenn du die Vue-Komponenten verwenden möchtest.

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

### Ein Prompt für dein Projekt

```
Erstelle einen technischen Job-Inspektor mit semantischen Oberflächen von Pajamas, echten Abstands- und Schriftreferenzen, stabilen Job-IDs und barrierefreier Auswahl. Verwende den vollständigen Fixture-Quellcode, bewahre den sichtbaren Fehlerkontext, mache leere Filterergebnisse verständlich und kennzeichne jede lokale Simulation. Erwecke nicht den Eindruck, dass CSS oder der beispielhafte erneute Versuch einen GitLab-CI-Job erstellt.
```

## GitLab Pajamas-Designsystem: Quellen und Geltungsbereich

Anwendungsleitfaden zu GitLab Pajamas und @gitlab/ui 138.0.0 für OpenDesign. Das native Paket CSS gestaltet dieses originale Beispiel für HTML/JavaScript. Die Pipeline ist fiktiv; es werden weder GitLab-API noch eine Vue-Laufzeitumgebung, ein CI-Runner oder eine Repository-Aktion aufgerufen.

- Pajamas: Farbleitfaden UI-Rollen und Statusbedeutung.

- Pajamas-Schaltflächen Aktionshierarchie und Verhalten von Schaltflächen.

- Angepinnter Token-Export Exakte Referenzwerte für Version 138.0.0.

- Offizielle Quelle Pajamas- und GitLab-UI-Quellcode-Repository.

## GitLab Pajamas-Designsystem: weiterführende Ressourcen

### HPE Grommet

Modellieren Sie eine Kapazitätsreservierung mit den Layout-Primitiven, gesteuerten Formularfeldern und numerischen Anzeigen von Grommet. Setzen Sie die Theme-Skala bewusst ein und halten Sie das Grommet-Basistheme vom separat installierten HPE-Theme getrennt.

### Infor Designsystem

Erstelle ein Wartungsformular für Unternehmen mit echten IDS-Eingabestatus, Theme-Aliasen und einer exakten Asset-ID. Prüfe die aktuellen öffentlichen Theme-Tokens, ein fest versioniertes Web-Components-Paket und einen lokalen Entwurfsworkflow mit Validierung und Zurücksetzen.

### Kajabi Sage

Erstelle ein Freigabefeld für Creator mit gut lesbarem Kurskontext, klaren Kopieraktionen und verlässlichem Feedback zur Zwischenablage. Sieh dir die Rails-Komponentenstruktur von Sage, die veröffentlichten Typografiespezifikationen und die neuere, extern geladene Pine-Token-Ebene an.


- [Implementierungsreferenz](https://design.gitlab.com/)
- [Quelle](https://cdn.jsdelivr.net/npm/@gitlab/ui@138.0.0/dist/tokens/build/js/tokens.js)
- [Code-Referenz](https://design.gitlab.com/)
- [Pajamas: Farbleitfaden UI-Rollen und Statusbedeutung.](https://design.gitlab.com/product-foundations/color/)
- [Pajamas-Schaltflächen Aktionshierarchie und Verhalten von Schaltflächen.](https://design.gitlab.com/components/button/)
- [Angepinnter Token-Export Exakte Referenzwerte für Version 138.0.0.](https://cdn.jsdelivr.net/npm/@gitlab/ui@138.0.0/dist/tokens/build/js/tokens.js)
- [Offizielle Quelle Pajamas- und GitLab-UI-Quellcode-Repository.](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com)