# Kobalte Tasarım Sistemi

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

Malzeme miktarlarını ölçeklendirin, ürünleri toplayın ve özgün tarifi yerel olarak sabitleyin.

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

Kobalte 0.13.14, başsız Solid temel bileşenleri sunar; standart bir görsel ölçek sunmaz. Aşağıdaki her recipe-* rengi ve boyutu, özgün uygulamanın eksiksiz yapılandırmasının parçasıdır. API adları ve durum nitelikleri, kurulu paket ve resmî bileşen belgeleriyle doğrulanmıştır.

### Özgün anlamsal renkler

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --recipe-canvas | #f6f2ec | Dış tuval |
| --recipe-surface | #fffefa | Tarif ve porsiyon panelleri |
| --recipe-ink | #403a30 | Birincil metin |
| --recipe-muted | #807465 | Destekleyici metin |
| --recipe-line | #e6ded2 | Ayırıcılar ve kenarlıklar |
| --recipe-action | #95612f | Seçili onay kutusu ve eylem metni |
| --recipe-on-action | #fff | Dolu eylemin ön planı |
| --recipe-focus | #b88955 | Görünür klavye odağı |
| --recipe-soft | #f1e4d3 | Adım denetleyicisi ve basılı sabitleme arka planı |
### Özgün tipografi ve boyutlar

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Body | system-ui, sans-serif | Yazı tipi indirmesi yok |
| Page heading | 34px / 1.15; 29px narrow | Özgün hiyerarşi |
| Recipe title | Georgia, serif; 30px / 1.2 | Özgün editoryal vurgu |
| Ingredient copy | 13px / 1.5; 12px narrow | Okunaklı, satırlara bölünebilir etiketler |
| --recipe-space-1 / 2 / 3 | 4px / 8px / 12px | Küçük boşluklar |
| --recipe-space-4 / 6 / 8 | 16px / 24px / 32px | Panel ve sayfa aralıkları |
| Panel radius | 16px | Özgün yüzey geometrisi |
| Checkbox control | 21 × 21px; 5px radius | Özgün görünür gösterge |
| Stepper trigger | 42px wide | Özgün geometriye sahip yerel tetikleyici |
| Layout breakpoint | 760px | İki sütun teke dönüşür |
| Focus ring | 3px; 3px offset | Özgün görünür klavye görünümü |
### Yerel bileşen durum sözleşmesi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| NumberField.rawValue | number | Biçimlendirilmiş metin yerine aritmetik durum |
| NumberField.onRawValueChange | (value: number) => void | Miktarları günceller ve eski seçimleri temizler |
| minValue / maxValue / step | 1 / 8 / 1 | Uygulama sınırları yerel sayısal alana iletilir |
| formatOptions.maximumFractionDigits | 0 | Tam sayı porsiyon gösterimi |
| validationState | valid \| invalid | Uygulama geçerliliği yerel alana yansıtılır |
| Checkbox.checked / onChange | boolean / callback | Denetimli malzeme seçimi |
| Checkbox data attributes | data-checked; data-focus-visible | Yerel seçili ve klavye odağı durumlarını biçimlendirin |
| ToggleButton.pressed / onChange | boolean / callback | Denetimli yerel sabitleme |
| ToggleButton data-pressed | present when pressed | Dolu yerel sabitleme stili |
## Kobalte Tasarım Sistemi Eksiksiz Kılavuz

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

## Kobalte Tasarım Sistemi Kobalte Bileşenlerini Solid Signals ile Bağlayın

### Kobalte Bileşenlerini Solid Signals ile Bağlayın

> Bileşen; porsiyonlar, toplanan malzemeler ve sabitleme için Solid signal'larını kullanır. createMemo, sayısal signal'dan geçerlilik türetir; For ise kararlı bir malzeme koleksiyonu oluşturur. Kobalte'ın denetimli propları bu signal'ları doğrudan okur; güncellemeler için ayrı bir form sağlayıcısı veya React benzeri bir durum adaptörü gerekmez.

NumberField, Checkbox ve ToggleButton bileşenleri kendi bileşen giriş noktalarından içe aktarılır. Her birinin görevi farklıdır: sayısal alan, düzenlenebilir sayısal girişi işler; her onay kutusu toplanan bir malzemeyi temsil eder; toggle ise tarifin sabitlemesini tutar. Aritmetik ve geçersiz kılma kuralları, görsel seçicilere gömülmek yerine uygulama işlevlerinde kalır.

Destekleyici belirtimi okuyun

## Kobalte Tasarım Sistemi Sayısal Durumu Biçimlendirilmiş Metinden Ayrı Tutun

### Sayısal Durumu Biçimlendirilmiş Metinden Ayrı Tutun

NumberField, rawValue={portions()} ve onRawValueChange={update} değerlerini alır. Sayısal signal çarpımı doğrudan belirlerken giriş alanı biçimlendirmeyi ve kullanıcı düzenlemelerini yönetir. Biçimlendirilmiş gösterim metnini yeniden aritmetiğe vermek; ayraçlar veya yerel ayarlar hakkında, yerel temel bileşenin zaten ele aldığı varsayımları ayrıştırma sürecine taşır.

Örnek, bir ile sekiz arasında tam sayı porsiyonlara izin verir; adım değeri birdir ve maximumFractionDigits sıfır olarak ayarlanmıştır. Düzenlenebilir bir alan geçici olarak eksik veya geçersiz bir değer içerebileceğinden, ayrı bir hesaplanan koşul sonlu olma, tam sayı olma ve sınırlar içinde bulunma durumlarını yine de denetler. Değer geçersizken toplamlar uzun çizgi olarak gösterilir ve malzeme onay kutuları devre dışı bırakılır. Arayüz, kullanıcı geçerli bir girdi vermiş gibi görünen ama aslında yanlış olan bir miktar sunmaz.

Destekleyici belirtimi okuyun

## Kobalte Tasarım Sistemi Alanı Yerel Etiketi ve Mesajlarıyla Birleştirin

### Alanı Yerel Etiketi ve Mesajlarıyla Birleştirin

Sayısal alan; Label, DecrementTrigger, Input, IncrementTrigger, Description ve ErrorMessage bileşenlerini içerir. Görünür açıklama hem aralığı hem de porsiyon değişikliğinin sonucunu belirtir. Tetikleyiciler, Daha az porsiyon ve Daha fazla porsiyon gibi anlamlı etiketlere sahiptir; böylece sembolik eksi ve artı işaretlerinin erişilebilir adı tek başına karşılaması gerekmez.

validationState, uygulama koşuluna göre geçerli ve geçersiz arasında geçiş yapar. ErrorMessage, sayfanın başka bir yerine yerleştirilmiş ilgisiz bir paragraf değil, yerel alanın parçasıdır. Gönderilen bir form için Kobalte ham değerlerin serileştirilmesini sağlayan bir HiddenInput da sunar; bu yerel örnekte gönderim uç noktası veya form yükü bulunmadığından HiddenInput yer almaz.

Destekleyici belirtimi okuyun

## Kobalte Tasarım Sistemi Malzeme Seçimini Değişmez Bir Set'te Tutun

### Malzeme Seçimini Değişmez Bir Set'te Tutun

Her malzeme, Checkbox yapısının tüm bileşenlerini kullanır: Input, Control, Indicator ve Label. Gerçek giriş, anlamsal özellikleri ve klavye etkileşimini korurken görünür denetim alanı onay işaretini ve özgün durum stillerini alır. Etiket hem malzemenin adını hem miktarını içerir; böylece toplanan ürünün miktarı da etikete dâhil olur.

mark, bir kimliği eklemeden veya kaldırmadan önce önceki seçimden yeni bir Set oluşturur. Mevcut Set'i tek başına değiştirmek aynı güvenilir signal güncellemesini sağlamaz. Gösterilen sayı Set'in boyutunu okur; her Checkbox ise sabit malzeme kimliğine göre üyeliği denetler. Miktar değiştiğinde tüm seçim temizlenir; çünkü 320 gram toplamak, yeni 400 gram gereksiniminin karşılandığı anlamına gelmez.

- Görünür her malzeme adını Checkbox.Label ile ilişkilendirin.

- Görünür kare özel olarak stillendirilse bile Checkbox.Input bileşenini koruyun.

- Seçimde kararlı kimlikler kullanın ve her güncellemede yeni bir Set oluşturun.

Destekleyici belirtimi okuyun

## Kobalte Tasarım Sistemi Kalıcı Bir Yerel Seçim İçin Toggle Kullanın

### Kalıcı Bir Yerel Seçim İçin Toggle Kullanın

Sabitleme, yalnızca başlığını değiştiren sıradan bir düğme değil; pressed ve onChange özelliklerine sahip bir ToggleButton'dır. Basılı durumu yerel anlamlara ve data-pressed seçicisine yansıtılır. Etiket bir onay işaretiyle birlikte Sabitlendi olarak değişir; yakındaki durum metni ise bunun yalnızca yerel önizlemeyi etkilediğini açıklar.

Sabitleme, malzeme miktarlarını veya seçimi değiştirmez. Porsiyonları değiştirmek malzeme onaylarını temizler, ancak tarifin kimliği değişmediğinden sabitlemeyi korur. Varsayılan tarifi geri yükle işlemi üç model unsurunu birlikte sıfırlar: dört porsiyon, boş bir malzeme Set'i ve basılı olmayan bir sabitleme düğmesi. Bu farklı sıfırlama sınırları, her etkileşimde her şeyi temizlemek yerine durumun anlamını izler.

Destekleyici belirtimi okuyun

## Kobalte Tasarım Sistemi Başsız Denetimler İçin Yeniden Üretilebilir Bir Görsel Yapılandırma Sağlayın

### Başsız Denetimler İçin Yeniden Üretilebilir Bir Görsel Yapılandırma Sağlayın

Tarifin stil sayfası, sayısal girişin düzenleme yüzeyini, adım tetikleyicilerini ve onay kutusunun seçim işlevini birbirinden ayırır. Soluk malzeme metni yalnızca bir onay kutusu işaretlendikten sonra uygulanır; miktarlar okunaklı kalır, böylece kullanıcı toplanan miktarı geçerli porsiyon sayısıyla karşılaştırabilir.

Aralıklar dört, sekiz, on iki, on altı, yirmi dört ve otuz iki piksel olarak belirlenmiştir. Özgün tipografi hiyerarşisinde denetimler için sistem sans-serif yazı tipi, tarif başlığı içinse Georgia kullanılır. Yirmi bir piksellik görsel onay kutusunun yanında, kutuyla ilişkilendirilmiş tam bir etiket bulunur; kullanışlı etkinleştirme alanı etikettir. Bu kesin değerler, okuyucunun ekran görüntüsünden tahmin yürütmeden örneği yeniden oluşturabilmesi için CSS'ın tamamında yer alır.

Destekleyici belirtimi okuyun

## Kobalte Tasarım Sistemi Bilgileri Gizlemeden Kompozisyonun Daralmasına İzin Verin

### Bilgileri Gizlemeden Kompozisyonun Daralmasına İzin Verin

Geniş düzende esnek bir tarif kartı ile 280 piksellik bir porsiyon paneli yan yana gelir. Genişlik 760 piksele düştüğünde tek sütunda üst üste sıralanır. Kart başlığı satırlara bölünebilir, malzeme etiketleri alt satıra geçebilir; miktar ise satıra bölünmeyen kompakt bir değer olarak kalır. En küçük kesme noktasında miktarları gizlemek yerine panel iç boşluğu ve etiket yazı tipi biraz küçültülür.

Salata çizimi özgün CSS içeriğidir ve dekoratif olarak işaretlenmiştir. Tarifin anlamını, çizimden bağımsız olarak tarif adı, porsiyon sayısı ve malzeme miktarları taşır. Çizimi değiştirirken veya kartı daraltırken malzeme etiketlerinin ve miktarlarının tamamını koruyun; bunlar malzeme toplama görevinin asıl girdileridir.

Destekleyici belirtimi okuyun

## Kobalte Tasarım Sistemi Miktar Değişikliklerini Bağımlı Durum Güncellemesi Olarak Ele Alın

### Miktar Değişikliklerini Bağımlı Durum Güncellemesi Olarak Ele Alın

Her porsiyonda beş malzemenin toplamı 250 gram artar. Dört porsiyondan beş porsiyona geçildiğinde görüntülenen toplam 1.000 gramdan 1.250 grama, portakal gereksinimi ise 320 gramdan 400 grama çıkar. Önceden işaretlenen seçimler temizlenir; çünkü eski miktarlara karşılık geliyorlardı. Tarifin kimliği aynı kaldığından tarif sabitlemesi değişmez.

Güncelleme işlevi önce gelen değeri Object.is kullanarak mevcut sinyalle karşılaştırır. Değer değişmediyse geri çağrı kontrol listesini temizlememeli veya miktarın değiştiğini duyurmamalıdır. Geçersiz değerlerde miktarlar gösterilmez ve toplama devre dışı bırakılır; hata mesajı da kabul edilen aralığı açıklar. Bu kurallar, geçersiz bir sayının yanıltıcı bir toplam oluşturmasına izin vermeden ara düzenlemelerin izlenmesini sağlar.

1. Dört porsiyon için Portakal dilimlerini seçin.

2. Beş porsiyona çıkarın ve 400 g portakal, toplam 1.250 g ve toplanmış sıfır ürün olduğunu doğrulayın.

3. Tarifi sabitleyin, ardından varsayılanları geri yükleyip tüm yerel durumun sıfırlandığını doğrulayın.

Destekleyici belirtimi okuyun

## Kobalte Tasarım Sistemi: Sağlam Bir Yapı Kullanın ve Stil Sayfasının Tamamını Ekleyin

### Solid Derlemesini Kullanın ve Stil Sayfasının Tümünü Ekleyin

Kurulumda Vite Solid şablonu kullanılır, doğrulanmış Solid ve Kobalte sürümleri sabitlenir ve uygulama açıkça belirtilen bir kök öğeye bağlanır. Yukarıda gösterilen bileşen ve stil sayfası eksiksiz dosyalardır. Bu örnek için tema sağlayıcısı, simge paketi, harici yazı tipi veya arka uç gerekmez.

Başka bir uygulamayla bütünleştirirken çerçeve derleyicisiyle bileşen üretimini uyumlu tutun. Bir React dönüşümü, Solid JSX'i doğru bir Kobalte uygulamasına dönüştürmez. Benzer şekilde, gelecekteki büyük bir Kobalte API sürümüne geçmeden önce, sabitlenmiş bağımlılığı değiştirmek için o sürümün kendi belgelerine başvurulmalıdır. Tarif miktarları ve palet örnek uygulama verileridir; bunları uyarlamak yerel temel bileşen sözleşmesini değiştirmeyi gerektirmez.

Destekleyici belirtimi okuyun

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

### Eksiksiz reaktif tarif bileşeni

Yerel sayı alanı, onay kutusu anatomisi ve açıkça tanımlanmış geçersiz değer ve sıfırlama davranışına sahip geçiş düğmesi.

```
import {createSignal,createMemo,For} from 'solid-js';
import {NumberField} from '@kobalte/core/number-field';
import {Checkbox} from '@kobalte/core/checkbox';
import {ToggleButton} from '@kobalte/core/toggle-button';
export default function App(){
 const[portions,setPortions]=createSignal(4),[checked,setChecked]=createSignal(new Set()),[pinned,setPinned]=createSignal(false),[notice,setNotice]=createSignal('');
 const ingredients=[{id:'orange',name:'Orange segments',grams:80},{id:'beans',name:'Cooked white beans',grams:90},{id:'leaves',name:'Salad leaves',grams:25},{id:'fennel',name:'Thinly sliced fennel',grams:40},{id:'dressing',name:'Citrus dressing',grams:15}];
 const valid=createMemo(()=>Number.isFinite(portions())&&Number.isInteger(portions())&&portions()>=1&&portions()<=8);
 function update(value){if(Object.is(value,portions()))return;setPortions(value);setChecked(new Set());setNotice('Portions changed. Ingredient checks were cleared for the new quantities.')}
 function mark(id,value){setChecked(previous=>{const next=new Set(previous);value?next.add(id):next.delete(id);return next})}
 function reset(){setPortions(4);setChecked(new Set());setPinned(false);setNotice('Restored four portions and an unchecked ingredient list.')}
 return <main class="recipe-shell"><header><p class="eyebrow">KITCHEN NOTEBOOK · REACTIVE RECIPE CARD</p><h1>A brighter bowl, sized for your table.</h1><p>Change the portions, check the scaled ingredients and pin the recipe locally. The quantities are original sample data for this interface.</p></header><div class="recipe-layout"><section class="recipe-card"><div class="salad-art" aria-hidden="true"><div class="plate"><i/><b/><em/><span/><strong/></div></div><div class="recipe-heading"><div><p class="eyebrow">CITRUS & WHITE BEAN SALAD</p><h2>Fresh, crisp, generous.</h2></div><ToggleButton class="pin" pressed={pinned()} onChange={value=>{setPinned(value);setNotice(value?'Recipe pinned in this local preview.':'Recipe unpinned in this local preview.')}} aria-label="Pin recipe">{pinned()?'Pinned ✓':'Pin recipe'}</ToggleButton></div><p class="recipe-description">Sweet citrus, tender beans and crisp fennel. Use the checklist to gather the amounts for your chosen portion count.</p><div class="ingredient-title"><h3>Ingredients</h3><span>{checked().size} / 5 gathered</span></div><div class="ingredients"><For each={ingredients}>{ingredient=><Checkbox class="ingredient" checked={checked().has(ingredient.id)} onChange={value=>mark(ingredient.id,value)} disabled={!valid()}><Checkbox.Input/><Checkbox.Control class="check-control"><Checkbox.Indicator>✓</Checkbox.Indicator></Checkbox.Control><Checkbox.Label class="ingredient-label"><span>{ingredient.name}</span><strong>{valid()?ingredient.grams*portions()+' g':'—'}</strong></Checkbox.Label></Checkbox>}</For></div></section><aside class="portion-panel"><h2>Make it yours</h2><NumberField rawValue={portions()} onRawValueChange={update} minValue={1} maxValue={8} step={1} formatOptions={{maximumFractionDigits:0}} validationState={valid()?'valid':'invalid'} class="portion-field"><NumberField.Label class="field-label">Portions</NumberField.Label><div class="stepper"><NumberField.DecrementTrigger aria-label="Fewer portions">−</NumberField.DecrementTrigger><NumberField.Input/><NumberField.IncrementTrigger aria-label="More portions">+</NumberField.IncrementTrigger></div><NumberField.Description class="field-description">Choose 1–8 whole portions. Changing the quantity clears ingredient checks.</NumberField.Description><NumberField.ErrorMessage class="field-error">Enter a whole number from 1 to 8.</NumberField.ErrorMessage></NumberField><div class="portion-total"><span>Total ingredients</span><strong>{valid()?ingredients.reduce((s,x)=>s+x.grams,0)*portions()+' g':'—'}</strong></div><h3>A simple preparation order</h3><ol><li>Gather the scaled amounts and drain the cooked beans.</li><li>Combine the orange, fennel and leaves in a bowl.</li><li>Add the beans and dressing, then toss gently.</li></ol><button class="reset" onClick={reset}>Restore default recipe</button><p role="status" class="notice">{notice()||(pinned()?'Recipe pinned in this local preview.':'No shopping order or account update is created.')}</p></aside></div></main>
}
```

Kod referansı

- React JSX derleyicisi yerine Solid Vite şablonunu kullanın.

- rawValue sayısal durumu taşır; tüm malzeme miktarları bu sinyalden türetilir.

- Önceki miktarlar artık güncel olmadığından, porsiyonlar değiştiğinde işaretli öğelerden oluşan Set temizlenir.

### Eksiksiz özgün görsel yapılandırma

Anlamsal özel özellikler, tipografi hiyerarşisi, boşluklar, durum stilleri ve özgün CSS illüstrasyonu.

```
:root{--recipe-canvas:#f6f2ec;--recipe-surface:#fffefa;--recipe-ink:#403a30;--recipe-muted:#807465;--recipe-line:#e6ded2;--recipe-action:#95612f;--recipe-on-action:#fff;--recipe-focus:#b88955;--recipe-soft:#f1e4d3;--recipe-space-1:4px;--recipe-space-2:8px;--recipe-space-3:12px;--recipe-space-4:16px;--recipe-space-6:24px;--recipe-space-8:32px}html,body,#app{height:auto;min-height:0;margin:0}*{box-sizing:border-box}body{font-family:system-ui,sans-serif;color:var(--recipe-ink);background:var(--recipe-canvas)}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible{outline:3px solid var(--recipe-focus);outline-offset:3px}.recipe-shell{max-width:1090px;margin:auto;padding:32px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.13em;color:var(--recipe-muted)}h1{font-size:34px;line-height:1.15;max-width:700px;margin:12px 0}header>p:last-child{font-size:14px;line-height:1.7;color:var(--recipe-muted);max-width:630px}.recipe-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;margin-top:28px}.recipe-card,.portion-panel{background:var(--recipe-surface);border:1px solid var(--recipe-line);border-radius:16px;padding:24px;min-width:0}.portion-panel{align-self:start}.salad-art{height:180px;background:#e8e4d5;border-radius:10px;position:relative;overflow:hidden;margin-bottom:24px}.plate{position:absolute;width:210px;height:210px;left:50%;top:18px;transform:translateX(-50%);border:18px solid #faf8f0;border-radius:50%;background:#dedcbf;box-shadow:0 10px 25px #5e584b1c}.plate i,.plate b,.plate em,.plate span,.plate strong{position:absolute;display:block}.plate i{width:85px;height:42px;border-radius:0 0 85px 85px;background:#dc9658;border:6px solid #f7c888;left:14px;top:18px;transform:rotate(-23deg)}.plate b{width:72px;height:36px;border-radius:0 0 72px 72px;background:#dc9658;border:6px solid #f7c888;left:75px;top:83px;transform:rotate(28deg)}.plate em{width:50px;height:77px;background:#83976a;border-radius:80% 0 80% 0;left:108px;top:4px;transform:rotate(20deg)}.plate span{width:30px;height:50px;background:#667f56;border-radius:80% 0 80% 0;left:25px;top:88px;transform:rotate(-23deg)}.plate strong{width:24px;height:34px;background:#fff3d7;border-radius:50%;left:80px;top:46px;box-shadow:-34px 14px 0 #fff3d7,25px 28px 0 #fff3d7}.recipe-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.recipe-heading h2{font:400 30px/1.2 Georgia,serif;margin:8px 0}.pin{border:1px solid var(--recipe-line);background:white;border-radius:999px;padding:9px 13px;font-size:11px;color:var(--recipe-action)}.pin[data-pressed]{background:var(--recipe-soft);border-color:var(--recipe-action)}.recipe-description{font-size:13px;line-height:1.7;color:var(--recipe-muted)}.ingredient-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px}.ingredient-title h3{font-size:16px;margin:0}.ingredient-title span{font-size:11px;color:var(--recipe-muted)}.ingredients{margin-top:14px}.ingredient{display:flex;gap:12px;align-items:center;border-top:1px solid var(--recipe-line);padding:16px 0;cursor:pointer}.check-control{height:21px;width:21px;border:1px solid #b9ab98;border-radius:5px;flex-shrink:0;display:flex;justify-content:center;align-items:center;font-size:13px}.check-control[data-checked]{background:var(--recipe-action);color:white;border-color:var(--recipe-action)}.check-control[data-focus-visible]{outline:3px solid var(--recipe-focus);outline-offset:3px}.ingredient-label{display:flex;justify-content:space-between;gap:12px;width:100%;font-size:13px;line-height:1.5;cursor:pointer}.ingredient-label strong{white-space:nowrap;font-size:12px}.ingredient[data-checked] .ingredient-label>span{text-decoration:line-through;color:var(--recipe-muted)}.portion-panel>h2{font-size:20px;margin:0 0 24px}.field-label{font-size:13px;font-weight:600}.stepper{display:flex;margin-top:10px;border:1px solid var(--recipe-line);border-radius:8px;overflow:hidden}.stepper button{width:42px;flex-shrink:0;background:var(--recipe-soft);border:0;font-size:21px}.stepper input{width:100%;min-width:0;text-align:center;border:0;padding:12px 0;background:white;color:var(--recipe-ink)}.field-description{font-size:11px;line-height:1.7;color:var(--recipe-muted);margin:10px 0 0}.field-error{font-size:12px;color:#a73324}.portion-total{display:flex;justify-content:space-between;gap:12px;margin:24px 0;padding:18px 0;border-top:1px solid var(--recipe-line);border-bottom:1px solid var(--recipe-line);font-size:12px}.portion-total strong{font-size:19px;white-space:nowrap}.portion-panel h3{font-size:13px;line-height:1.6}.portion-panel ol{padding-left:18px;font-size:12px;line-height:1.7;color:var(--recipe-muted)}.portion-panel li{margin-bottom:12px}.reset{width:100%;padding:12px;border:1px solid var(--recipe-line);border-radius:8px;background:white;color:var(--recipe-action);font-size:12px;margin-top:16px}.notice{font-size:11px;line-height:1.7;color:var(--recipe-muted)}@media(max-width:760px){.recipe-layout{grid-template-columns:minmax(0,1fr)}.recipe-shell{padding:20px}h1{font-size:29px}}@media(max-width:360px){.recipe-shell{padding:14px}.recipe-card,.portion-panel{padding:16px}.ingredient-label{gap:8px;font-size:12px}.ingredient{gap:8px}.ingredient-label strong{font-size:11px}.recipe-heading h2{font-size:27px}}
```

Kod referansı

- Bu recipe-* değerleri, resmî Kobalte tasarım belirteçleri değil, uygulamaya özgü tercihlerdir.

- Eksiksiz stil sayfasında duyarlı yerleşim ve görünür odak stilleri bulunur.

## Kobalte Tasarım Sistemi Aracı Kurulumu

### Uygulamaya Başlangıç Noktası

Solid Vite şablonu, gereken Solid JSX derleyicisini sağlar. Yukarıdaki App.jsx ve style.css örnekleri uygulama kodunun ve stillerin tamamını içerir; sağlayıcı veya harici hizmet gerekmez.

```
// npm create vite@latest kobalte-recipe -- --template solid
// cd kobalte-recipe && npm install
// npm install solid-js@1.9.15 @kobalte/core@0.13.14
// Save the complete examples as src/App.jsx and src/style.css.
// src/index.jsx:
import {render} from 'solid-js/web';
import App from './App.jsx';
import './style.css';
render(() => <App />, document.getElementById('app'));
// index.html: <div id="app"></div><script type="module" src="/src/index.jsx"></script>
// npm run dev
```

### Projeniz İçin Bir İstem

```
Reaktif tarif kartını yeniden oluşturmak için Solid 1.9.15 ile Kobalte 0.13.14 kullanın. NumberField rawValue/onRawValueChange özelliklerini, bir ile sekiz arasındaki sınırları, tam sayı porsiyon doğrulamasını ve Label/Description/ErrorMessage anatomisinin tamamını koruyun. Malzeme gramlarını ve toplamları porsiyon sinyalinden türetin; miktar gerçekten değiştiğinde, tarife sabitleme durumunu koruyup değiştirilemez işaretli-ID Set'ini temizleyin. Yerel Checkbox parçalarını ve ToggleButton pressed/onChange özelliklerini kullanın; miktar geçersizken ürün toplamayı devre dışı bırakın. Sıfırlama sırasında dört porsiyona dönün, hiçbir ürünü işaretli bırakmayın ve tarifi sabitlemeyin. Özgün tarifin CSS içeriğinin tamamını ekleyin; tüm durum yerel kalır.
```

## Kobalte Tasarım Sistemi Kaynakları ve Kapsamı

Kobalte 0.13.14 ve Solid 1.9.15 ile doğrulanmıştır. Tüm recipe-* belirteçleri, CSS illüstrasyonu ve malzeme miktarları özgün örnek verilerdir. Sabitleme ve ürün toplama yerel durumda tutulur; herhangi bir hesaba, alışveriş hizmetine veya kalıcı tarif deposuna bağlanılmaz.

- Başlarken Solid kurulumu ve bileşen içe aktarımları.

- Stil verme Başı olmayan stil uygulaması ve durum seçicileri.

- Sayı alanı Sayısal değerler, sınırlar, alan anatomisi ve ham form girdisi.

- Onay kutusu Input, Control, Indicator ve Label.

- Geçiş düğmesi Basılı durumu, geri çağrı ve klavye davranışı.

## Kobalte Tasarım Sistemi İlgili Kaynaklar

### Mantine

Yerel katılımcı tablosu ve zamanlama çekmecesiyle oluşturulmuş bir Mantine 9 başvuru kaynağı. Gerçek tema ölçeklerini inceleyin, useForm’u TextInput, Select, Checkbox ve DatePickerInput’a bağlayın; ardından yerel bir kayıt eklemeden önce doğrulamayı deneyin.

### Melt UI

Melt UI’ın store/action oluşturucuları, sahip olduğunuz Svelte işaretlemesine erişilebilir davranışlar ekler. Bu kılavuz, radyo düğmesi, kaydırıcı ve anahtar oluşturucularını öznitelikleri, eylemleri ve yazılabilir depoları üzerinden birbirine bağlamak için @melt-ui/svelte 0.86.6 kullanır; bu, daha yeni runes API yapısından farklıdır.

### Naive UI

Doğrulanmış tema nesnesi değerleri, satır seçimi, genişletme, sıralama, sayfalama ve yerel bir toplu inceleme işlemi içeren yerel bir Naive UI veri tablosu çalışma alanı.


- [Uygulama başvurusu](https://kobalte.dev/docs/core/components/number-field)
- [Kaynak](https://kobalte.dev/docs/core/overview/styling)
- [Kaynak](https://kobalte.dev/docs/core/components/number-field)
- [Destekleyici belirtimi okuyun](https://kobalte.dev/docs/core/overview/getting-started)
- [Destekleyici belirtimi okuyun](https://kobalte.dev/docs/core/components/number-field)
- [Destekleyici belirtimi okuyun](https://kobalte.dev/docs/core/components/checkbox)
- [Destekleyici belirtimi okuyun](https://kobalte.dev/docs/core/components/toggle-button)
- [Destekleyici belirtimi okuyun](https://kobalte.dev/docs/core/overview/styling)
- [Kod referansı](https://kobalte.dev/docs/core/components/number-field)
- [Kod referansı](https://kobalte.dev/docs/core/overview/styling)
- [Başlarken Solid kurulumu ve bileşen içe aktarımları.](https://kobalte.dev/docs/core/overview/getting-started)
- [Stil verme Başı olmayan stil uygulaması ve durum seçicileri.](https://kobalte.dev/docs/core/overview/styling)
- [Sayı alanı Sayısal değerler, sınırlar, alan anatomisi ve ham form girdisi.](https://kobalte.dev/docs/core/components/number-field)
- [Onay kutusu Input, Control, Indicator ve Label.](https://kobalte.dev/docs/core/components/checkbox)
- [Geçiş düğmesi Basılı durumu, geri çağrı ve klavye davranışı.](https://kobalte.dev/docs/core/components/toggle-button)