# Sistema de diseño GitLab Pajamas ## 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. ## 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 | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | GL_BACKGROUND_COLOR_DEFAULT | #fff | Usa 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 | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | GL_SPACING_SCALE_0 | 0px | Los valores de la escala de espaciado no se obtienen multiplicando su índice por una constante. | | GL_SPACING_SCALE_1 | 0.125rem | Los valores de la escala de espaciado no se obtienen multiplicando su índice por una constante. | | GL_SPACING_SCALE_2 | 0.25rem | Los valores de la escala de espaciado no se obtienen multiplicando su índice por una constante. | | GL_SPACING_SCALE_3 | 0.5rem | Los valores de la escala de espaciado no se obtienen multiplicando su índice por una constante. | | GL_SPACING_SCALE_4 | 0.75rem | Los valores de la escala de espaciado no se obtienen multiplicando su índice por una constante. | | GL_SPACING_SCALE_5 | 1rem | Los valores de la escala de espaciado no se obtienen multiplicando su índice por una constante. | | GL_SPACING_SCALE_6 | 1.5rem | Los valores de la escala de espaciado no se obtienen multiplicando su índice por una constante. | | GL_SPACING_SCALE_7 | 2rem | Los valores de la escala de espaciado no se obtienen multiplicando su índice por una constante. | | GL_SPACING_SCALE_8 | 2.5rem | Los valores de la escala de espaciado no se obtienen multiplicando su índice por una constante. | | GL_SPACING_SCALE_9 | 3rem | Los valores de la escala de espaciado no se obtienen multiplicando su índice por una constante. | ### Escala tipográfica adaptable | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | GL_FONT_SIZE_100 | 0.75rem | Los roles de mayor tamaño usan clamp; conserva la expresión cuando se requiera tipografía fluida. | | GL_FONT_SIZE_200 | 0.8125rem | Los roles de mayor tamaño usan clamp; conserva la expresión cuando se requiera tipografía fluida. | | GL_FONT_SIZE_300 | 0.875rem | Los roles de mayor tamaño usan clamp; conserva la expresión cuando se requiera tipografía fluida. | | GL_FONT_SIZE_400 | 1rem | Los roles de mayor tamaño usan clamp; conserva la expresión cuando se requiera tipografía fluida. | | GL_FONT_SIZE_500 | clamp(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_600 | clamp(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_700 | clamp(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_800 | clamp(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 | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | GL_BORDER_RADIUS_NONE | 0px | El radio representa la forma del componente, no la importancia de la acción. | | GL_BORDER_RADIUS_XS | 1px | El radio representa la forma del componente, no la importancia de la acción. | | GL_BORDER_RADIUS_SM | 0.125rem | El radio representa la forma del componente, no la importancia de la acción. | | GL_BORDER_RADIUS_MD | 0.25rem | El radio representa la forma del componente, no la importancia de la acción. | | GL_BORDER_RADIUS_LG | 0.5rem | El radio representa la forma del componente, no la importancia de la acción. | | GL_BORDER_RADIUS_XL | 0.75rem | El radio representa la forma del componente, no la importancia de la acción. | | GL_BORDER_RADIUS_FULL | 9999px | El radio representa la forma del componente, no la importancia de la acción. | | GL_BORDER_RADIUS_DEFAULT | 0.25rem | El radio representa la forma del componente, no la importancia de la acción. | ### Referencias de colores de estado | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | 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. | ## 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. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## 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. ### 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 Un borde claro separa el encabezado del espacio de trabajo de la barra de herramientas, mientras que un límite más marcado delimita la tarjeta del inspector de salida. Los botones de trabajo tienen su propio borde de selección. Mantener diferenciados estos límites deja claro qué objeto está seleccionado, sin encerrar cada línea de metadatos en otra caja. ## 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 Los valores de referencia proceden del mismo paquete 138.0.0 que se usa en la vista previa. Los cambios futuros de tokens y componentes deben revisarse conjuntamente. El código fuente completo de abajo incluye la composición original de CSS y la lógica de datos de muestra, así que la guía descargada contiene todo lo necesario para recrear el comportamiento mostrado. ## 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. ``` Pipeline specimen

sample-team / documentation

Pipeline #1842

Preview build for docs/update-navigation · 7c31a82

Failed

Stage
Runner
local-example-runner
Execution
Simulated in this page

Job output


      
      

    

  

  





```

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.

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

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

## 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.

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

### Una instrucción para tu proyecto

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

## 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.

- Guía de color de Pajamas Funciones de la interfaz y significado de los estados.

- Botones de Pajamas Jerarquía de acciones y comportamiento de los botones.

- Exportación de tokens fijada Valores de referencia exactos de 138.0.0.

- Fuente oficial Repositorio de código fuente de Pajamas y GitLab UI.

## Recursos relacionados con el sistema de diseño GitLab Pajamas

### HPE Grommet

Modela una reserva de capacidad con las primitivas de diseño de Grommet, campos de formulario controlados e indicadores numéricos. Usa deliberadamente la escala del tema y distingue el tema base de Grommet del tema de HPE, que se instala por separado.

### Infor sistema de diseño

Crea un formulario de mantenimiento empresarial con estados reales de entrada de IDS, alias de tema y un identificador de recurso exacto. Inspecciona los tokens del tema público actual, un paquete de Web Components fijado en una versión concreta y un flujo local de borradores con validación y restablecimiento.

### Kajabi Sage

Crea un panel para compartir dirigido a creadores, con contexto claro del curso, acciones de copia evidentes y mensajes fiables sobre el portapapeles. Explora la anatomía de los componentes Rails de Sage, sus especificaciones tipográficas publicadas y la capa de tokens Pine, más reciente y cargada externamente.


- [Referencia de implementación](https://design.gitlab.com/)
- [Fuente](https://cdn.jsdelivr.net/npm/@gitlab/ui@138.0.0/dist/tokens/build/js/tokens.js)
- [Referencia de código](https://design.gitlab.com/)
- [Guía de color de Pajamas Funciones de la interfaz y significado de los estados.](https://design.gitlab.com/product-foundations/color/)
- [Botones de Pajamas Jerarquía de acciones y comportamiento de los botones.](https://design.gitlab.com/components/button/)
- [Exportación de tokens fijada Valores de referencia exactos de 138.0.0.](https://cdn.jsdelivr.net/npm/@gitlab/ui@138.0.0/dist/tokens/build/js/tokens.js)
- [Fuente oficial Repositorio de código fuente de Pajamas y GitLab UI.](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com)