# Système de design GitLab Pajamas ## Aperçu de l’interface du système de design GitLab Pajamas Filtrez les tâches par état, sélectionnez une tâche pour consulter sa sortie, simulez la réussite de la vérification du lien en échec, puis réinitialisez les données de test d’origine. ## Référence de conception du système de design GitLab Pajamas Export publié des jetons clairs de @gitlab/ui 138.0.0 et CSS natif. Les noms GL_* sont des exports JavaScript ; leurs équivalents en minuscules --gl-* figurent dans le CSS compilé. L’exemple utilise la feuille de style native avec HTML et la logique d’état d’origine, et non des composants Vue montés. ### Surfaces, textes et bordures sémantiques | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | GL_BACKGROUND_COLOR_DEFAULT | #fff | Utilisez le rôle indiqué par le jeton ; il s’agit de l’export de référence clair. | | GL_BACKGROUND_COLOR_SUBTLE | #f7f7f5 | Utilisez le rôle indiqué par le jeton ; il s’agit de l’export de référence clair. | | GL_BACKGROUND_COLOR_STRONG | #ecebea | Utilisez le rôle indiqué par le jeton ; il s’agit de l’export de référence clair. | | GL_TEXT_COLOR_DEFAULT | #3a383d | Utilisez le rôle indiqué par le jeton ; il s’agit de l’export de référence clair. | | GL_TEXT_COLOR_SUBTLE | #646163 | Utilisez le rôle indiqué par le jeton ; il s’agit de l’export de référence clair. | | GL_TEXT_COLOR_STRONG | #18171d | Utilisez le rôle indiqué par le jeton ; il s’agit de l’export de référence clair. | | GL_TEXT_COLOR_HEADING | #18171d | Utilisez le rôle indiqué par le jeton ; il s’agit de l’export de référence clair. | | GL_TEXT_COLOR_LINK | #27599f | Utilisez le rôle indiqué par le jeton ; il s’agit de l’export de référence clair. | | GL_BORDER_COLOR_DEFAULT | #dcdbd9 | Utilisez le rôle indiqué par le jeton ; il s’agit de l’export de référence clair. | | GL_BORDER_COLOR_SUBTLE | #ecebea | Utilisez le rôle indiqué par le jeton ; il s’agit de l’export de référence clair. | | GL_BORDER_COLOR_STRONG | #c1bfbe | Utilisez le rôle indiqué par le jeton ; il s’agit de l’export de référence clair. | ### Espacement de l’interface | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | GL_SPACING_SCALE_0 | 0px | Les valeurs de l’échelle d’espacement ne correspondent pas à leur indice multiplié par une constante unique. | | GL_SPACING_SCALE_1 | 0.125rem | Les valeurs de l’échelle d’espacement ne correspondent pas à leur indice multiplié par une constante unique. | | GL_SPACING_SCALE_2 | 0.25rem | Les valeurs de l’échelle d’espacement ne correspondent pas à leur indice multiplié par une constante unique. | | GL_SPACING_SCALE_3 | 0.5rem | Les valeurs de l’échelle d’espacement ne correspondent pas à leur indice multiplié par une constante unique. | | GL_SPACING_SCALE_4 | 0.75rem | Les valeurs de l’échelle d’espacement ne correspondent pas à leur indice multiplié par une constante unique. | | GL_SPACING_SCALE_5 | 1rem | Les valeurs de l’échelle d’espacement ne correspondent pas à leur indice multiplié par une constante unique. | | GL_SPACING_SCALE_6 | 1.5rem | Les valeurs de l’échelle d’espacement ne correspondent pas à leur indice multiplié par une constante unique. | | GL_SPACING_SCALE_7 | 2rem | Les valeurs de l’échelle d’espacement ne correspondent pas à leur indice multiplié par une constante unique. | | GL_SPACING_SCALE_8 | 2.5rem | Les valeurs de l’échelle d’espacement ne correspondent pas à leur indice multiplié par une constante unique. | | GL_SPACING_SCALE_9 | 3rem | Les valeurs de l’échelle d’espacement ne correspondent pas à leur indice multiplié par une constante unique. | ### Échelle typographique adaptative | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | GL_FONT_SIZE_100 | 0.75rem | Les rôles de plus grande taille utilisent clamp ; conservez l’expression lorsque la typographie fluide est souhaitée. | | GL_FONT_SIZE_200 | 0.8125rem | Les rôles de plus grande taille utilisent clamp ; conservez l’expression lorsque la typographie fluide est souhaitée. | | GL_FONT_SIZE_300 | 0.875rem | Les rôles de plus grande taille utilisent clamp ; conservez l’expression lorsque la typographie fluide est souhaitée. | | GL_FONT_SIZE_400 | 1rem | Les rôles de plus grande taille utilisent clamp ; conservez l’expression lorsque la typographie fluide est souhaitée. | | GL_FONT_SIZE_500 | clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem) | Les rôles de plus grande taille utilisent clamp ; conservez l’expression lorsque la typographie fluide est souhaitée. | | GL_FONT_SIZE_600 | clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem) | Les rôles de plus grande taille utilisent clamp ; conservez l’expression lorsque la typographie fluide est souhaitée. | | GL_FONT_SIZE_700 | clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem) | Les rôles de plus grande taille utilisent clamp ; conservez l’expression lorsque la typographie fluide est souhaitée. | | GL_FONT_SIZE_800 | clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem) | Les rôles de plus grande taille utilisent clamp ; conservez l’expression lorsque la typographie fluide est souhaitée. | ### Rayons des commandes et des surfaces | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | GL_BORDER_RADIUS_NONE | 0px | Le rayon définit la forme du composant, et non l’importance de l’action. | | GL_BORDER_RADIUS_XS | 1px | Le rayon définit la forme du composant, et non l’importance de l’action. | | GL_BORDER_RADIUS_SM | 0.125rem | Le rayon définit la forme du composant, et non l’importance de l’action. | | GL_BORDER_RADIUS_MD | 0.25rem | Le rayon définit la forme du composant, et non l’importance de l’action. | | GL_BORDER_RADIUS_LG | 0.5rem | Le rayon définit la forme du composant, et non l’importance de l’action. | | GL_BORDER_RADIUS_XL | 0.75rem | Le rayon définit la forme du composant, et non l’importance de l’action. | | GL_BORDER_RADIUS_FULL | 9999px | Le rayon définit la forme du composant, et non l’importance de l’action. | | GL_BORDER_RADIUS_DEFAULT | 0.25rem | Le rayon définit la forme du composant, et non l’importance de l’action. | ### Références des couleurs d’état | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | GL_COLOR_GREEN_50 | #e6f5ea | Surface discrète pour un état de réussite. | | GL_COLOR_GREEN_800 | #075048 | Couleur de premier plan de l’état de réussite sur sa surface claire. | | GL_COLOR_RED_50 | #feeef0 | Surface discrète pour un état d’échec. | | GL_COLOR_RED_800 | #891c2f | Couleur de premier plan de l’état d’échec sur sa surface claire. | | GL_COLOR_BLUE_50 | #e8f2fd | Surface de la tâche sélectionnée. | | GL_COLOR_BLUE_700 | #27599f | Référence de la bordure de sélection et de l’indicateur de focus visible. | ## Guide complet du système de design GitLab Pajamas Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Architecture de l’information du pipeline du système de design GitLab Pajamas ### Présentez le contexte de l’échec avant les options de reprise > L’en-tête indique un pipeline, une branche et un commit fictifs pour contextualiser le panneau d’inspection des tâches. Les regroupements Build, Test et Publish sont visibles, et la sélection d’une tâche ouvre sa sortie. Pour la vérification de lien en échec, indiquez le chemin et la condition de sortie qui expliquent l’échec avant de proposer une nouvelle tentative. ### Préservez la lisibilité d’un graphe compact Cet exemple utilise des colonnes par étape et des boutons, sans prétendre mettre en œuvre un graphe de dépendances complet. Sur un écran étroit, les étapes s’empilent dans l’ordre du document. Un pipeline de production peut nécessiter des tâches parallèles, des dépendances, ainsi que des états d’attente, manuels ou annulés ; ceux-ci doivent être modélisés explicitement plutôt que déduits des trois titres d’exemple. ## Couleurs sémantiques et états du système de design GitLab Pajamas ### Utilisez des rôles d’interface sémantiques pour la surface de travail L’export clair propose des surfaces neutres chaudes, des niveaux de contraste distincts pour les textes et des bordures discrètes. L’exemple utilise la surface par défaut pour les cartes des tâches, une surface bleue pour la sélection et une zone de journal sombre. Le guide indique les valeurs exactes du package afin de reproduire ces relations sans prélever les couleurs d’une capture d’écran. ### Donnez du sens aux libellés d’état Les mots Réussie et Échec figurent dans chaque ligne de tâche et chaque badge. Une coche ou une croix complète ce texte ; des badges colorés seuls seraient ambigus. Le violet de la marque n’est pas utilisé comme indicateur générique de réussite. Les références d’état du tableau sont volontairement distinctes du bleu de sélection. ## Échelle typographique et texte technique du système de design GitLab Pajamas ### Conservez les expressions fluides lorsqu’elles s’appliquent Le package expose des rôles de petite taille fixes et des rôles de plus grande taille basés sur clamp. Remplacer un clamp par sa valeur maximale modifie le comportement adaptatif. L’exemple d’origine utilise un titre de 24px à l’échelle de l’application et des rôles secondaires compacts de 12–14px ; ces choix sont présentés comme des décisions de mise en page, et non comme des jetons supplémentaires du package. ### Utilisez une police à chasse fixe pour les identifiants et les sorties La branche et le commit sont présentés en style code, tandis que les noms des tâches restent lisibles dans l’interface. La sortie apparaît dans un bloc à chasse fixe avec retour à la ligne et cible de focus clavier. Les chemins longs peuvent revenir à la ligne au lieu d’élargir toute la page au-delà de la largeur d’un téléphone. Lorsqu’une autre tâche est sélectionnée, le texte est remplacé plutôt que d’injecter du HTML brut. ## Espacement et rythme des bordures du système de design GitLab Pajamas ### Ne calculez pas les valeurs des jetons à partir de leur indice GL_SPACING_SCALE_3 vaut 0.5rem et scale_5 vaut 1rem ; l’indice est une clé, pas un multiplicateur direct. Utilisez la valeur exportée lors de l’implémentation de l’échelle. Le tableau de référence conserve les unités exactes, y compris le pas de zéro pixel. ### Utilisez les séparations pour clarifier les zones Une bordure claire sépare l’en-tête de l’espace de travail de la barre d’outils, tandis qu’une bordure plus marquée encadre le panneau d’inspection des sorties. Les boutons des tâches ont leur propre bordure de sélection. La distinction entre ces limites indique clairement quel élément est sélectionné, sans entourer chaque ligne de métadonnées d’un cadre supplémentaire. ## Sélection et filtrage des tâches du système de design GitLab Pajamas ### Dissociez l’identité de la tâche sélectionnée de sa position dans le filtre Le script utilise des identifiants textuels stables comme links et accessibility. Le filtre détermine les tâches affichées et sélectionne une tâche correspondante, s’il y en a une. Un clic sur une tâche met à jour ensemble son état enfoncé, son étape, son badge d’état et son journal. Cela évite d’afficher le titre d’une tâche avec la sortie d’une autre. ### Conservez le contexte de reprise lorsque le résultat disparaît Une fois la tâche échouée simulée comme réussie, le filtre « Tâches échouées » ne renvoie aucun résultat. Le message d’état vide explique comment rétablir la liste, tandis que l’inspecteur conserve le résultat qui vient d’être obtenu. Ce choix délibéré permet à l’utilisateur de comprendre pourquoi la ligne a disparu, sans perdre la confirmation. ## Système de design GitLab Pajamas : relancer et réinitialiser ### Présentez clairement la simulation L’action indique « Simuler une relance réussie », modifie uniquement les données locales de démonstration et remplace le journal par le résultat écrit d’une simulation. Elle ne met pas de tâche en file d’attente, ne crée pas de tâche et n’inspecte aucun dépôt. Le badge global du pipeline est recalculé à partir de l’état de toutes les tâches, au lieu de passer aveuglément à « Réussi » après un clic. ### Rétablissez les données initiales complètes La réinitialisation crée une nouvelle copie des données initiales des tâches, sélectionne la tâche de liaison en échec, rétablit le filtre « Toutes les tâches » et affiche à nouveau les deux panneaux. Elle efface le résultat simulé sans recharger la page. L’exemple peut ainsi être reproduit, et les personnes qui le consultent ensuite ne risquent pas de prendre une réussite simulée antérieure pour l’état initial. 1. Sélectionnez « Tâches échouées » et consultez la route en échec. 2. Simulez la réussite et consultez l’inspecteur qui conserve le résultat ainsi que la liste filtrée vide. 3. Réinitialisez l’exemple et vérifiez que l’échec et la sortie d’origine sont rétablis. ## Système de design GitLab Pajamas : commandes de tâches accessibles ### Utilisez des boutons pour la sélection locale Chaque tâche est un véritable bouton doté de aria-pressed. Son état est indiqué à côté de sa durée, et l’indicateur de focus visible au clavier reste distinct de son apparence lorsqu’elle est sélectionnée. Le filtre possède une étiquette visible. Aucune navigation graphique personnalisée réservée au clavier n’est revendiquée pour ces commandes simples. ### Annoncez le résultat sans déplacer le focus Le résultat est annoncé dans une région d’état après une relance ou une réinitialisation. Le journal contient du texte sélectionnable et peut recevoir le focus clavier pour être lu, mais l’application ne lui transfère pas automatiquement le focus après chaque sélection. Les comparaisons répétées entre les tâches restent ainsi prévisibles. ## Système de design GitLab Pajamas : CSS et limites de l’intégration Vue ### Choisissez explicitement un niveau d’intégration Ce code source importe la distribution publiée de CSS et fournit un comportement original en HTML/JavaScript. Il n’instancie ni GlButton, ni GlFormSelect, ni aucun autre export Vue. Une application Vue doit utiliser les composants natifs correspondants et leurs props/événements actuels, plutôt que de considérer cette implémentation DOM comme un exemple Vue. - Distribution de CSS : apparence native et variables sémantiques. - HTML d’origine : commandes accessibles et structure des régions. - JavaScript d’origine : données de démonstration, sélection, filtres et simulation. ### Associez les jetons à la version importée Les valeurs de référence proviennent du même package 138.0.0 que celui utilisé dans l’aperçu. Les évolutions futures des jetons et des composants doivent être examinées ensemble. Le code source complet ci-dessous comprend la composition CSS d’origine et la logique des données de démonstration ; le guide téléchargé contient donc tout le nécessaire pour reproduire le comportement présenté. ## Système de design GitLab Pajamas : exemples de composants ### index.html — espace de travail du pipeline Mise en page sémantique et commandes complètes. ``` 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


      
      

    

  

  





```

Référence du code

- Enregistrez à la racine du projet Vite.

### main.js — données de démonstration et logique de reprise

Import natif de CSS et comportement complet des tâches par étape.

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

Référence du code

- Enregistrez sous src/main.js. Aucune requête CI n’est effectuée.

### pajamas.css — composition d’origine

Étapes adaptatives, cartes sélectionnées, métadonnées et sortie du journal avec retour à la ligne.

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

Référence du code

- Enregistrez sous src/pajamas.css. La police système de remplacement est explicitement définie ; aucune police de marque GitLab n’est fournie.

## Système de design GitLab Pajamas : configuration de l’agent

### Point de départ de l’implémentation

Cette intégration importe uniquement la distribution native de CSS. Si vous adoptez les composants Vue de GitLab UI, respectez séparément les exigences de dépendances homologues 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
```

### Un prompt pour votre projet

```
Créez un inspecteur technique de tâches à l’aide des surfaces sémantiques de Pajamas, de références réelles d’espacement et de typographie, d’identifiants de tâche stables et d’une sélection accessible. Utilisez l’intégralité du code source des données de démonstration, conservez le contexte visible de l’échec, rendez les états vides après filtrage compréhensibles et indiquez clairement toute simulation locale. Ne laissez pas entendre que CSS ou l’exemple de relance crée une tâche GitLab CI.
```

## Système de design GitLab Pajamas : sources et périmètre

Guide d’application OpenDesign pour GitLab Pajamas et @gitlab/ui 138.0.0. Le package natif CSS met en forme cet exemple original en HTML/JavaScript. Le pipeline est fictif et aucun API GitLab, environnement d’exécution Vue, exécuteur CI ou opération sur un dépôt n’est invoqué.

- Recommandations sur les couleurs de Pajamas Rôles de l’interface et signification des états.

- Boutons Pajamas Hiérarchie des actions et comportement des boutons.

- Export des jetons épinglés Valeurs de référence exactes pour 138.0.0.

- Source officielle Dépôt source de Pajamas et GitLab UI.

## Système de design GitLab Pajamas : ressources associées

### HPE Grommet

Modélisez une réservation de capacité avec les primitives de mise en page de Grommet, des champs de formulaire contrôlés et des jauges numériques. Utilisez délibérément l’échelle du thème et distinguez le thème de base Grommet du thème HPE installé séparément.

### Infor système de design

Composez un formulaire de maintenance d’entreprise avec les véritables états de saisie IDS, des alias de thème et un identifiant de ressource exact. Examinez les tokens du thème public actuel, un package Web Components épinglé et un flux de brouillon local avec validation et réinitialisation.

### Kajabi Sage

Créez un panneau de partage destiné aux créateurs, avec un contexte de cours facile à comprendre, des actions de copie claires et un retour honnête sur le presse-papiers. Découvrez l’anatomie des composants Rails de Sage, ses spécifications typographiques publiées et la couche de tokens Pine, plus récente et chargée depuis l’extérieur.


- [Référence de mise en œuvre](https://design.gitlab.com/)
- [Source](https://cdn.jsdelivr.net/npm/@gitlab/ui@138.0.0/dist/tokens/build/js/tokens.js)
- [Référence du code](https://design.gitlab.com/)
- [Recommandations sur les couleurs de Pajamas Rôles de l’interface et signification des états.](https://design.gitlab.com/product-foundations/color/)
- [Boutons Pajamas Hiérarchie des actions et comportement des boutons.](https://design.gitlab.com/components/button/)
- [Export des jetons épinglés Valeurs de référence exactes pour 138.0.0.](https://cdn.jsdelivr.net/npm/@gitlab/ui@138.0.0/dist/tokens/build/js/tokens.js)
- [Source officielle Dépôt source de Pajamas et GitLab UI.](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com)