# Codex Tasarım Sistemi

## Codex Tasarım Sistemi Arayüz Önizlemesi

Özgün üç örnekte arama yapın, bir sonucu inceleyin, kapatın veya eşleşmeyen bir sorgu deneyin.

## Codex Tasarım Sistemi Tasarım Başvurusu

@wikimedia/codex 2.7.0, yerel CSS ve güncel resmî token/bileşen başvurusu. Bağımsız önizleme, belgelenmiş yalnızca CSS kullanan rotayı kullanır; içerik genişliği ve sonuç panelinin düzeni uygulamaya özgü tercihlerdir.

### Yazı tipi rolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| font-family-base | sans-serif | Belge ve kontroller için temel rol. |
| font-family-heading-main | Linux Libertine, Georgia, Times, Source Serif 4, serif | Yerel yedekleri olan özel ilk başlık rolü. |
| font-size-small / medium / large | 0.875rem / 1rem / 1.125rem | Destekleyici metin, varsayılan metin ve daha büyük metin. |
| line-height-medium | 1.625rem | Bileşen/özellik satır yüksekliği token’ı. |
| line-height-content | 1.625 | Kullanıcı tarafından oluşturulan içerik için birimsiz rol. |
### Boşluklar

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| spacing-25 / 50 / 75 | 4px / 8px / 12px | Sıkı aralıklar. |
| spacing-100 / 150 / 200 | 16px / 24px / 32px | Standart düzen ritmi. |
| spacing-30 | 5px | Varsayılan kontrollerin dikey dolgusu için belgelenmiş istisna. |
| spacing-horizontal-button | 12px − 1px | Düğme kenarlığını hesaba katar. |
### Görünüm alanı ve kontroller

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Mobile / tablet minima | 320px / 640px | Görünüm alanı sınırları. |
| Desktop / desktop-wide minima | 1120px / 1680px | Daha büyük görünüm alanı sınırları. |
| Button small / medium / large | 24px / 32px / 44px minimum | Dokunmatik kullanım bağlamı gerektiriyorsa large kullanın; boyutlar Button belgelerinden alınmıştır. |
### Derlenmiş varsayılan renk yedekleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| color-base | #202122 | Varsayılan, okunabilir metin. |
| color-progressive | #36c | Aşamalı eylem rengi; her kayıt için durum belirtmez. |
## Codex Tasarım Sistemi Eksiksiz Kılavuzu

Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz.

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

## Codex Tasarım Sistemi: Yalnızca CSS ve Vue rotaları

### İhtiyacınıza uygun uygulamayı seçin

> Codex, Vue bileşenleri ve belgelenmiş, yalnızca CSS kullanan bileşen yapıları sunar. Canlı örnek, ikincisini kullanır: arama denetiminde Codex tarafından belgelenen tam sarmalayıcı, metin alanı ve uç düğme sınıfları bulunur; yerel bir uygulama betiği de özgün üç makale özetini filtreler. Ayrı Vue örneğinde eşdeğer paket içe aktarımları gösterilir.

Yalnızca CSS kullanan bir arama, sırf benzer görünüyor diye tahminli bir birleşik kutuya dönüşmez. Bu örnek bir sorgu gönderir ve sonuç listesi görüntüler. ARIA liste kutusu desenini kullanmaz ve TypeaheadSearch uyguladığını iddia etmez.

Destekleyici belirtimi okuyun

## Codex Tasarım Sistemi: Okuma için tipografi

### İçerik ve kontrol rollerini birbirinden ayırın

font-family-base token’ı sans-serif olarak çözümlenir; kullanılabilir system-sans yığını ayrı bir roldür. Codex ayrıca Linux Libertine temelli, Georgia, Times ve diğer yedekleri içeren serif heading-main rolü sunar. Önizlemede yazı tipi indirmeden serif makale başlığı ve sans-serif kontroller kullanılır.

Aşağıdaki başvuruda 1rem olan font-size-medium ile 1.625rem olan line-height-medium birbirinden ayrı gösterilir. Birimsiz line-height-content değeri, kullanıcı tarafından oluşturulan içerik için tasarlanmıştır; her bileşenin kendi satır yüksekliğini değiştirmeye yönelik genel bir talimat değildir. Yerel input ve button CSS bileşenlerinin kendi kontrol ölçülerini korumasını sağlayın.

Destekleyici belirtimi okuyun

## Codex Tasarım Sistemi: Aralıklar ve kesme noktaları

### Adlandırılmış ölçeği ve istisnalarını kullanın

Codex spacing-100 değeri 16px, spacing-150 değeri 24px ve spacing-200 değeri 32px’tir. Ölçekte açıkça belirtilmiş istisnalar da vardır: spacing-30 değeri 5px’tir ve varsayılan 32px kontrol yüksekliği için dikey kontrol dolgusunu destekler. Her aralığı 8px’lik bir ızgaraya yuvarlamak, belgelenmiş bir bileşen kararını ortadan kaldırır.

Örnek, belgelenmiş tablet sınırını kullanarak 640px’in altında sonuç listesini tam genişliğe çıkarır. Okuma genişliğinin uygulama tarafından belirlenen üst sınırı 56rem’dir. Masaüstü kesme noktası 1120px, geniş masaüstü kesme noktası ise 1680px’tir; bu eşikler, her uygulamaya otomatik olarak sağlanan bir ızgarayı değil, görünüm alanı kategorilerini tanımlar.

Destekleyici belirtimi okuyun

## Codex Tasarım Sistemi: Renk ve eylem rolleri

### Progressive, genel bir mavi süsleme değildir

Codex, eylem türünü düğmenin görsel ağırlığından ayırır. Progressive bir eylem süreci ilerletirken primary ağırlığı, o görünümdeki ana eylemi belirtir. Bu yerel dizinde arama yapmak için nötr normal düğme uygundur; düşük vurgulu bir kontrol ise sonuçlarla rekabet etmeden aramayı temizleyebilir.

Derlenmiş CSS, base text #202122 ve progressive #36c dâhil, özel özellikleri için yedek renkler içerir. Önizleme bu durumlarda yerel bileşen CSS kullanır. Sonuç panelinin açık renkli arka planı uygulama düzenine aittir; yeni bir Codex durum token’ı olarak tanımlanmamıştır.

Destekleyici belirtimi okuyun

## Codex Tasarım Sistemi: SearchInput anatomisi

### Input ve düğmeyi bilinçli biçimde birleştirin

Yalnızca CSS kullanan yapı, kök öğede .cdx-search-input--has-end-button sınıfını, bir .cdx-search-input__input-wrapper öğesini, start-icon değiştiricisi bulunan bir .cdx-text-input öğesini ve .cdx-search-input__end-button sınıfına sahip bir düğmeyi gerektirir. Sarmalayıcıları çıkarırsanız birleşik geometri ve simge hizalaması kaybolur.

Görünür etiket, aramanın kapsamını belirtir. Simge aralığı dekoratiftir ve erişilebilirlik API’lerinden gizlenmiştir. Form, Enter tuşunu ve düğme etkinleştirmesini tek bir gönderme dinleyicisi üzerinden işler; sonuçlar güncellendikten sonra sayı, nazikçe duyurulan bir durum bölgesi aracılığıyla bildirilir. Boş giriş, tüm yerel örnekleri yeniden gösterir.

- Bir sayfadaki içeriği bulmak için SearchInput kullanın.

- Tahminli gezinme önerileri gerekiyorsa TypeaheadSearch kullanın.

- Bir form değeri olarak seçenek belirlemek için Lookup kullanın.

Destekleyici belirtimi okuyun

## Codex Tasarım Sistemi: Sonuçlar ve ayrıntılı okuma

### Okurun bulunduğu yeri koruyun

Her sonuçta adlandırılmış bir başlık, özgün kısa bir açıklama ve yerel okuma panelini açan bir düğme bulunur. Panel uygulama tarafından oluşturulmuştur; Codex Dialog değildir: belge akışında kalır, modal arka planı yoktur ve odağı hapsetmez.

Bir örneği açtığınızda odak panel başlığına taşınır. Paneli kapattığınızda odak, paneli açan düğmeye döner. Yeniden arama yapıldığında önceki ayrıntı kapatılır ve sonuç sayısı yeniden hesaplanır; böylece eski bir makale yeni sorgunun sonucuymuş gibi görünmez. Eşleşme bulunmayan bir sorguda açıklayıcı metin ve açık bir temizleme eylemi gösterilir.

Destekleyici belirtimi okuyun

## Codex Tasarım Sistemi: Yön ve giriş davranışı

### İngilizce dışındaki dilleri de hesaba katın

Bileşen belgelerinde soldan sağa ve sağdan sola örnekler bulunur. Codex çok dilli bir bilgi ekosisteminde kullanıldığından uygulama düzeninde, tüm simgelerin ve okuma eylemlerinin solda olduğunu varsaymak yerine mantıksal inline/block aralıkları kullanılmalıdır. Örneğin özel düzeninde, yönün önemli olduğu yerlerde margin-inline ve padding-inline kullanılır.

Buradaki arama yalnızca gönderildiğinde çalışır. Böylece IME ile oluşturulmakta olan metnin tamamlanmış bir sorgu gibi ele alınması önlenir. Üretim ortamında kullanılacak bir otomatik tamamlama özelliğinde, metin bileşimi sırasında girişin doğru işlenmesi, asenkron isteklerin iptali ve doğru bir menü etkileşim modeli gerekir; yalnızca CSS kullanan yerel örnek bunların hiçbirini sunduğunu iddia etmez.

Destekleyici belirtimi okuyun

## Codex Tasarım Sistemini Entegre Etme ve Genişletme

### Kitaplığın sürümünü sabitleyin, sonuç mantığını siz yönetin

Doğrulanmış paket @wikimedia/codex 2.7.0’dır ve stil girişi olarak dist/codex.style.css dosyasını sunar. Yalnızca CSS kullanan demo, tüm kontrolleri yerel HTML bileşenleri olduğundan ve küçük yerel betik filtreleme ile okuma paneli durumunu yönettiğinden Vue çalışma zamanına ihtiyaç duymaz. Vue varyantı, uygulama durumu çerçeve tarafından yönetildiğinde CdxSearchInput ve CdxButton bileşenlerini içe aktarır.

Kod paketi GPL-2.0-or-later lisanslıdır ve lisans dosyası yerel varlıklarla birlikte sunulur. Örnekler Wikipedia’nın kimliğini veya makale içeriğini kopyalamaz. Gerçek bir arama uç noktasına bağlanmadan önce yerel eşleşme yok durumu etiketini değiştirmekle yetinmeyin; ağ hatalarını, yüklenme durumunu ve güncelliğini yitirmiş yanıtları ayrıca ele alın.

1. Sabitlenmiş paketi yükleyin veya lisansı ile birlikte stil dosyasını kopyalayın.

2. Belgelenmiş, yalnızca CSS kullanan yapıyı oluşturun veya dışa aktarılan Vue bileşenlerini kullanın.

3. Sorgu ve sonuç mantığını uygulamaya ekleyin; arama anlamını koruyun.

4. Klavye odağını ve dar ekran düzenlerini çevrilmiş gerçek içerikle doğrulayın.

Destekleyici belirtimi okuyun

## Codex Tasarım Sistemi Bileşen Örnekleri

### Görünür etiketli, yalnızca CSS kullanan arama

Belgelenmiş sarmalayıcı yapısı ve yerel form gönderimi.

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

Kod referansı

### Vue arama bileşimi

Gerçek Codex içe aktarımları ve Vue durumu; gönderilen sorgunun yerel çıktısı entegrasyon sınırını gösterir.

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

Kod referansı

### Eksiksiz bağımsız örnek

Belgenin tamamı düzeni, denetimleri ve başlatma kodunu içerir. Tam göreli vendor varlıklarını almak için bağlantılı örnek arşivini çıkarın ve HTTP üzerinden sunun.

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

Kod referansı

- Eksiksiz örneği Kaynaklar bölümünden indirin. README dosyasında tam yerel başlatma komutu bulunur.

- Vendor yollarını bu belgeye göreli tutun; arşiv, bu önizlemenin kullandığı tüm varlıkları içerir.

## Codex Tasarım Sistemi: Yapay Zekâ Ajanı Kurulumu

### Uygulamaya Başlangıç Noktası

Yerel stil sayfası bağımsız önizlemede doğrulanmıştır. Vue kodu, bu önizlemenin çalışma zamanı değil, ayrı bir entegrasyon örneğidir. Kaynaklar bölümündeki eksiksiz çalışan örnek ZIP dosyası, önizlemenin tam bağımlılıklarını ve eksiksiz belgeyi de içerir. Dosyayı ayıklayın, ilgili dizinde python3 -m http.server 8080 komutunu çalıştırın ve ardından http://localhost:8080/wikimedia-codex.html adresini açın. Modül tabanlı örnekleri file:// üzerinden açmayın.

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

### Projeniz İçin Bir İstem

```
Codex 2.7.0 ve yalnızca CSS kullanan SearchInput ile düğmelerle yerel bir bilgi dizini oluşturun. Belgelenmiş uç düğme sarmalayıcılarını, açık bir arama etiketini ve yerel form gönderimini koruyun. Sonuç sayısını, eşleşme bulunmadığında gösterilecek mesajı ve temizleme eylemini görüntüleyin. Sonuç ayrıntılarını satır içinde açın, odağı başlıklarına taşıyın ve kapatıldıklarında odağı işlemi başlatan düğmeye döndürün. TypeaheadSearch veya modal davranış sunduğunuzu iddia etmeyin. Resmî yazı tipi ve aralık rollerini kullanın; içerik genişliğinin uygulamaya özgü bir tercih olduğunu belirtin.
```

## Codex Tasarım Sistemi: Kaynaklar ve Kapsam

Özgün özetler içeren bağımsız bir OpenDesign örneği. Wikipedia içeriği veya kimliği kopyalanmamıştır. Yalnızca CSS kullanan kontroller yerel Codex bileşenleridir; arama filtreleme ve satır içi okuma paneli ise uygulama kodudur.

- Codex genel bakış Wikimedia tasarım sisteminin resmî girişi.

- Codex’a erişim Tasarım ve geliştirme için kullanılabilir kaynaklar.

- Stil kılavuzu Görsel, içerik ve etkileşim yönergeleri.

- Çalışan örneğin tamamını indirin Tam HTML, yerel CSS/JavaScript bağımlılıklarını, sağlanan lisansları ve başlatma talimatlarının tam hâlini içeren ZIP. Derleme adımı gerekmez.

## Codex Tasarım Sistemi: İlgili Kaynaklar

### Agriculture tasarım sistemi

AgDS’nin somut boşluk değerleri, duyarlı özellikleri ve TaskList durum modeliyle daha uzun hizmet işlemleri oluşturun. İnceleme adımının yalnızca ön koşullar tamamlandığında açıldığı bir hazırlık iş akışını deneyin.

### Alberta tasarım sistemi

Erişilebilir seçenekler, türetilmiş ilerleme ve gerçeğe uygun inceleme geri bildirimi içeren eksiksiz bir hazırlık kontrol listesi oluşturmak için Alberta’nın yerel web bileşenlerini ve yayımlanmış tasarım belirteçlerini kullanın.

### Amsterdam

Eksiksiz ve nötr bir tema, erişilebilir etiketler ve anında okuma tercihleriyle Amsterdam’ın gerçek açık kaynaklı Switch sözleşmesini kullanın.


- [Uygulama başvurusu](https://doc.wikimedia.org/codex/latest/components/demos/search-input.html)
- [Kaynak](https://doc.wikimedia.org/codex/latest/design-tokens/font.html)
- [Kaynak](https://doc.wikimedia.org/codex/latest/design-tokens/spacing.html)
- [Kaynak](https://doc.wikimedia.org/codex/latest/design-tokens/breakpoint.html)
- [Kaynak](https://doc.wikimedia.org/codex/latest/design-tokens/color.html)
- [Destekleyici belirtimi okuyun](https://doc.wikimedia.org/codex/latest/components/demos/search-input.html)
- [Destekleyici belirtimi okuyun](https://doc.wikimedia.org/codex/latest/design-tokens/font.html)
- [Destekleyici belirtimi okuyun](https://doc.wikimedia.org/codex/latest/design-tokens/spacing/)
- [Destekleyici belirtimi okuyun](https://doc.wikimedia.org/codex/latest/components/demos/button.html)
- [Destekleyici belirtimi okuyun](https://doc.wikimedia.org/codex/latest/components/overview.html)
- [Destekleyici belirtimi okuyun](https://doc.wikimedia.org/codex/latest/using-codex/)
- [Kod referansı](https://doc.wikimedia.org/codex/latest/components/demos/search-input.html)
- [Codex genel bakış Wikimedia tasarım sisteminin resmî girişi.](https://doc.wikimedia.org/codex/latest/)
- [Codex’a erişim Tasarım ve geliştirme için kullanılabilir kaynaklar.](https://doc.wikimedia.org/codex/latest/using-codex/accessing-codex.html)
- [Stil kılavuzu Görsel, içerik ve etkileşim yönergeleri.](https://doc.wikimedia.org/codex/latest/style-guide/overview.html)