# GitLab Pajamas Tasarım Sistemi

## GitLab Pajamas Tasarım Sistemi arayüz önizlemesi

İşleri duruma göre filtreleyin, çıktısını okumak için bir iş seçin, başarısız bağlantı denetiminin başarılı olmasını simüle edin ve özgün test verisini sıfırlayın.

## GitLab Pajamas Tasarım Sistemi tasarım referansı

@gitlab/ui 138.0.0 yayımlanmış açık tema belirteç dışa aktarımını ve yerel CSS dosyasını sağlar. GL_* adları JavaScript dışa aktarımlarıdır; derlenmiş CSS dosyasında bunların küçük harfli --gl-* karşılıkları bulunur. Örnekte özgün HTML/durum mantığıyla birlikte yerel stil sayfası kullanılır; Vue bileşenleri çalıştırılmaz.

### Anlamsal yüzeyler, metin ve kenarlıklar

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| GL_BACKGROUND_COLOR_DEFAULT | #fff | Belirteçte adı geçen rolü kullanın; bu, açık tema için referans dışa aktarımıdır. |
| GL_BACKGROUND_COLOR_SUBTLE | #f7f7f5 | Belirteçte adı geçen rolü kullanın; bu, açık tema için referans dışa aktarımıdır. |
| GL_BACKGROUND_COLOR_STRONG | #ecebea | Belirteçte adı geçen rolü kullanın; bu, açık tema için referans dışa aktarımıdır. |
| GL_TEXT_COLOR_DEFAULT | #3a383d | Belirteçte adı geçen rolü kullanın; bu, açık tema için referans dışa aktarımıdır. |
| GL_TEXT_COLOR_SUBTLE | #646163 | Belirteçte adı geçen rolü kullanın; bu, açık tema için referans dışa aktarımıdır. |
| GL_TEXT_COLOR_STRONG | #18171d | Belirteçte adı geçen rolü kullanın; bu, açık tema için referans dışa aktarımıdır. |
| GL_TEXT_COLOR_HEADING | #18171d | Belirteçte adı geçen rolü kullanın; bu, açık tema için referans dışa aktarımıdır. |
| GL_TEXT_COLOR_LINK | #27599f | Belirteçte adı geçen rolü kullanın; bu, açık tema için referans dışa aktarımıdır. |
| GL_BORDER_COLOR_DEFAULT | #dcdbd9 | Belirteçte adı geçen rolü kullanın; bu, açık tema için referans dışa aktarımıdır. |
| GL_BORDER_COLOR_SUBTLE | #ecebea | Belirteçte adı geçen rolü kullanın; bu, açık tema için referans dışa aktarımıdır. |
| GL_BORDER_COLOR_STRONG | #c1bfbe | Belirteçte adı geçen rolü kullanın; bu, açık tema için referans dışa aktarımıdır. |
### Arayüz boşlukları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| GL_SPACING_SCALE_0 | 0px | Boşluk ölçeği değerleri, sıra numaralarının tek bir sabitle çarpılmasıyla elde edilmez. |
| GL_SPACING_SCALE_1 | 0.125rem | Boşluk ölçeği değerleri, sıra numaralarının tek bir sabitle çarpılmasıyla elde edilmez. |
| GL_SPACING_SCALE_2 | 0.25rem | Boşluk ölçeği değerleri, sıra numaralarının tek bir sabitle çarpılmasıyla elde edilmez. |
| GL_SPACING_SCALE_3 | 0.5rem | Boşluk ölçeği değerleri, sıra numaralarının tek bir sabitle çarpılmasıyla elde edilmez. |
| GL_SPACING_SCALE_4 | 0.75rem | Boşluk ölçeği değerleri, sıra numaralarının tek bir sabitle çarpılmasıyla elde edilmez. |
| GL_SPACING_SCALE_5 | 1rem | Boşluk ölçeği değerleri, sıra numaralarının tek bir sabitle çarpılmasıyla elde edilmez. |
| GL_SPACING_SCALE_6 | 1.5rem | Boşluk ölçeği değerleri, sıra numaralarının tek bir sabitle çarpılmasıyla elde edilmez. |
| GL_SPACING_SCALE_7 | 2rem | Boşluk ölçeği değerleri, sıra numaralarının tek bir sabitle çarpılmasıyla elde edilmez. |
| GL_SPACING_SCALE_8 | 2.5rem | Boşluk ölçeği değerleri, sıra numaralarının tek bir sabitle çarpılmasıyla elde edilmez. |
| GL_SPACING_SCALE_9 | 3rem | Boşluk ölçeği değerleri, sıra numaralarının tek bir sabitle çarpılmasıyla elde edilmez. |
### Duyarlı yazı ölçeği

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| GL_FONT_SIZE_100 | 0.75rem | Daha büyük roller clamp kullanır; akışkan tipografi amaçlandığında ifadeyi koruyun. |
| GL_FONT_SIZE_200 | 0.8125rem | Daha büyük roller clamp kullanır; akışkan tipografi amaçlandığında ifadeyi koruyun. |
| GL_FONT_SIZE_300 | 0.875rem | Daha büyük roller clamp kullanır; akışkan tipografi amaçlandığında ifadeyi koruyun. |
| GL_FONT_SIZE_400 | 1rem | Daha büyük roller clamp kullanır; akışkan tipografi amaçlandığında ifadeyi koruyun. |
| GL_FONT_SIZE_500 | clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem) | Daha büyük roller clamp kullanır; akışkan tipografi amaçlandığında ifadeyi koruyun. |
| GL_FONT_SIZE_600 | clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem) | Daha büyük roller clamp kullanır; akışkan tipografi amaçlandığında ifadeyi koruyun. |
| GL_FONT_SIZE_700 | clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem) | Daha büyük roller clamp kullanır; akışkan tipografi amaçlandığında ifadeyi koruyun. |
| GL_FONT_SIZE_800 | clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem) | Daha büyük roller clamp kullanır; akışkan tipografi amaçlandığında ifadeyi koruyun. |
### Denetim ve yüzey köşe yarıçapları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| GL_BORDER_RADIUS_NONE | 0px | Köşe yarıçapı bileşenin şeklini belirtir, eylemin önemini değil. |
| GL_BORDER_RADIUS_XS | 1px | Köşe yarıçapı bileşenin şeklini belirtir, eylemin önemini değil. |
| GL_BORDER_RADIUS_SM | 0.125rem | Köşe yarıçapı bileşenin şeklini belirtir, eylemin önemini değil. |
| GL_BORDER_RADIUS_MD | 0.25rem | Köşe yarıçapı bileşenin şeklini belirtir, eylemin önemini değil. |
| GL_BORDER_RADIUS_LG | 0.5rem | Köşe yarıçapı bileşenin şeklini belirtir, eylemin önemini değil. |
| GL_BORDER_RADIUS_XL | 0.75rem | Köşe yarıçapı bileşenin şeklini belirtir, eylemin önemini değil. |
| GL_BORDER_RADIUS_FULL | 9999px | Köşe yarıçapı bileşenin şeklini belirtir, eylemin önemini değil. |
| GL_BORDER_RADIUS_DEFAULT | 0.25rem | Köşe yarıçapı bileşenin şeklini belirtir, eylemin önemini değil. |
### Durum rengi referansları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| GL_COLOR_GREEN_50 | #e6f5ea | Belirgin olmayan başarılı durum yüzeyi. |
| GL_COLOR_GREEN_800 | #075048 | Açık yüzeyinde başarılı durum ön plan rengi. |
| GL_COLOR_RED_50 | #feeef0 | Belirgin olmayan başarısız durum yüzeyi. |
| GL_COLOR_RED_800 | #891c2f | Açık yüzeyinde başarısız durum ön plan rengi. |
| GL_COLOR_BLUE_50 | #e8f2fd | Seçili iş yüzeyi. |
| GL_COLOR_BLUE_700 | #27599f | Seçim kenarlığı ve görünür odak referansı. |
## GitLab Pajamas Tasarım Sistemi kapsamlı kılavuzu

Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz.

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

## GitLab Pajamas Tasarım Sistemi işlem hattı bilgi mimarisi

### Kurtarma seçeneğinden önce hata bağlamını verin

> Üstbilgide, iş denetleyicisine bağlam sağlamak için kurgusal bir işlem hattı, dal ve kayıt adı bulunur. Build, Test ve Publish grupları görünür; seçilen işin çıktısı ayrı olarak açılır. Başarısız bağlantı denetiminde, kullanıcı yeniden deneme eylemini görmeden önce hatayı açıklayan rota ve çıkış koşulu belirtilir.

### Kompakt grafiği okunabilir tutun

Bu örnek, eksiksiz bir bağımlılık grafiği uyguluyormuş gibi görünmek yerine aşama sütunları ve düğmeler kullanır. Dar ekranda aşamalar belge sırasına göre alt alta gelir. Üretim işlem hattında paralel işler, bağımlılıklar, bekleme, elle başlatma ve iptal durumları gerekebilir; bunlar üç örnek başlıktan çıkarılmak yerine açıkça modellenmelidir.

## GitLab Pajamas Tasarım Sistemi anlamsal renkler ve durumlar

### Çalışma yüzeyi için anlamsal arayüz rollerini kullanın

Açık tema dışa aktarımı sıcak nötr yüzeyler, farklı metin vurguları ve ince kenarlıklar sağlar. Örnekte iş kartları için varsayılan yüzey, seçili durum için mavi yüzey ve koyu günlük alanı kullanılır. Kılavuz, kullanıcının ilişkiyi ekran görüntüsünden piksel örneklemesi yapmadan yeniden oluşturabilmesi için paketteki tam değerleri listeler.

### Anlamı durum etiketleriyle belirtin

Her iş satırında ve rozetinde Passed ve Failed ifadeleri yer alır. Onay işareti veya çarpı bu metni destekler; yalnızca renkli rozetler belirsiz kalırdı. Marka moru, genel bir başarı göstergesi olarak kullanılmaz. Tablodaki durum referansları, seçim mavisinden özellikle ayrı tutulmuştur.

## GitLab Pajamas Tasarım Sistemi yazı ölçeği ve teknik metin

### Akışkan ifadeleri gerektiği yerde koruyun

Paket, sabit küçük rollerin yanı sıra clamp tabanlı daha büyük roller de sunar. clamp ifadesini en büyük uç değerle değiştirmek, duyarlı davranışı değiştirir. Özgün örnekte uygulama boyutunda 24px başlık ve 12–14px aralığında kompakt destek metinleri kullanılır; bu seçimler pakete ait ek belirteçler değil, düzen kararları olarak tanımlanır.

### Tanımlayıcılar ve çıktılar için tek aralıklı yazı tipi kullanın

Dal ve kayıt adı kod biçiminde gösterilirken iş adları okunabilir arayüz metni olarak kalır. Çıktı, klavye odağı alabilen ve satırları kaydıran tek aralıklı bir blokta gösterilir. Uzun yollar, tüm sayfanın telefon ekranından daha geniş olmasına yol açmak yerine satırlara bölünebilir; seçim değiştiğinde metin yenisiyle değiştirilir, ham HTML eklenmez.

## GitLab Pajamas Tasarım Sistemi boşlukları ve kenarlık düzeni

### Belirteç değerlerini sıra numaralarından hesaplamayın

GL_SPACING_SCALE_3 değeri 0.5rem, scale_5 değeri ise 1rem'dir; sıra numarası doğrudan çarpan değil, bir anahtardır. Ölçeği uygularken dışa aktarılan değeri kullanın. Referans tablosunda sıfır piksel adımı da dâhil olmak üzere birimler aynen korunur.

### Bölgeleri belirginleştirmek için sınırlar kullanın

Açık renkli bir kenarlık çalışma alanının üstbilgisini araç çubuğundan ayırırken, daha belirgin bir kart sınırı çıktı denetleyicisini çevreler. İş düğmelerinin seçili durum için kendi kenarlıkları vardır. Bu sınırları birbirinden farklı tutmak, meta verilerin her satırını başka bir kutuyla çevrelemeden hangi nesnenin seçili olduğunu açıklığa kavuşturur.

## GitLab Pajamas Tasarım Sistemi iş seçimi ve filtreleme

### Seçili kimliği filtre sırasından bağımsız tutun

Komut dosyası, links ve accessibility gibi kararlı metin kimlikleri kullanır. Filtre, listelenen işleri değiştirir ve eşleşen bir iş varsa onu seçer. Bir işe tıklamak, o işe ait basılı durumunu, aşamayı, durum rozetini ve günlüğü birlikte günceller. Böylece bir işin başlığı altında başka bir işin çıktısının gösterilmesi önlenir.

### Sonuç listeden kalkınca kurtarma bağlamını koruyun

Başarısız işin başarılı olduğu simüle edildikten sonra Failed jobs filtresi hiçbir sonuç göstermez. Boş durum mesajı listeyi nasıl geri yükleyeceğinizi açıklar; denetleyici ise tamamlanan sonucu göstermeyi sürdürür. Bu bilinçli seçim, satırın neden kaybolduğunu anlamayı sağlar ve onay bilgisinin yitirilmesini önler.

## GitLab Pajamas Tasarım Sistemi yeniden deneme ve sıfırlama davranışı

### Simülasyonu doğru biçimde etiketleyin

Eylemin adı Simulate successful retry olur; yalnızca yerel test verisini değiştirir ve günlüğü simülasyon sonucunu açıklayan bir metinle yeniler. Bir çalıştırıcıyı kuyruğa eklemez, iş oluşturmaz veya depoyu incelemez. Herhangi bir tıklamadan sonra başarıyı doğrudan ayarlamak yerine, genel işlem hattı rozeti tüm işlerin durumlarından yeniden hesaplanır.

### Başlangıç test verisinin tamamını geri yükleyin

Sıfırlama, ilk iş verilerinin yeni bir kopyasını oluşturur, başarısız bağlantı işini seçer, All jobs filtresini geri yükler ve her iki paneli yeniden işler. Sayfa yenilenmeden simülasyon sonucu temizlenir. Böylece örnek tekrar kullanılabilir ve sonraki kullanıcıların daha önce simüle edilmiş bir başarıyı başlangıç durumu sanması önlenir.

1. Failed jobs filtresini seçin ve başarısız rotayı inceleyin.

2. Başarıyı simüle edin; korunan denetleyiciyi ve filtrelenmiş boş listeyi inceleyin.

3. Örneği sıfırlayın ve hatanın ve özgün çıktının geri geldiğini doğrulayın.

## GitLab Pajamas Tasarım Sistemi erişilebilir iş denetimleri

### Yerel seçim için düğmeleri kullanın

Her iş, aria-pressed özelliği bulunan gerçek bir düğmedir. Durum, sürenin yanında yazıyla belirtilir; görünür klavye odağı seçili görünümden ayrı tutulur. Filtrenin görünür bir etiketi vardır. Bu basit denetimler için özel, yalnızca klavyeyle kullanılan grafik gezinme desteği olduğu iddia edilmez.

### Okuyucunun odağını değiştirmeden sonucu duyurun

Yeniden denemeden veya sıfırlamadan sonra sonuç bir durum bölgesine yazılır. Günlükteki metin seçilebilir ve okumak üzere klavye odağı alabilir; ancak uygulama her seçimden sonra odağı otomatik olarak günlüğe taşımaz. Böylece işler arasında art arda yapılan karşılaştırmalar öngörülebilir kalır.

## GitLab Pajamas Tasarım Sistemi CSS ve Vue entegrasyon sınırları

### Entegrasyon düzeyini açıkça seçin

Bu kaynak, yayımlanmış CSS dağıtımını içe aktarır ve özgün HTML/JavaScript davranışını sağlar. GlButton, GlFormSelect veya başka Vue dışa aktarımlarını örnek olarak oluşturmaz. Vue uygulaması, bu DOM uygulamasını Vue örneği olarak kullanmak yerine ilgili yerel bileşenleri ve bunların güncel props/event özelliklerini kullanmalıdır.

- CSS dağıtımı: yerel görünüm ve anlamsal değişkenler.

- Özgün HTML: erişilebilir denetimler ve bölge yapısı.

- Özgün JavaScript: test verileri, seçim, filtreler ve simülasyon.

### Belirteçleri içe aktarılan sürüme bağlı tutun

Referans değerleri, önizlemede kullanılan 138.0.0 paketiyle aynıdır. Gelecekteki belirteç ve bileşen değişiklikleri birlikte gözden geçirilmelidir. Aşağıdaki eksiksiz kaynak, özgün CSS kompozisyonunu ve test verisi mantığını içerir; böylece indirilen kılavuz, gösterilen davranışı yeniden oluşturmak için gereken her şeyi sunar.

## GitLab Pajamas Tasarım Sistemi bileşen örnekleri

### index.html — işlem hattı çalışma alanı

Anlamsal düzen ve denetimlerin tamamı.

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

Kod referansı

- Vite proje kök dizinine kaydedin.

### main.js — test verisi ve kurtarma mantığı

Yerel CSS içe aktarımına ek olarak aşamalı iş davranışının tamamı.

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

Kod referansı

- src/main.js olarak kaydedin. CI isteği gönderilmez.

### pajamas.css — özgün kompozisyon

Duyarlı aşamalar, seçili kartlar, meta veriler ve satırları kaydırılan günlük çıktısı.

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

Kod referansı

- src/pajamas.css olarak kaydedin. Sistem yazı tipi yedeği açıkça belirtilmiştir; GitLab markalı yazı tipi pakete eklenmemiştir.

## GitLab Pajamas Tasarım Sistemi ajan kurulumu

### Uygulamaya Başlangıç Noktası

Bu entegrasyon yalnızca yerel CSS dağıtımını içe aktarır. Vue bileşenlerini kullanmayı tercih ederseniz GitLab UI eş bağımlılık gereksinimlerini ayrıca izleyin.

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

### Projeniz İçin Bir İstem

```
Pajamas anlamsal yüzeylerini, gerçek boşluk/yazı tipi referanslarını, kararlı iş kimliklerini ve erişilebilir seçimi kullanan teknik bir iş denetleyicisi oluşturun. Eksiksiz test verisi kaynağını kullanın, görünür hata bağlamını koruyun, filtrelenmiş boş durumları anlaşılır kılın ve tüm yerel simülasyonları etiketleyin. CSS veya örnekteki yeniden deneme eyleminin bir GitLab CI işi oluşturduğu izlenimini vermeyin.
```

## GitLab Pajamas Tasarım Sistemi kaynakları ve kapsamı

OpenDesign, GitLab Pajamas ve @gitlab/ui 138.0.0 için uygulama kılavuzu. Yerel paket CSS, bu özgün HTML/JavaScript örneğini biçimlendirir. İşlem hattı kurgusaldır; herhangi bir GitLab API, Vue çalışma zamanı, CI çalıştırıcısı veya depo eylemi devreye girmez.

- Pajamas renk kılavuzu Arayüz rolleri ve durum anlamları.

- Pajamas düğmeleri Eylem hiyerarşisi ve düğme davranışı.

- Sabitlenmiş belirteç dışa aktarımı 138.0.0 sürümünün birebir referans değerleri.

- Resmî kaynak Pajamas ve GitLab UI kaynak deposu.

## GitLab Pajamas Tasarım Sistemiyle İlgili Kaynaklar

### HPE Grommet

Grommet’in düzen ilkelleri, denetimli form alanları ve sayısal göstergeleriyle kapasite rezervasyonunu modelleyin. Tema ölçeğini bilinçli kullanın; temel Grommet temasını ayrıca yüklenen HPE temasından ayrı tutun.

### Infor tasarım sistemi

Gerçek IDS giriş durumları, tema takma adları ve tam bir varlık tanımlayıcısıyla kurumsal bir bakım formu oluşturun. Güncel herkese açık tema belirteçlerini, sürümü sabitlenmiş bir Web Components paketini ve doğrulama ile sıfırlama içeren yerel taslak iş akışını inceleyin.

### Kajabi Sage

Kurs bağlamı açık, kopyalama eylemleri belirgin ve pano geri bildirimi gerçeğe uygun, içerik üreticilere yönelik bir paylaşım paneli oluşturun. Sage’in Rails bileşen anatomisini, yayımlanmış tipografi özelliklerini ve harici olarak yüklenen yeni Pine tasarım belirteci katmanını inceleyin.


- [Uygulama başvurusu](https://design.gitlab.com/)
- [Kaynak](https://cdn.jsdelivr.net/npm/@gitlab/ui@138.0.0/dist/tokens/build/js/tokens.js)
- [Kod referansı](https://design.gitlab.com/)
- [Pajamas renk kılavuzu Arayüz rolleri ve durum anlamları.](https://design.gitlab.com/product-foundations/color/)
- [Pajamas düğmeleri Eylem hiyerarşisi ve düğme davranışı.](https://design.gitlab.com/components/button/)
- [Sabitlenmiş belirteç dışa aktarımı 138.0.0 sürümünün birebir referans değerleri.](https://cdn.jsdelivr.net/npm/@gitlab/ui@138.0.0/dist/tokens/build/js/tokens.js)
- [Resmî kaynak Pajamas ve GitLab UI kaynak deposu.](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com)