83.3K+Descargar
Herramientas para desarrolladores · Nuevo recurso

Sistema de diseño GitLab Pajamas.

Una guía de Pajamas para flujos de trabajo técnicos: tokens semánticos reales, tipografía y espaciado fluidos, un inspector de canalización por etapas, mensajes de error fáciles de leer y una simulación de reintento explícitamente local.

Descargar OpenDesign Descargar DESIGN.md
Guía de OpenDesign8 capítulos43 entradas de referenciaGuía de aplicación original
01

Vista previa de la interfaz del sistema de diseño GitLab Pajamas

Filtra los trabajos por estado, selecciona uno para consultar su salida, simula que la comprobación del enlace fallido se completa correctamente y restablece los datos de prueba originales.

Inspecciona un fallo de pipeline y simula su recuperaciónAbrir ejemplo completo
CSS nativo de @gitlab/ui 138.0.0; diseño por etapas original, HTML y lógica de estado local. No hay actividad real de CI. · Referencia de implementación
02

Referencia de diseño del sistema de diseño GitLab Pajamas

@gitlab/ui 138.0.0 publica una exportación de tokens del tema claro y CSS nativo. Los nombres GL_* son exportaciones de JavaScript; sus equivalentes en minúsculas --gl-* aparecen en el CSS compilado. El ejemplo usa la hoja de estilos nativa con la lógica original de HTML y de estado, no componentes Vue montados.

Superficies, texto y bordes semánticos

Fuente
Nombre / ReglaValor / ConfiguraciónUso
GL_BACKGROUND_COLOR_DEFAULT#fffUsa la función indicada por el token; esta es la exportación de referencia del tema claro.
GL_BACKGROUND_COLOR_SUBTLE#f7f7f5 Usa la función indicada por el token; esta es la exportación de referencia del tema claro.
GL_BACKGROUND_COLOR_STRONG#ecebea Usa la función indicada por el token; esta es la exportación de referencia del tema claro.
GL_TEXT_COLOR_DEFAULT#3a383d Usa la función indicada por el token; esta es la exportación de referencia del tema claro.
GL_TEXT_COLOR_SUBTLE#646163 Usa la función indicada por el token; esta es la exportación de referencia del tema claro.
GL_TEXT_COLOR_STRONG#18171d Usa la función indicada por el token; esta es la exportación de referencia del tema claro.
GL_TEXT_COLOR_HEADING#18171d Usa la función indicada por el token; esta es la exportación de referencia del tema claro.
GL_TEXT_COLOR_LINK#27599f Usa la función indicada por el token; esta es la exportación de referencia del tema claro.
GL_BORDER_COLOR_DEFAULT#dcdbd9 Usa la función indicada por el token; esta es la exportación de referencia del tema claro.
GL_BORDER_COLOR_SUBTLE#ecebea Usa la función indicada por el token; esta es la exportación de referencia del tema claro.
GL_BORDER_COLOR_STRONG#c1bfbe Usa la función indicada por el token; esta es la exportación de referencia del tema claro.

Espaciado de la interfaz

Fuente
Nombre / ReglaValor / ConfiguraciónUso
GL_SPACING_SCALE_00pxLos valores de la escala de espaciado no se obtienen multiplicando su índice por una constante.
GL_SPACING_SCALE_10.125remLos valores de la escala de espaciado no se obtienen multiplicando su índice por una constante.
GL_SPACING_SCALE_20.25remLos valores de la escala de espaciado no se obtienen multiplicando su índice por una constante.
GL_SPACING_SCALE_30.5remLos valores de la escala de espaciado no se obtienen multiplicando su índice por una constante.
GL_SPACING_SCALE_40.75remLos valores de la escala de espaciado no se obtienen multiplicando su índice por una constante.
GL_SPACING_SCALE_51remLos valores de la escala de espaciado no se obtienen multiplicando su índice por una constante.
GL_SPACING_SCALE_61.5remLos valores de la escala de espaciado no se obtienen multiplicando su índice por una constante.
GL_SPACING_SCALE_72remLos valores de la escala de espaciado no se obtienen multiplicando su índice por una constante.
GL_SPACING_SCALE_82.5remLos valores de la escala de espaciado no se obtienen multiplicando su índice por una constante.
GL_SPACING_SCALE_93remLos valores de la escala de espaciado no se obtienen multiplicando su índice por una constante.

Escala tipográfica adaptable

Fuente
Nombre / ReglaValor / ConfiguraciónUso
GL_FONT_SIZE_1000.75remLos roles de mayor tamaño usan clamp; conserva la expresión cuando se requiera tipografía fluida.
GL_FONT_SIZE_2000.8125remLos roles de mayor tamaño usan clamp; conserva la expresión cuando se requiera tipografía fluida.
GL_FONT_SIZE_3000.875remLos roles de mayor tamaño usan clamp; conserva la expresión cuando se requiera tipografía fluida.
GL_FONT_SIZE_4001remLos roles de mayor tamaño usan clamp; conserva la expresión cuando se requiera tipografía fluida.
GL_FONT_SIZE_500clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem)Los roles de mayor tamaño usan clamp; conserva la expresión cuando se requiera tipografía fluida.
GL_FONT_SIZE_600clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem)Los roles de mayor tamaño usan clamp; conserva la expresión cuando se requiera tipografía fluida.
GL_FONT_SIZE_700clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem)Los roles de mayor tamaño usan clamp; conserva la expresión cuando se requiera tipografía fluida.
GL_FONT_SIZE_800clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem)Los roles de mayor tamaño usan clamp; conserva la expresión cuando se requiera tipografía fluida.

Radio de controles y superficies

Fuente
Nombre / ReglaValor / ConfiguraciónUso
GL_BORDER_RADIUS_NONE0pxEl radio representa la forma del componente, no la importancia de la acción.
GL_BORDER_RADIUS_XS1pxEl radio representa la forma del componente, no la importancia de la acción.
GL_BORDER_RADIUS_SM0.125remEl radio representa la forma del componente, no la importancia de la acción.
GL_BORDER_RADIUS_MD0.25remEl radio representa la forma del componente, no la importancia de la acción.
GL_BORDER_RADIUS_LG0.5remEl radio representa la forma del componente, no la importancia de la acción.
GL_BORDER_RADIUS_XL0.75remEl radio representa la forma del componente, no la importancia de la acción.
GL_BORDER_RADIUS_FULL9999pxEl radio representa la forma del componente, no la importancia de la acción.
GL_BORDER_RADIUS_DEFAULT0.25remEl radio representa la forma del componente, no la importancia de la acción.

Referencias de colores de estado

Fuente
Nombre / ReglaValor / ConfiguraciónUso
GL_COLOR_GREEN_50#e6f5ea Superficie discreta para el estado correcto.
GL_COLOR_GREEN_800#075048 Color de primer plano para el estado correcto sobre su superficie clara.
GL_COLOR_RED_50#feeef0 Superficie discreta para el estado fallido.
GL_COLOR_RED_800#891c2f Color de primer plano para el estado fallido sobre su superficie clara.
GL_COLOR_BLUE_50#e8f2fd Superficie del trabajo seleccionado.
GL_COLOR_BLUE_700#27599f Referencia del borde de selección y del foco visible.
03

Guía completa del sistema de diseño GitLab Pajamas

Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.

DESIGN-gitlab-pajamas.md

Orientación completa, un punto de partida para la implementación y enlaces al código fuente.

Descargar la guía

Arquitectura de información del pipeline del sistema de diseño GitLab Pajamas

Presenta el contexto del fallo antes de la recuperación

El encabezado identifica un pipeline ficticio, una rama y un commit para dar contexto al inspector de trabajos. Build, Test y Publish aparecen como grupos visibles, y al seleccionar un trabajo se muestra su propia salida. La comprobación fallida del enlace incluye la ruta y la condición de salida que explican el fallo antes de mostrar la acción de reintento.

De esta guía de OpenDesign

Mantén legible un gráfico compacto

Este ejemplo usa columnas por etapa y botones, en lugar de fingir que implementa un grafo completo de dependencias. En pantallas estrechas, las etapas se apilan en el orden del documento. Un pipeline de producción puede necesitar trabajos paralelos, dependencias y estados en espera, manuales y cancelados; estos deben modelarse de forma explícita, no deducirse de los tres encabezados de ejemplo.

Colores semánticos y estados del sistema de diseño GitLab Pajamas

Usa roles semánticos de la interfaz para la superficie de trabajo

La exportación del tema claro ofrece superficies neutras cálidas, distintos niveles de intensidad para el texto y bordes sutiles. El ejemplo usa la superficie predeterminada para las tarjetas de trabajo, una superficie azul para el elemento seleccionado y una región oscura para los registros. La guía enumera los valores exactos del paquete para que se pueda reproducir esta relación sin tomar muestras de píxeles de una captura de pantalla.

Haz que las etiquetas de estado comuniquen su significado

En cada fila y distintivo de trabajo se indica Passed o Failed. Un símbolo de verificación o una cruz complementa el texto; los distintivos de color por sí solos serían ambiguos. El morado de marca no se usa como indicador genérico de éxito. Las referencias de estado de la tabla están separadas intencionadamente del azul de selección.

Escala tipográfica y texto técnico del sistema de diseño GitLab Pajamas

Conserva las expresiones fluidas cuando corresponda

El paquete ofrece roles fijos para tamaños pequeños y roles de mayor tamaño basados en clamp. Sustituir un clamp por su valor máximo altera el comportamiento adaptable. El ejemplo original usa un título de 24px del tamaño habitual en aplicaciones y roles de apoyo compactos de 12–14px; estas decisiones se identifican como decisiones de diseño, no como tokens adicionales del paquete.

Usa una fuente monoespaciada para los identificadores y la salida

La rama y el commit se muestran con estilo de código, mientras que los nombres de los trabajos siguen siendo texto de interfaz legible. La salida aparece en un bloque monoespaciado con ajuste de línea y un destino de foco de teclado. Las rutas largas pueden ajustarse en varias líneas en lugar de hacer que toda la página sea más ancha que un teléfono; al cambiar la selección, se reemplaza el texto en vez de insertar HTML sin procesar.

Espaciado y ritmo de bordes del sistema de diseño GitLab Pajamas

No calcules los valores de los tokens a partir de sus números

GL_SPACING_SCALE_3 equivale a 0.5rem y scale_5 a 1rem; el índice es una clave, no un multiplicador directo. Usa el valor exportado al implementar la escala. La tabla de referencia conserva las unidades exactas, incluido el paso de cero píxeles.

Usa límites para delimitar las regiones

Selección y filtrado de trabajos en el sistema de diseño GitLab Pajamas

Mantén la identidad de la selección independiente de la posición en el filtro

El script usa identificadores de cadena estables, como links y accessibility. El filtro cambia los trabajos que aparecen en la lista y selecciona uno coincidente si lo hay. Al hacer clic en un trabajo, se actualizan a la vez su estado de pulsación, su etapa, su distintivo de estado y su registro. Así se evita mostrar el título de un trabajo junto con la salida de otro.

Conserva el contexto de recuperación cuando desaparecen los resultados

Después de simular que el trabajo fallido se completa correctamente, el filtro Failed jobs no devuelve resultados. El mensaje de estado vacío explica cómo restaurar la lista, mientras que el inspector conserva el resultado que acaba de completarse. Esta decisión intencionada permite entender por qué desapareció la fila sin perder la confirmación.

Reintento y restablecimiento del sistema de diseño GitLab Pajamas

Describe la simulación con honestidad

La acción se llama Simulate successful retry, solo modifica los datos de prueba locales y reemplaza el registro por un resultado de simulación escrito. No pone en cola ningún ejecutor, no crea ningún trabajo ni inspecciona ningún repositorio. El distintivo general del pipeline se vuelve a calcular a partir de los estados de todos los trabajos, en lugar de marcarlo como correcto a ciegas después de cualquier clic.

Restablece todos los datos de prueba iniciales

Al restablecer, se crea una copia nueva de los datos iniciales del trabajo, se selecciona el trabajo con enlace fallido, se restauran Todos los trabajos y se vuelven a renderizar ambos paneles. Se borra el resultado simulado sin recargar la página. Así, la muestra se puede repetir y se evita que un segundo visitante confunda un éxito simulado anterior con el estado inicial.

  1. Selecciona Trabajos fallidos y revisa la ruta fallida.
  2. Simula el éxito y consulta el inspector, que conserva los datos, y la lista filtrada vacía.
  3. Restablece la muestra y comprueba que vuelvan a aparecer el fallo y el resultado original.

GitLab Pajamas Controles accesibles del sistema de diseño

Usa botones para la selección local

Cada trabajo es un botón real con aria-pressed. El estado se muestra junto a la duración, y el foco visible del teclado se distingue de la apariencia seleccionada. El filtro tiene una etiqueta visible. No se atribuye navegación personalizada por el gráfico mediante teclado a estos controles sencillos.

Anuncia el resultado sin mover el foco de lectura

El resultado se escribe en una región de estado después de reintentar o restablecer. El registro es texto seleccionable y puede recibir el foco del teclado para su lectura, pero la aplicación no desplaza automáticamente el foco hacia él tras cada selección. Así, se pueden comparar trabajos repetidamente de forma predecible.

Sistema de diseño GitLab Pajamas CSS y límites de integración con Vue

Elige explícitamente un nivel de integración

Este código fuente importa la distribución publicada de CSS y proporciona un comportamiento original de HTML/JavaScript. No instancia GlButton, GlFormSelect ni otras exportaciones de Vue. Una aplicación de Vue debería usar los componentes nativos correspondientes y sus props/eventos actuales, en lugar de tratar esta implementación DOM como un ejemplo de Vue.

  • Distribución de CSS: apariencia nativa y variables semánticas.
  • HTML original: controles accesibles y estructura de regiones.
  • JavaScript original: datos de muestra, selección, filtros y simulación.

Mantén los tokens vinculados a la versión importada

Ejemplos de componentes del sistema de diseño GitLab Pajamas

index.html — espacio de trabajo de la canalización

Diseño semántico y controles completos.

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>

Referencia de código

  • Guárdalo en la raíz del proyecto Vite.

main.js — lógica de datos de muestra y recuperación

Importación nativa de CSS y comportamiento completo de los trabajos por 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();

Referencia de código

  • Guárdalo como src/main.js. No se realizan solicitudes a CI.

pajamas.css — composición original

Etapas adaptables, tarjetas seleccionadas, metadatos y salida de registro con ajuste de línea.

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

Referencia de código

  • Guárdalo como src/pajamas.css. Se especifica explícitamente una fuente alternativa del sistema; no se incluye ninguna fuente de marca de GitLab.
04

Configuración de agentes del sistema de diseño GitLab Pajamas

Punto de partida para la implementación

Esta integración importa únicamente la distribución nativa de CSS. Si adoptas sus componentes Vue, consulta por separado los requisitos de dependencias peer de 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

Una instrucción para tu proyecto

Instrucción para el agente
Crea un inspector técnico de trabajos con superficies semánticas de Pajamas, referencias reales de espaciado y tipografía, ID de trabajo estables y selección accesible. Usa el código fuente completo de los datos de muestra, conserva visible el contexto del fallo, haz comprensibles los estados vacíos de los filtros y etiqueta todas las simulaciones locales. No des a entender que CSS ni el reintento del ejemplo crean un trabajo de GitLab CI.
05

Fuentes y alcance del sistema de diseño GitLab Pajamas

OpenDesign guía de aplicación de GitLab Pajamas y @gitlab/ui 138.0.0. Los estilos del paquete nativo CSS dan formato a esta muestra original de HTML/JavaScript. La canalización es ficticia y no se invoca ningún API de GitLab, entorno de ejecución de Vue, ejecutor de CI ni acción de repositorio.