Codex-Designsystem.

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

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

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

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