# Web Awesome Tasarım Sistemi

## Web Awesome Tasarım Sistemi Arayüz Önizlemesi

Köşe yarıçapı ve boşluk ölçeklerini değiştirin, örnek görünümünü değiştirin, bir bölge seçin ve yerel çalışma alanı adını doğrulayın.

## Web Awesome Tasarım Sistemi Tasarım Başvurusu

Yüklü pakette incelenen Web Awesome 3.14.0 varsayılan teması CSS. Aşağıdaki renk girdileri anlamsal takma adlardır; palet referansları, tahminî onaltılık değerlerle değiştirilmek yerine korunmuştur. Ölçekten türetilen piksel örneklerinde 16px kök boyut ve scale=1 varsayılır.

### Anlamsal yüzey ve metin rolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --wa-color-surface-default | white | Ana örnek yüzeyi. |
| --wa-color-surface-raised | white | Yükseltilmiş katman. |
| --wa-color-surface-lowered | var(--wa-color-neutral-95) | Kod gösterimi yüzeyi. |
| --wa-color-surface-border | var(--wa-color-neutral-90) | Kapsayıcı sınırı. |
| --wa-color-text-normal | var(--wa-color-neutral-10) | Normal metin. |
| --wa-color-text-quiet | var(--wa-color-neutral-40) | İkincil metin. |
| --wa-color-text-link | var(--wa-color-brand-40) | Bağlantı rolü. |
| --wa-color-brand-fill-loud | var(--wa-color-brand-50) | Güçlü marka dolgusu. |
| --wa-color-brand-on-loud | white | Güçlü marka dolgusu üzerinde metin. |
| --wa-color-brand-fill-quiet | var(--wa-color-brand-95) | Krıstılmış rozet dolgusu. |
| --wa-color-brand-on-quiet | var(--wa-color-brand-40) | Kısıtlanmış marka dolgusu üzerinde metin. |
### Aralık ve şekil

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --wa-space-scale | 1 | Boşluk belirteçlerinin kullandığı çarpan. |
| --wa-space-xs | calc(var(--wa-space-scale) * 0.5rem) | Varsayılan ölçekte 8px. |
| --wa-space-s | calc(var(--wa-space-scale) * 0.75rem) | Varsayılan ölçekte 12px. |
| --wa-space-m | calc(var(--wa-space-scale) * 1rem) | Varsayılan ölçekte 16px. |
| --wa-space-l | calc(var(--wa-space-scale) * 1.5rem) | Varsayılan ölçekte 24px. |
| --wa-space-xl | calc(var(--wa-space-scale) * 2rem) | Varsayılan ölçekte 32px. |
| --wa-space-2xl | calc(var(--wa-space-scale) * 2.5rem) | Varsayılan ölçekte 40px. |
| --wa-border-radius-scale | 1 | Ölçeklenebilir köşe yarıçaplarının kullandığı çarpan. |
| --wa-border-radius-s | calc(var(--wa-border-radius-scale) * 0.1875rem) | Varsayılan ölçekte 3px. |
| --wa-border-radius-m | calc(var(--wa-border-radius-scale) * 0.375rem) | Varsayılan ölçekte 6px. |
| --wa-border-radius-l | calc(var(--wa-border-radius-scale) * 0.75rem) | Varsayılan ölçekte 12px. |
### Tipografi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --wa-font-family-body | ui-sans-serif, system-ui, sans-serif | Gövde metninde kullanılan sistem sans-serif yazı tipi. |
| --wa-font-family-heading | var(--wa-font-family-body) | Başlık yazı tipi ailesi takma adı. |
| --wa-font-family-code | ui-monospace, monospace | Monospace gösterim yazı tipi. |
| --wa-font-size-scale | 1 | Tipografi ölçeği çarpanı. |
| --wa-font-size-m | calc(1rem * var(--wa-font-size-scale)) | Varsayılan kök boyut ve ölçekte 16px. |
| --wa-font-size-l | round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px) | Varsayılan kök boyut ve ölçekte 20px. |
| --wa-font-size-xl | round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px) | Varsayılan kök boyut ve ölçekte 25px. |
| --wa-font-size-2xl | round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px) | Varsayılan kök boyut ve ölçekte 32px. |
| --wa-line-height-condensed | 1.2 | Daraltılmış başlıklar/etiketler. |
| --wa-line-height-normal | 1.6 | Normal okuma satır yüksekliği. |
### Form denetimi takma adları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --wa-form-control-background-color | var(--wa-color-surface-default) | Girdi yüzeyi takma adı. |
| --wa-form-control-border-color | var(--wa-color-neutral-border-loud) | Girdi sınırı rolü. |
| --wa-form-control-border-radius | var(--wa-border-radius-m) | Alan köşe yarıçapı takma adı. |
| --wa-form-control-label-color | var(--wa-color-text-normal) | Erişilebilir etiket rengi. |
| --wa-form-control-hint-color | var(--wa-color-text-quiet) | İpucu rengi takma adı. |
## Web Awesome Tasarım Sistemi Eksiksiz Rehberi

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

## Web Awesome Tasarım Sistemi: Kendi Bileşen Sınırına Sahip Özel Öğeler

### Kendi Bileşen Sınırına Sahip Özel Öğeler

> Web Awesome, React uygulaması gerektirmek yerine kayıtlı HTML özel öğeleri sağlar. wa-input veya wa-select içe aktarıldıktan sonra sıradan HTML içine yerleştirilebilir ve belgelenmiş özellikleri ile olayları üzerinden denetlenebilir. Bu çalışma alanı 3.14.0 sürümünü paketler ve yalnızca herkese açık pakette bulunan bileşenleri kullanır.

Görünür denetimler, gölge kökü uygulamaları da dâhil olmak üzere gerçek özel öğelerdir. Çevresindeki üstbilgi, bölümler ve gösterim ise özgün HTML içeriğidir. Böylece örnek, hangi biçimlendirme kararlarının devralınan özel özellikler aracılığıyla bileşen sınırını geçtiğini, hangilerinin sayfa düzenine ait olduğunu gözlemlemeye yardımcı olur.

Destekleyici belirtimi okuyun

## Web Awesome Tasarım Sistemi: Anlamsal Renk Takma Adlarını Koruyun

### Anlamsal Renk Takma Adlarını Koruyun

Varsayılan tema; yükseltilmiş, varsayılan ve alçaltılmış yüzeyleri, normal ve kısıtlanmış metinleri ve birden fazla marka dolgusu/metin rengi çiftini birbirinden ayırır. Belirteç gösteriminde alçaltılmış yüzey, ana örnekte varsayılan yüzey kullanılır; küçük rozet ise brand-fill-quiet ile brand-on-quiet değerlerini eşleştirir. Görünüm değiştiğinde de bu roller anlamını korur.

Başvuru, her rolü tahminî bir onaltılık değere dönüştürmek yerine var(--wa-color-neutral-10) gibi takma adları korur. Anlamsal atama geçerliliğini korurken palet değişebilir. Güçlü bir marka eylemini özelleştiriyorsanız hem dolgu rengini hem de bu rengin üzerinde kullanılan metin rengini göz önünde bulundurun. Bunlardan birini eşini değiştirmeden güncellemek, düğme metninin okunmasını zorlaştırabilir.

Destekleyici belirtimi okuyun

## Web Awesome Tasarım Sistemi: Her Bileşeni Yeniden Yazmadan Ölçeği Değiştirin

### Her Bileşeni Yeniden Yazmadan Ölçeği Değiştirin

Köşe yarıçapı seçicisi, yalnızca örnekte --wa-border-radius-scale değerini değiştirir. Ölçek bir olduğunda varsayılan küçük/orta/büyük köşe yarıçapları, kök boyut 16 pikselken sırasıyla üç, altı ve on iki piksele karşılık gelir. Ölçeği sıfıra ayarlamak ölçeklenebilir köşeleri kare yapar; ölçek iki olduğunda değerleri iki katına çıkar. Hap ve daire belirteçleri ayrı kavramlardır; bu çarpanı izledikleri varsayılmamalıdır.

Boşluk seçicisi, --wa-space-scale değerini değiştirir. Örnekteki iç boşluk, aralıklar ve gösterim boşluğu resmî boşluk belirteçlerini kullandığından aralarındaki ilişkiler birlikte değişir. Bu, her bileşenin her boyutunun ölçekleneceği anlamına gelmez: bileşen denetimlerinin boyutlandırılması kendine özgü belirteç ilişkilerine sahiptir. Düzenleme paneli bu kapsamın dışındadır; böylece örnek değişirken karşılaştırma sabit kalır.

1. Kare'yi seçin ve girdi, kapsayıcı ve gösterim köşelerini inceleyin.

2. Rahat boşluk'u seçin ve örnekteki aralıkları değişmeden kalan düzenleme paneliyle karşılaştırın.

3. Her iki çarpanı ve görünümü birlikte sıfırlamak için Varsayılanları geri yükle'yi seçin.

Destekleyici belirtimi okuyun

## Web Awesome Tasarım Sistemi: Tipografi Belirteçleri ve Özgün Başlık Tercihleri

### Tipografi Belirteçleri ve Özgün Başlık Tercihleri

Varsayılan metin ailesi ui-sans-serif, system-ui, sans-serif’tir. Başlık ailesi, metin ailesini kullanır; kodda ise ui-monospace kullanılır. Normal satır yüksekliği belirteci 1.6, sıkıştırılmış satır yüksekliği ise 1.2’dir. Orta boyutlu yazı belirteci, font-size-scale ile çarpılan bir rem değeridir; daha büyük boyutlar yuvarlanmış hesaplamalar kullanır. Tablo, bu ifadeleri bağımlılıklarını gizlemeden gösterir.

Çalışma tezgâhının kendisi 34px başlık ve 23px bölüm başlığı kullanır; yerel 700px kesme noktasında sayfa başlığını küçültür. Bunlar özellikle bu sayfaya özgü kurallardır. Yerel alanlar, kitaplığın etiket ve ipucu stillerini koruyarak kullanıcının özel sayfa hiyerarşisini varsayılan bileşen tipografisiyle karşılaştırmasına olanak tanır.

Destekleyici belirtimi okuyun

## Web Awesome Tasarım Sistemi İlk Değerleri, Özellikler ve Değişiklik Olayları

### Başlangıç Değerleri, Özellikler ve Değişiklik Olayları

Her select öğesi, kararlı değerlere sahip wa-option alt öğeleri içerir. Varsayılan seçeneklerde, başlangıç seçimi için bileşenin güncel yönergelerine uygun olarak selected kullanılır. Çalışma zamanındaki değişikliklerde select value özelliği okunur. Tema denetimleri change olaylarını dinleyerek CSS özel özelliklerini günceller; işlenmiş seçenek etiketlerindeki metni ayrıştırmaz.

Bölge seçimi, sıradan bir örnek alanıdır ve harici bir depolama hizmetini kontrol etmez. Seçilen değer, yerel işlem mesajında bildirilir. Arayüz, Avrupa’yı seçmenin depolama alanı tahsis ettiği izlenimini yaratmaz. Gerçekçi görünen bir bileşen demosunda ürün terminolojisi kullanıldığında bu ayrım önemlidir.

Destekleyici belirtimi okuyun

## Web Awesome Tasarım Sistemini Belirteçler ve Belgelenmiş Parçalarla Biçimlendirme

### Belirteçlerle ve Belgelenmiş Bölümlerle Biçimlendirin

Sıradan alt öğe seçicileri, bir bileşenin gölge ağacının içine doğrudan erişemez. Bu örnek, alan arka planının, metninin ve köşe yarıçapının çevresindeki HTML ile uyumlu kalması için devralınan tema değişkenlerini kullanır. Bu, dahili olarak oluşturulan işaretlemeyi hedeflemeye çalışmak yerine desteklenen bir biçimlendirme yüzeyinden yararlanır.

Bileşene özgü değişiklikler için o bileşenin belgelenmiş CSS özel özelliklerine ve CSS parçalarına başvurun. Genel bir input seçicisi, wa-input içindeki dahili input öğesini değiştirmeyebilir. Buna karşılık, bir tema sınıfını veya değişkenini ortak bir üst öğeye eklemek, alt öğelerdeki birçok özel öğeyi bilinçli olarak etkileyebilir; bu nedenle kapsam dikkatle seçilmelidir.

Destekleyici belirtimi okuyun

## Web Awesome Tasarım Sistemi Yükseltme, Doğrulama ve Yerel Sonuçlar

### Yükseltme, Doğrulama ve Yerel Sonuçlar

Bileşen kaydı, sayfa açısından eşzamansız gerçekleşir. Örnek, kullandığı API’ler için customElements.whenDefined öğesini bekler, ardından başlangıç değerlerini okumadan önce select güncellemelerinin tamamlanmasını bekler. Böylece varsayılanlar, bilinmeyen bir HTML etiketinden henüz bileşen sınıfına yükseltilmemiş bir öğeye uygulanmaz.

Çalışma alanı işlemi, wa-input üzerinde setCustomValidity ve reportValidity kullanır. Baştaki ve sondaki boşlukları temizlenmiş ad iki karakterden kısaysa reddedilir; input olayı, düzeltmenin yeniden denenebilmesi için özel hatayı temizler. Devre dışı Invite later düğmesi, yerel bileşenin devre dışı durumudur. Durum metni yalnızca yerel olarak uygulanan adı bildirir; kodun tamamında çalışma alanı oluşturma veya depolama tahsisi isteği yoktur.

- Erişilebilir etiketler label özellikleriyle sağlanır.

- İpuçları, hata oluşmadan önce ad kısıtlamasını açıklar.

- Devre dışı işlem, amacını belirtmeye devam ederken etkileşime kapalı kalır.

Destekleyici belirtimi okuyun

## Web Awesome Tasarım Sistemi Temasını ve Kullandığınız Bileşenleri İçe Aktarın

### Temayı ve Kullandığınız Bileşenleri İçe Aktarın

Vite vanilla uygulamasına @awesome.me/webawesome@3.14.0 yükleyin ve sağlanan main.js dosyasını giriş noktası olarak kullanın. Varsayılan tema stil sayfası gereklidir. Sayfa düzeni açıkça CSS olarak tanımlandığından örnek, daha kapsamlı yerel sıfırlama veya yardımcı program paketini bilerek yüklemez. İçe aktarımlar, işaretlemede kullanılan beş bileşen türünü kaydeder.

npm dist modülleri paketleyiciler için tasarlanmıştır. Bağımlılıkları farklı biçimde paketlendiğinden, doğrudan tarayıcı modülü yüklemesi için alternatif olarak dist-cdn dağıtımını kullanın. Bir dist içe aktarımını düz bir script etiketine kopyalayıp yalın bağımlılıkların çözümleneceğini varsaymayın. Harici varlık gerektiren bileşenler için belgelenen temel yol ayarı gerekir; bu örnekte kullanıcı tarafından sağlanan simge varlıkları kullanılmaz ve paket çevrimdışı çalışacak şekilde oluşturulur.

Destekleyici belirtimi okuyun

## Web Awesome Tasarım Sistemi Genel Bileşenler ve Temanın Sınırlarını Doğru Tanıtma

### Herkese Açık Bileşenler ve Temaların Gerçek Sınırları

Çalışma tezgâhı, varsayılan temayı ve genel bileşenleri gösterir. Bazı Web Awesome bileşenleri, kalıpları ve tasarım kaynakları Pro sürümünde sunulur; bu nedenle sayfa, genel paketi yüklemenin katalogdaki her öğeye erişim sağladığı izlenimini vermez. Bir bileşeni paylaşılan bir tasarım sisteminde zorunlu bağımlılık hâline getirmeden önce kullanılabilirliği kontrol edilmelidir.

Yeniden kullanılabilir bir ürün teması; hangi değişkenlerin değiştirildiğini, kapsamlarının nerede belirlendiğini ve her iki görünüm modunun nasıl denetlendiğini açıklamalıdır. Canlı çalışma tezgâhı bu sürecin küçük bir örneğidir: okuyucu, bağlantısız bir palet görseline güvenmek yerine değiştirilen değişkenleri inceleyebilir ve ortaya çıkan yerel bileşenleri karşılaştırabilir.

Destekleyici belirtimi okuyun

## Web Awesome Tasarım Sistemi Bileşen Örnekleri

### Özel öğelerle çalışma tezgâhı işaretlemesi

Yerel wa-select, wa-option, wa-input, wa-switch ve wa-button bileşenleri, sıradan anlamsal HTML işaretlemesiyle bir arada kullanılır.

```
<main class="token-workbench"><header><p class="eyebrow">WEB AWESOME / TOKEN WORKBENCH</p><h1>See the theme cross the component boundary.</h1><p>Change a scoped token and inspect native custom elements alongside ordinary HTML.</p></header><div class="workbench-grid"><section class="controls"><h2>Theme controls</h2><wa-select id="radius" label="Corner scale"><wa-option value="0">Square / 0</wa-option><wa-option value="1" selected>Default / 1</wa-option><wa-option value="2">Rounder / 2</wa-option></wa-select><wa-select id="spacing" label="Spacing scale"><wa-option value="0.8">Compact / 0.8</wa-option><wa-option value="1" selected>Default / 1</wa-option><wa-option value="1.25">Relaxed / 1.25</wa-option></wa-select><wa-switch id="dark">Dark appearance</wa-switch><wa-button id="reset" appearance="outlined">Restore defaults</wa-button><p class="hint">These controls change only the specimen. The editing controls keep their original dimensions.</p></section><section id="specimen" class="specimen" aria-label="Theme specimen"><div class="sample-head"><span class="badge">COMPONENT PREVIEW</span><span class="hint">Free components</span></div><h2>Your next workspace</h2><p class="hint">Form labels, field borders and actions inherit semantic tokens through the shadow boundary.</p><wa-input id="workspace" label="Workspace name" hint="Use at least two characters." value="Field notes"></wa-input><wa-select id="region" label="Storage region"><wa-option value="europe" selected>Europe</wa-option><wa-option value="america">North America</wa-option><wa-option value="asia">Asia Pacific</wa-option></wa-select><div class="sample-actions"><wa-button id="create" variant="brand">Apply name locally</wa-button><wa-button disabled>Invite later</wa-button></div><p id="result" role="status">No workspace is created by this specimen.</p><div class="token-readout"><code id="values">--wa-border-radius-scale: 1;<br>--wa-space-scale: 1;</code></div></section></div><footer>Native Web Awesome 3.14.0. The surrounding workbench is original HTML/CSS.</footer></main>
```

Kod referansı

- Başlangıç seçimleri için wa-option üzerinde selected kullanılır.

- Yalnızca ücretsiz bileşenler kullanılır.

### Eksiksiz içe aktarımlar ve belirteç denetimleri

Bileşenleri kaydeder, yükseltmeyi bekler, kapsamı belirlenmiş özel özellikleri değiştirir ve yerel doğrulamayı uygular.

```
import '@awesome.me/webawesome/dist/styles/themes/default.css';
import '@awesome.me/webawesome/dist/components/button/button.js';
import '@awesome.me/webawesome/dist/components/input/input.js';
import '@awesome.me/webawesome/dist/components/select/select.js';
import '@awesome.me/webawesome/dist/components/option/option.js';
import '@awesome.me/webawesome/dist/components/switch/switch.js';
import './style.css';
const $=id=>document.getElementById(id);function update(){const s=$('specimen');s.style.setProperty('--wa-border-radius-scale',$('radius').value);s.style.setProperty('--wa-space-scale',$('spacing').value);s.classList.toggle('wa-dark',$('dark').checked);s.classList.toggle('wa-light',!$('dark').checked);$('values').textContent=`--wa-border-radius-scale: ${$('radius').value};\n--wa-space-scale: ${$('spacing').value};`;}
Promise.all(['wa-select','wa-switch','wa-input','wa-button'].map(x=>customElements.whenDefined(x))).then(async()=>{await Promise.all([...document.querySelectorAll('wa-select')].map(e=>e.updateComplete));for(const id of ['radius','spacing','dark'])$(id).addEventListener('change',update);$('reset').addEventListener('click',()=>{$('radius').value='1';$('spacing').value='1';$('dark').checked=false;update()});$('create').addEventListener('click',()=>{const field=$('workspace');field.setCustomValidity(field.value.trim().length<2?'Use at least two non-space characters.':'');if(!field.reportValidity())return;$('result').textContent=`Applied “${field.value.trim()}” in the ${$('region').value} specimen. No workspace or storage allocation was created.`});$('workspace').addEventListener('input',()=>$('workspace').setCustomValidity(''));update()});
```

Kod referansı

- whenDefined, yükseltilmemiş özel bir öğeden değer okunmasını önler API.

- Kod yalnızca kullanılan bileşenleri içe aktarır.

### Kapsamı belirlenmiş örnek CSS

Sıradan HTML, yerel özel öğelerin devraldığı tema değişkenlerini kullanır.

```
*{box-sizing:border-box}body{margin:0;font-family:var(--wa-font-family-body);font-size:16px;line-height:var(--wa-line-height-normal);color:var(--wa-color-text-normal);background:#f5f6f8}.token-workbench{max-width:1100px;margin:auto;padding:32px}header{max-width:740px;margin-bottom:28px}h1{font-size:34px;line-height:1.15;letter-spacing:-.03em}h2{font-size:23px;line-height:1.25}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700}.workbench-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px}.controls{display:flex;flex-direction:column;gap:20px;padding:24px;background:white;border:1px solid #d9dde3;border-radius:12px}.controls h2{margin:0}.hint,footer{color:var(--wa-color-text-quiet);font-size:14px}.specimen{background:var(--wa-color-surface-default);color:var(--wa-color-text-normal);border:1px solid var(--wa-color-surface-border);border-radius:var(--wa-border-radius-l);padding:var(--wa-space-xl);display:flex;flex-direction:column;gap:var(--wa-space-l)}.specimen h2,.specimen p{margin:0}.sample-head,.sample-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--wa-space-s)}.sample-head{justify-content:space-between}.badge{font-size:10px;letter-spacing:.09em;font-weight:700;background:var(--wa-color-brand-fill-quiet);color:var(--wa-color-brand-on-quiet);padding:4px 8px;border-radius:var(--wa-border-radius-s)}.token-readout{background:var(--wa-color-surface-lowered);padding:var(--wa-space-m);border-radius:var(--wa-border-radius-m);font:13px/1.7 var(--wa-font-family-code);white-space:pre-wrap;overflow-wrap:anywhere}#result{font-size:13px}footer{margin-top:20px}@media(max-width:700px){.token-workbench{padding:20px 16px}.workbench-grid{grid-template-columns:1fr}.controls{padding:20px}h1{font-size:28px}.specimen{padding:var(--wa-space-l)}}
```

Kod referansı

- Çalışma tezgâhı başlığı ve düzen kesme noktası bu sayfaya özgü tercihlerdir.

### Eksiksiz index.html belgesi

Sağlanan main.js ve stil sayfası için Vite kök belgesi.

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Web Awesome token workbench</title></head><body><main class="token-workbench"><header><p class="eyebrow">WEB AWESOME / TOKEN WORKBENCH</p><h1>See the theme cross the component boundary.</h1><p>Change a scoped token and inspect native custom elements alongside ordinary HTML.</p></header><div class="workbench-grid"><section class="controls"><h2>Theme controls</h2><wa-select id="radius" label="Corner scale"><wa-option value="0">Square / 0</wa-option><wa-option value="1" selected>Default / 1</wa-option><wa-option value="2">Rounder / 2</wa-option></wa-select><wa-select id="spacing" label="Spacing scale"><wa-option value="0.8">Compact / 0.8</wa-option><wa-option value="1" selected>Default / 1</wa-option><wa-option value="1.25">Relaxed / 1.25</wa-option></wa-select><wa-switch id="dark">Dark appearance</wa-switch><wa-button id="reset" appearance="outlined">Restore defaults</wa-button><p class="hint">These controls change only the specimen. The editing controls keep their original dimensions.</p></section><section id="specimen" class="specimen" aria-label="Theme specimen"><div class="sample-head"><span class="badge">COMPONENT PREVIEW</span><span class="hint">Free components</span></div><h2>Your next workspace</h2><p class="hint">Form labels, field borders and actions inherit semantic tokens through the shadow boundary.</p><wa-input id="workspace" label="Workspace name" hint="Use at least two characters." value="Field notes"></wa-input><wa-select id="region" label="Storage region"><wa-option value="europe" selected>Europe</wa-option><wa-option value="america">North America</wa-option><wa-option value="asia">Asia Pacific</wa-option></wa-select><div class="sample-actions"><wa-button id="create" variant="brand">Apply name locally</wa-button><wa-button disabled>Invite later</wa-button></div><p id="result" role="status">No workspace is created by this specimen.</p><div class="token-readout"><code id="values">--wa-border-radius-scale: 1;<br>--wa-space-scale: 1;</code></div></section></div><footer>Native Web Awesome 3.14.0. The surrounding workbench is original HTML/CSS.</footer></main>
<script type="module" src="/main.js"></script></body></html>
```

Kod referansı

- Vite vanilla projesi oluşturun ve yukarıda gösterilen main.js ile style.css dosyalarının tamamını kullanın.

## Web Awesome Tasarım Sistemi AI Ajanı Kurulumu

### Uygulamaya Başlangıç Noktası

Eksiksiz main.js, CSS ve body örnekleri, çalışma tezgâhını bir paketleyiciyle yeniden oluşturur. Çevrimdışı demo, temanın CSS dosyasına satır içi eklendiği bir esbuild paketidir. React sağlayıcısı gerekmez.

```
// Create a Vite vanilla project, then install:
// npm install @awesome.me/webawesome@3.14.0
// index.html: paste the complete workbench markup in body,
// then add <script type="module" src="/main.js"></script>.
// main.js: use the complete imports and token-controls example above.
// style.css: use the complete scoped specimen CSS above.

// Minimum registration pattern used by this example:
import '@awesome.me/webawesome/dist/styles/themes/default.css';
import '@awesome.me/webawesome/dist/components/button/button.js';
import '@awesome.me/webawesome/dist/components/input/input.js';
import '@awesome.me/webawesome/dist/components/select/select.js';
import '@awesome.me/webawesome/dist/components/option/option.js';
import '@awesome.me/webawesome/dist/components/switch/switch.js';
// Do not duplicate these imports if using the complete main.js above.
```

### Projeniz İçin Bir İstem

```
Web Awesome 3.14.0 kapsamı belirlenmiş belirteç çalışma tezgâhını kullanın ve sağlanan wa-select, wa-option, wa-input, wa-button ve wa-switch öğelerini kaydedin. Başlangıç seçimlerini okumadan önce bileşen tanımını ve updateComplete durumunu bekleyin. --wa-border-radius-scale ve --wa-space-scale özelliklerini yalnızca örnek bölgeye uygulayın; ilgisiz sayfa içeriğini değiştirmeden bu bölgenin wa-light/wa-dark sınıfını açıp kapatın. Görünür belirteç bilgisini yerel denetimlerle eşzamanlı tutun ve etiketleri koruyun. Çalışma tezgâhını cihaz yönetimi arayüzü olarak değil, inceleme aracı olarak değerlendirin.
```

## Web Awesome Tasarım Sistemi Kaynakları ve Kapsamı

Web Awesome 3.14.0 genel bileşenleri ve varsayılan tema. Düzen tercihleri bu sayfaya özgüdür; adı yerel olarak uygulamak çalışma alanı veya depolama oluşturmaz.

- Kurulum npm/dist ile dist-cdn karşılaştırması ve gerekli tema.

- Tasarım belirteçleri Tema belirteci kategorileri.

- Özelleştirme Özel özellikler ve gölge sınırları.

- Select Seçenekler, değerler ve başlangıç seçimi.

- Input Doğrulama API.

- Switch Boole özel öğesi.

## Web Awesome Tasarım Sistemi İlgili Kaynaklar

### Ariakit

Ariakit, açıkça tanımlanmış ortak duruma ve birleştirilebilir erişilebilir parçalara sahip, stilsiz React bileşenleri sunar. Combobox, yazılan metni onaylanmış seçimden ayırdığı için arama tabanlı seçicilerde kullanışlıdır; aşağıdaki referans bulucu, gruplandırılmış ve kullanılamayan sonuçlarla bu farkı gösterir.

### Bits UI

Bits UI, yerel parçalar ve Svelte 5 durumuyla bir araya getirilebilen başsız Svelte bileşenleri sunar. Örnek; türetilmiş karma durumlu bir onay kutusunu, birbirinden bağımsız açılan akordeon bölümlerini ve portal tabanlı bir inceleme iletişim penceresini eksiksiz stil yapılandırmasıyla birleştirir.

### Bootstrap

Gerçek boşluk ölçeği, anlamsal renkleri, duyarlı ızgarası ve bileşen API’leriyle Bootstrap 5.3.8’i kullanın. Çalışan bir rezervasyon formunu, hata özetini, tablo filtresini, modalı ve renk modu düğmesini deneyin; ardından belgelenen kodu yeniden kullanın.


- [Uygulama başvurusu](https://webawesome.com/docs/customizing)
- [Kaynak](https://webawesome.com/docs/tokens/)
- [Destekleyici belirtimi okuyun](https://webawesome.com/docs/usage)
- [Destekleyici belirtimi okuyun](https://webawesome.com/docs/tokens/)
- [Destekleyici belirtimi okuyun](https://webawesome.com/docs/customizing)
- [Destekleyici belirtimi okuyun](https://webawesome.com/docs/components/select/)
- [Destekleyici belirtimi okuyun](https://webawesome.com/docs/components/input/)
- [Destekleyici belirtimi okuyun](https://webawesome.com/docs/)
- [Kod referansı](https://webawesome.com/docs/components/select/)
- [Kod referansı](https://webawesome.com/docs)
- [Kod referansı](https://webawesome.com/docs/customizing)
- [Kod referansı](https://webawesome.com/)
- [Kurulum npm/dist ile dist-cdn karşılaştırması ve gerekli tema.](https://webawesome.com/docs/)
- [Tasarım belirteçleri Tema belirteci kategorileri.](https://webawesome.com/docs/tokens/)
- [Özelleştirme Özel özellikler ve gölge sınırları.](https://webawesome.com/docs/customizing)
- [Select Seçenekler, değerler ve başlangıç seçimi.](https://webawesome.com/docs/components/select/)
- [Input Doğrulama API.](https://webawesome.com/docs/components/input/)
- [Switch Boole özel öğesi.](https://webawesome.com/docs/components/switch/)