# Codex-Designsystem

## Vorschau der Codex-Designsystemoberfläche

Durchsuche drei eigens erstellte Beispiele, öffne ein Ergebnis, schließe es wieder oder probiere eine Suchanfrage ohne Treffer aus.

## Designreferenz zum Codex-Designsystem

@wikimedia/codex 2.7.0 mit nativem CSS und aktueller offizieller Token-/Komponentenreferenz. Die eigenständige Vorschau verwendet die dokumentierte Route ausschließlich mit CSS; Inhaltsbreite und Layout des Ergebnisbereichs werden von der Anwendung festgelegt.

### Schriftrollen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| font-family-base | sans-serif | Basisrolle für Dokumente und Steuerelemente. |
| font-family-heading-main | Linux Libertine, Georgia, Times, Source Serif 4, serif | Spezielle Rolle für die erste Überschrift mit lokalen Fallbacks. |
| font-size-small / medium / large | 0.875rem / 1rem / 1.125rem | Unterstützender Text, Standardtext und größerer Text. |
| line-height-medium | 1.625rem | Zeilenhöhen-Token für Komponenten und Funktionen. |
| line-height-content | 1.625 | Einheitenlose Rolle für nutzergenerierte Inhalte. |
### Abstände

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| spacing-25 / 50 / 75 | 4px / 8px / 12px | Kompakte Abstände. |
| spacing-100 / 150 / 200 | 16px / 24px / 32px | Standardmäßiger Layout-Rhythmus. |
| spacing-30 | 5px | Dokumentierte Ausnahme für das vertikale Standard-Padding von Steuerelementen. |
| spacing-horizontal-button | 12px − 1px | Berücksichtigt den Button-Rahmen. |
### Ansichtsfenster und Steuerelemente

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Mobile / tablet minima | 320px / 640px | Grenzwerte für das Ansichtsfenster. |
| Desktop / desktop-wide minima | 1120px / 1680px | Grenzwerte für größere Ansichtsfenster. |
| Button small / medium / large | 24px / 32px / 44px minimum | Verwende large, wenn der Touch-Kontext es erfordert; die Größen stammen aus der Button-Dokumentation. |
### Kompilierte Standard-Farb-Fallbacks

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| color-base | #202122 | Standardtext mit gut lesbarem Kontrast. |
| color-progressive | #36c | Farbe für fortschreitende Aktionen; kein Status für jeden Datensatz. |
## Codex-Designsystem – Vollständiger Leitfaden

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

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

## Codex-Designsystem: ausschließlich CSS und Vue-Routen

### Wähle die benötigte Implementierung

> Codex stellt Vue-Komponenten und dokumentierte Komponentenstrukturen bereit, die ausschließlich CSS verwenden. Das interaktive Beispiel nutzt Letztere: Das Suchsteuerelement verwendet exakt die von Codex dokumentierten Wrapper-, Texteingabe- und End-Button-Klassen. Ein lokales Anwendungsskript filtert drei eigens verfasste Artikelzusammenfassungen. Das separate Vue-Beispiel zeigt die entsprechenden Paketimporte.

Eine Suche, die ausschließlich CSS verwendet, wird nicht allein dadurch zu einer prädiktiven Combobox, dass sie einer solchen ähnelt. Dieses Beispiel übermittelt eine Suchanfrage und zeigt eine Ergebnisliste an. Es verwendet weder das ARIA-Listbox-Muster noch erhebt es den Anspruch, TypeaheadSearch zu implementieren.

Unterstützende Spezifikation lesen

## Codex-Designsystem: Typografie für Texte

### Rollen für Inhalte und Steuerelemente klar trennen

Das Token font-family-base wird zu sans-serif aufgelöst; der verfügbare System-Sans-Stack ist eine separate Rolle. Codex stellt außerdem die Serifenschriftrolle heading-main bereit, die auf Linux Libertine basiert und Georgia, Times sowie weitere Fallbacks umfasst. Die Vorschau verwendet eine Serifenschrift für die Artikelüberschrift und serifenlose Schrift für Steuerelemente, ohne Schriftarten herunterzuladen.

Die folgende Referenz unterscheidet font-size-medium mit 1rem von line-height-medium mit 1.625rem. Der einheitenlose Wert line-height-content ist für nutzergenerierte Inhalte vorgesehen. Er ist keine pauschale Aufforderung, die interne Zeilenhöhe jeder Komponente zu ersetzen. Überlasse nativen Eingabe- und Button-Komponenten von CSS ihre eigenen Steuerelement-Metriken.

Unterstützende Spezifikation lesen

## Codex-Designsystem: Abstände und Breakpoints

### Die benannte Skala und ihre Ausnahmen verwenden

Bei Codex entsprechen spacing-100 16px, spacing-150 24px und spacing-200 32px. Die Skala enthält auch ausdrücklich festgelegte Ausnahmen: spacing-30 entspricht 5px und ermöglicht vertikales Padding bei Steuerelementen mit der Standardhöhe von 32px. Würde jeder Abstand auf ein 8px-Raster gerundet, ginge eine dokumentierte Komponentenentscheidung verloren.

Im Beispiel nimmt die Ergebnisliste unterhalb von 640px die volle Breite ein und nutzt damit den dokumentierten Tablet-Grenzwert. Die maximale Lesebreite von 56rem wurde für die Anwendung festgelegt. Der Desktop-Breakpoint liegt bei 1120px, desktop-wide bei 1680px. Diese Schwellenwerte beschreiben Ansichtsfenster-Kategorien und stellen kein automatisches Raster für jede Anwendung bereit.

Unterstützende Spezifikation lesen

## Codex-Designsystem: Farben und Aktionsrollen

### Progressive ist keine allgemeine blaue Dekoration

Codex unterscheidet zwischen Aktionen und der Gewichtung von Buttons. Eine progressive Aktion bringt einen Prozess voran, während die primäre Gewichtung die Hauptaktion in der jeweiligen Ansicht kennzeichnet. Ein neutraler Button mit normaler Gewichtung eignet sich für die Suche in diesem lokalen Index; ein dezentes Steuerelement kann die Suche löschen, ohne mit den Ergebnissen zu konkurrieren.

Das kompilierte CSS enthält Fallback-Farben für seine benutzerdefinierten Eigenschaften, darunter den Basistextfarbwert #202122 und den Farbwert progressive #36c. Für diese Zustände verwendet die Vorschau native Komponenten von CSS. Der blasse Hintergrund des Ergebnisbereichs gehört zum Anwendungs-Layout und ist kein neu erfundenes Status-Token von Codex.

Unterstützende Spezifikation lesen

## Codex-Designsystem: Aufbau von SearchInput

### Eingabe und Button bewusst verbinden

Die ausschließlich CSS verwendende Struktur erfordert .cdx-search-input--has-end-button am Root-Element, einen .cdx-search-input__input-wrapper, ein .cdx-text-input mit dessen start-icon-Modifikator sowie einen Button mit .cdx-search-input__end-button. Ohne die Wrapper gehen die verbundene Form und die Ausrichtung des Icons verloren.

Die sichtbare Beschriftung benennt den Suchbereich. Das Icon-Span ist dekorativ und wird vor Barrierefreiheits-APIs verborgen. Ein gemeinsamer Submit-Listener verarbeitet sowohl die Eingabetaste als auch die Button-Aktivierung. Die Anzahl wird nach der Aktualisierung der Ergebnisse über eine höfliche Statusregion angekündigt. Bei leerer Eingabe werden alle lokalen Beispiele wieder angezeigt.

- Verwende SearchInput, um Inhalte auf einer Seite zu finden.

- Verwende TypeaheadSearch, wenn prädiktive Navigationsvorschläge erforderlich sind.

- Verwende Lookup, wenn eine Option als Formularwert ausgewählt werden soll.

Unterstützende Spezifikation lesen

## Codex-Designsystem: Ergebnisse und Detailansicht

### Die Leseposition erhalten

Jedes Ergebnis enthält eine benannte Überschrift, eine kurze, eigens verfasste Beschreibung und einen Button, der die lokale Leseansicht öffnet. Diese Ansicht ist eine Zusammenstellung der Anwendung und kein Codex Dialog: Sie bleibt im normalen Dokumentfluss, hat keinen modalen Hintergrund und fängt den Fokus nicht ab.

Beim Öffnen eines Beispiels wird der Fokus auf die Überschrift der Leseansicht gesetzt. Beim Schließen kehrt der Fokus zum Button zurück, der sie geöffnet hat. Eine erneute Suche schließt die vorherige Detailansicht und berechnet die Ergebnisanzahl neu. So wirkt kein veralteter Artikel, als gehöre er zur neuen Suchanfrage. Bei einer Suche ohne Treffer werden ein sichtbarer Erklärungstext und eine explizite Aktion zum Löschen angezeigt.

Unterstützende Spezifikation lesen

## Codex-Designsystem: Schreibrichtung und Eingabeverhalten

### Auch Sprachen jenseits des Englischen berücksichtigen

Die Komponentendokumentation enthält Beispiele für Schreibrichtungen von links nach rechts und von rechts nach links. Codex wird in einem mehrsprachigen Wissensökosystem verwendet. Das Anwendungs-Layout sollte daher logische Inline- und Block-Abstände nutzen, statt anzunehmen, dass jedes Icon und jede Leseaktion links steht. Im eigenen Layout des Beispiels kommen margin-inline und padding-inline zum Einsatz, wenn die Schreibrichtung relevant ist.

Die Suche wird erst beim Absenden ausgeführt. So wird Text während einer laufenden IME-Komposition nicht fälschlich als abgeschlossene Suchanfrage behandelt. Eine Autovervollständigung für den Produktiveinsatz müsste Eingaben während der Komposition berücksichtigen, asynchrone Vorgänge abbrechen und ein korrektes Interaktionsmodell für Menüs umsetzen. Das lokale Beispiel, das ausschließlich CSS verwendet, erhebt bewusst keinen Anspruch auf diese Funktionen.

Unterstützende Spezifikation lesen

## Codex-Designsystem integrieren und erweitern

### Die Bibliotheksversion festlegen und die Ergebnislogik selbst umsetzen

Das verifizierte Paket ist @wikimedia/codex 2.7.0 und stellt dist/codex.style.css als Stylesheet-Einstiegspunkt bereit. Die Demo, die ausschließlich CSS verwendet, benötigt keine Vue-Laufzeitumgebung, da alle Steuerelemente native HTML sind und ein kleines lokales Skript die Filterung und den Status des Lesebereichs verwaltet. Die Vue-Variante importiert CdxSearchInput und CdxButton, wenn ein durch das Framework verwalteter Status sinnvoll ist.

Das Codepaket steht unter GPL-2.0-or-later, und die Lizenz liegt den lokalen Assets bei. Die Beispiele übernehmen weder die Wikipedia-Identität noch Artikelinhalte. Bevor ein tatsächlicher Suchendpunkt angebunden wird, sollten Netzwerkfehler, Ladezustand und veraltete Antworten separat behandelt werden, statt den lokalen Status für leere Ergebnisse umzubenennen.

1. Installieren Sie das festgelegte Paket oder kopieren Sie dessen Stylesheet samt Lizenz.

2. Geben Sie die dokumentierte Struktur aus, die ausschließlich CSS verwendet, oder nutzen Sie die exportierten Vue-Komponenten.

3. Binden Sie Abfrage- und Ergebnislogik in der Anwendung ein und bewahren Sie die Suchsemantik.

4. Prüfen Sie den Tastaturfokus und schmale Layouts mit tatsächlich übersetzten Inhalten.

Unterstützende Spezifikation lesen

## Komponentenbeispiele für das Codex-Designsystem

### Suche mit sichtbarer Beschriftung, die ausschließlich CSS verwendet

Dokumentierte Wrapper-Struktur mit nativer Formularübermittlung.

```
<form id="article-search" role="search">
  <label for="query">Find an example article</label>
  <div class="cdx-search-input cdx-search-input--has-end-button">
    <div class="cdx-search-input__input-wrapper">
      <div class="cdx-text-input cdx-text-input--has-start-icon">
        <input id="query" class="cdx-text-input__input" type="search">
        <span class="cdx-text-input__icon cdx-text-input__start-icon" aria-hidden="true"></span>
      </div>
    </div>
    <button type="submit" class="cdx-button cdx-search-input__end-button">Search</button>
  </div>
</form>
<p id="result-count" role="status"></p>
```

Code-Referenz

### Zusammenstellung der Vue-Suche

Echte Codex-Importe und Vue-Status; die lokal ausgegebene Suchanfrage veranschaulicht die Integrationsgrenze.

```
<script setup>
import { ref } from 'vue';
import { CdxSearchInput, CdxButton } from '@wikimedia/codex';
import '@wikimedia/codex/dist/codex.style.css';
const query = ref('');
const submitted = ref('');
function search() { submitted.value = String(query.value).trim(); }
</script>
<template>
  <form role="search" @submit.prevent="search">
    <CdxSearchInput v-model="query" aria-label="Find an example article" />
    <CdxButton action="progressive" weight="primary" type="submit">Search</CdxButton>
  </form>
  <p role="status">Submitted query: {{ submitted || 'All examples' }}</p>
</template>
```

Code-Referenz

### Vollständiges eigenständiges Beispiel

Das vollständige Dokument enthält Layout, Steuerelemente und Initialisierung. Entpacken Sie das verknüpfte Beispielarchiv, um die exakten relativen Vendor-Assets zu erhalten, und stellen Sie es anschließend über HTTP bereit.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Codex knowledge search</title><link rel="stylesheet" href="vendor/codex-2.7.0/codex.style.css"><style>*{box-sizing:border-box}body{font:16px/1.625 sans-serif;color:#202122;margin:0}main{max-width:56rem;margin:auto;padding:32px 24px}h1{font:normal 32px/1.3 Georgia,serif;border-bottom:1px solid #a2a9b1;padding-bottom:12px}h2{font-size:20px;margin:0 0 8px}label{display:block;font-weight:700;margin-bottom:8px}.top{font-size:14px;color:#54595d}.result{padding:24px 0;border-bottom:1px solid #c8ccd1}.result p{margin:8px 0 16px}.tools{display:flex;align-items:center;gap:16px;justify-content:space-between}.reading{padding:24px;background:#f8f9fa;border:1px solid #a2a9b1;margin-block:24px}.reading h2:focus{outline:2px solid #36c;outline-offset:4px}small{display:block;margin-top:32px;color:#54595d;font-size:14px}[hidden]{display:none!important}@media(max-width:639px){main{padding:24px 16px}.tools{align-items:stretch;flex-direction:column}.result .cdx-button{width:100%}}
</style><main><p class="top">Independent knowledge index · Codex CSS-only</p><h1>Explore the example collection</h1><p>Find an original topic summary and open its reading panel. This small index runs entirely in your browser.</p><form id="article-search" role="search">
  <label for="query">Find an example article</label>
  <div class="cdx-search-input cdx-search-input--has-end-button">
    <div class="cdx-search-input__input-wrapper">
      <div class="cdx-text-input cdx-text-input--has-start-icon">
        <input id="query" class="cdx-text-input__input" type="search">
        <span class="cdx-text-input__icon cdx-text-input__start-icon" aria-hidden="true"></span>
      </div>
    </div>
    <button type="submit" class="cdx-button cdx-search-input__end-button">Search</button>
  </div>
</form>
<p id="result-count" role="status"></p><div class="tools"><p id="empty" hidden>No matching topics. Try “river” or clear the search.</p><button type="button" class="cdx-button cdx-button--weight-quiet" id="clear">Clear search</button></div><div id="results"></div><section class="reading" id="reading" hidden><h2 id="reading-title" tabindex="-1"></h2><p id="reading-text"></p><button type="button" class="cdx-button" id="close">Close reading panel</button></section><small>Original example content. Wikimedia Codex 2.7.0 controls; application-owned results and inline panel. No external search request.</small></main><script>
const data=[{title:'River observation notes',text:'A field notebook can record water level, weather and observation time together. Repeated observations from the same location help readers compare conditions without confusing a new measurement with a changed method.',summary:'Organising repeated observations at a river station.'},{title:'Community archive descriptions',text:'An archive description records what an item is, when it was created and how it relates to other items. A clear description distinguishes an original document from a later copy and identifies uncertain dates without hiding that uncertainty.',summary:'Describing original documents and their context.'},{title:'Garden seed collection',text:'A seed record can distinguish the plant name, collection date and storage method. Keeping those attributes separate makes it easier to compare batches, while a free-text note preserves observations that do not fit a controlled field.',summary:'Keeping plant, date and storage information readable.'}];let opener;const results=document.querySelector('#results'),query=document.querySelector('#query'),reading=document.querySelector('#reading'),count=document.querySelector('#result-count');function render(){reading.hidden=true;results.replaceChildren();const found=data.filter(d=>(d.title+' '+d.summary).toLowerCase().includes(query.value.trim().toLowerCase()));count.textContent=found.length+' example topics';document.querySelector('#empty').hidden=found.length>0;for(const d of found){let a=document.createElement('article');a.className='result';let h=document.createElement('h2');h.textContent=d.title;let p=document.createElement('p');p.textContent=d.summary;let b=document.createElement('button');b.type='button';b.className='cdx-button';b.textContent='Read '+d.title;b.onclick=()=>{opener=b;document.querySelector('#reading-title').textContent=d.title;document.querySelector('#reading-text').textContent=d.text;reading.hidden=false;document.querySelector('#reading-title').focus()};a.append(h,p,b);results.append(a)}}document.querySelector('form').onsubmit=e=>{e.preventDefault();render()};document.querySelector('#clear').onclick=()=>{query.value='';render();query.focus()};document.querySelector('#close').onclick=()=>{reading.hidden=true;opener?.focus()};render();
</script></html>
```

Code-Referenz

- Laden Sie das vollständige Beispiel unter Sources herunter. Die README enthält den genauen lokalen Startbefehl.

- Behalten Sie die Vendor-Pfade relativ zu diesem Dokument bei. Das Archiv enthält alle Assets, die in dieser Vorschau verwendet werden.

## Einrichtung des Codex-Designsystem-Agenten

### Ausgangspunkt für die Implementierung

Das native Stylesheet wurde lokal in der eigenständigen Vorschau verifiziert. Der Vue-Code ist ein separates Integrationsbeispiel und nicht die Laufzeitumgebung dieser Vorschau. Das vollständige ZIP mit dem funktionsfähigen Beispiel unter „Quellen“ enthält außerdem die exakten Abhängigkeiten der Vorschau und das vollständige Dokument. Entpacken Sie es, führen Sie in diesem Verzeichnis python3 -m http.server 8080 aus und öffnen Sie anschließend http://localhost:8080/wikimedia-codex.html. Öffnen Sie Beispiele mit Modulen nicht über file://.

```
npm install @wikimedia/codex@2.7.0
# CSS-aware entry for CSS-only HTML:
# import '@wikimedia/codex/dist/codex.style.css';
# For the Vue example, add Vue to the existing Vue application:
# import { CdxSearchInput, CdxButton } from '@wikimedia/codex';
```

### Ein Prompt für dein Projekt

```
Erstellen Sie mit SearchInput und Schaltflächen, die ausschließlich CSS aus Codex 2.7.0 verwenden, einen lokalen Wissensindex. Behalten Sie die dokumentierten Wrapper für Endschaltflächen, eine explizite Suchbeschriftung und die native Formularübermittlung bei. Zeigen Sie die Anzahl der Ergebnisse, eine Meldung bei keinen Treffern und eine Aktion zum Leeren der Suche an. Öffnen Sie Ergebnisdetails inline, setzen Sie den Fokus auf deren Überschrift und geben Sie beim Schließen den Fokus an die auslösende Schaltfläche zurück. Behaupten Sie weder TypeaheadSearch- noch Modal-Semantik. Verwenden Sie die offiziellen Schrift- und Abstandsrollen und kennzeichnen Sie die Inhaltsbreite als Entscheidung der Anwendung.
```

## Quellen und Geltungsbereich des Codex-Designsystems

Eigenständiges OpenDesign-Beispiel mit eigens verfassten Zusammenfassungen. Es werden weder Wikipedia-Inhalte noch die Wikipedia-Identität übernommen. Steuerelemente, die ausschließlich CSS verwenden, sind native Codex; die Suchfilterung und der Inline-Lesebereich sind Anwendungscode.

- Codex-Überblick Offizieller Eintrag zum Wikimedia-Designsystem.

- Zugriff auf Codex Verfügbare Ressourcen für Design und Entwicklung.

- Styleguide Richtlinien für visuelle Gestaltung, Inhalte und Interaktionen.

- Vollständiges funktionsfähiges Beispiel herunterladen ZIP-Datei mit dem vollständigen HTML, lokalen Abhängigkeiten für CSS/JavaScript, mitgelieferten Lizenzen und genauen Startanweisungen. Ein Build-Schritt ist nicht erforderlich.

## Weiterführende Ressourcen zum Codex-Designsystem

### Agriculture Designsystem

Erstelle längere Servicevorgänge mit den konkreten Abständen, responsiven Props und dem TaskList-Statusmodell von AgDS. Probiere einen Vorbereitungsvorgang aus, bei dem der Prüfschritt erst freigeschaltet wird, wenn alle Voraussetzungen erfüllt sind.

### Alberta Designsystem

Verwenden Sie Albertas native Webkomponenten und veröffentlichte Design-Tokens, um eine vollständige Vorbereitungs-Checkliste mit barrierefreien Auswahlmöglichkeiten, abgeleitetem Fortschritt und verlässlichem Feedback zur Prüfung zu erstellen.

### Amsterdam

Verwenden Sie den echten Open-Source-Switch-Vertrag von Amsterdam mit einem vollständigen neutralen Theme, barrierefreien Beschriftungen und sofort verfügbaren Leseeinstellungen.


- [Implementierungsreferenz](https://doc.wikimedia.org/codex/latest/components/demos/search-input.html)
- [Quelle](https://doc.wikimedia.org/codex/latest/design-tokens/font.html)
- [Quelle](https://doc.wikimedia.org/codex/latest/design-tokens/spacing.html)
- [Quelle](https://doc.wikimedia.org/codex/latest/design-tokens/breakpoint.html)
- [Quelle](https://doc.wikimedia.org/codex/latest/design-tokens/color.html)
- [Unterstützende Spezifikation lesen](https://doc.wikimedia.org/codex/latest/components/demos/search-input.html)
- [Unterstützende Spezifikation lesen](https://doc.wikimedia.org/codex/latest/design-tokens/font.html)
- [Unterstützende Spezifikation lesen](https://doc.wikimedia.org/codex/latest/design-tokens/spacing/)
- [Unterstützende Spezifikation lesen](https://doc.wikimedia.org/codex/latest/components/demos/button.html)
- [Unterstützende Spezifikation lesen](https://doc.wikimedia.org/codex/latest/components/overview.html)
- [Unterstützende Spezifikation lesen](https://doc.wikimedia.org/codex/latest/using-codex/)
- [Code-Referenz](https://doc.wikimedia.org/codex/latest/components/demos/search-input.html)
- [Codex-Überblick Offizieller Eintrag zum Wikimedia-Designsystem.](https://doc.wikimedia.org/codex/latest/)
- [Zugriff auf Codex Verfügbare Ressourcen für Design und Entwicklung.](https://doc.wikimedia.org/codex/latest/using-codex/accessing-codex.html)
- [Styleguide Richtlinien für visuelle Gestaltung, Inhalte und Interaktionen.](https://doc.wikimedia.org/codex/latest/style-guide/overview.html)