# Adeo Mozaic Tasarım Sistemi

## Adeo Mozaic Tasarım Sistemi Arayüz Önizlemesi

Bir miktar girin veya adımlarla değiştirin, sınırları sınayın ve yerel bir malzeme listesi hazırlayın.

## Adeo Mozaic Tasarım Sistemi Tasarım Başvurusu

Mozaic SCSS/BEM belgeleri: temel ve kurulum sayfaları v1.85.0 sürümünü, miktar kodu başvurusu ise v1.76.0 sürümünü belirtir. Bunlar belgelenmiş başvuru sözleşmeleridir; tüm sayfaların aynı en güncel paket sürümünü izlediği iddiası değildir.

### Sihirli birim başvuruları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| mu025 | 4px | Rem tabanlı boşluk başvurusu; piksel karşılığı, belgelenmiş 16px tabanı varsayar. |
| mu050 | 8px | Rem tabanlı boşluk başvurusu; piksel karşılığı, belgelenmiş 16px tabanı varsayar. |
| mu075 | 12px | Rem tabanlı boşluk başvurusu; piksel karşılığı, belgelenmiş 16px tabanı varsayar. |
| mu100 | 16px | Rem tabanlı boşluk başvurusu; piksel karşılığı, belgelenmiş 16px tabanı varsayar. |
| mu125 | 20px | Rem tabanlı boşluk başvurusu; piksel karşılığı, belgelenmiş 16px tabanı varsayar. |
| mu150 | 24px | Rem tabanlı boşluk başvurusu; piksel karşılığı, belgelenmiş 16px tabanı varsayar. |
| mu175 | 28px | Rem tabanlı boşluk başvurusu; piksel karşılığı, belgelenmiş 16px tabanı varsayar. |
| mu200 | 32px | Rem tabanlı boşluk başvurusu; piksel karşılığı, belgelenmiş 16px tabanı varsayar. |
| mu250 | 40px | Rem tabanlı boşluk başvurusu; piksel karşılığı, belgelenmiş 16px tabanı varsayar. |
| mu300 | 48px | Rem tabanlı boşluk başvurusu; piksel karşılığı, belgelenmiş 16px tabanı varsayar. |
| mu350 | 56px | Rem tabanlı boşluk başvurusu; piksel karşılığı, belgelenmiş 16px tabanı varsayar. |
| mu400 | 64px | Rem tabanlı boşluk başvurusu; piksel karşılığı, belgelenmiş 16px tabanı varsayar. |
| mu500 | 80px | Rem tabanlı boşluk başvurusu; piksel karşılığı, belgelenmiş 16px tabanı varsayar. |
| mu600 | 96px | Rem tabanlı boşluk başvurusu; piksel karşılığı, belgelenmiş 16px tabanı varsayar. |
| mu700 | 112px | Rem tabanlı boşluk başvurusu; piksel karşılığı, belgelenmiş 16px tabanı varsayar. |
### Düğme boyutları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Small height | 32px / 2mu | Kompakt kontroller. |
| Medium height | 48px / 3mu | Mobil miktar düzeninde kullanın. |
| Large height | 56px / 3.5mu | Vurgusu yüksek, büyük eylem. |
| Text + icon, small / medium | 24px icon | Simgeyle etiketi dengeli tutun. |
| Text + icon, large | 32px icon | Büyük düğme. |
| Icon-only, medium / large | 32px icon | Kare kontrol. |
### Gövde metni hiyerarşisi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| mt-body-m | 16px regular | Varsayılan gövde metni. |
| Small body | 14px | Çok satırlı metin için önerilen en küçük boyut. |
| Large body | 18px | Paragraf için önerilen en büyük boyut. |
### Miktar bileşeninin yapısı

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| mc-quantity-selector | Wrapper | İki kontrolü ve giriş alanını içerir. |
| mc-quantity-selector__input | Input element | mc-text-input sınıfını da uygulayın. |
| mc-quantity-selector__button-left | Decrement element | mc-button--square ve --bordered sınıflarını da uygulayın. |
| mc-quantity-selector__button-right | Increment element | mc-button--square ve --bordered sınıflarını da uygulayın. |
| Small composition | mc-text-input--s + mc-button--s | Tüm grubu birlikte değiştirin. |
| is-disabled | Visual state class | Gerçek davranış için yerel disabled özniteliğiyle birlikte kullanın. |
### Derleme ve özelleştirme

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| postcssPluginConfig | @mozaic-ds/css-dev-tools/postcssPluginConfig | Gerekli eklenti listesi. |
| Parser | postcss-scss | SCSS kaynağını okuyun. |
| Production environment | MOZAIC_ENV=production | Üretim eklentisi yapılandırmasını etkinleştirir. |
### Boşluk yardımcı sınıfları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| mu-mb-100 | 16px bottom margin | Bileşenler arasındaki boşluk. |
| mu-pl-050 | 8px left padding | Yardımcı sınıf boşluğu. |
| make-space-util(m, t, 075) | Top margin at mu075 | Seçilen bir yardımcı sınıfı oluşturun. |
## Adeo Mozaic Tasarım Sistemi Tam 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ı.

## Adeo Mozaic Tasarım Sistemi: Yapılandırılabilir perakende kimliğine sahip SCSS bileşenleri

### ADEO kuruluştur, varsayılan hazır ayar değildir

> Mozaic, kaynak stillerini ve belirteçlerini yazı tiplerinden ve SVG simgelerinden ayrı sunar. Varsayılan belirteç teması Leroy Merlin’dir; ADEO ise açıkça seçilmesi gereken bir hazır ayardır. Bu nedenle özgün yeşil önizleme, resmî bir ADEO kurumsal renginin kanıtı değildir.

ADEO hazır ayarı için preset: "adeo" ve tokens.localTokensExportPath içeren bir mozaic.config.js oluşturun, ardından npx mozaic-tokens-build komutunu çalıştırın. Özel belirteç dizini, ilgisiz değerleri değiştirmek yerine karşılık gelen JSON yollarını derin birleştirmeyle birleştirir. Tema oluşturma ve bileşen stillerini biçimlendirme, derlemenin ayrı konularıdır.

- styles, SCSS bileşenlerini sağlar.

- tokens, kaynak ve oluşturulmuş belirteç biçimlerini sağlar.

- web-fonts ve icons, ayrı varlıkları sağlar.

- css-dev-tools, derleme ve lint yapılandırmasını sağlar.

Destekleyici belirtimi okuyun

## Adeo Mozaic Tasarım Sistemi Metin kapsayıcılarını sabitlemeden sihirli birimi kullanın

### Rem tabanlı 16px başvuru değeri

Mozaic ölçeğinin küçük değerlerinde çeyrek birimlik, orta bölümünde yarım birimlik, büyük uzaklıklarda ise tam birimlik artışlar kullanılır. Başvuru tablosu, ikinci bir boşluk sistemi uydurmadan adlandırılmış gerçek değerleri sunar.

Planlayıcıda 16px aralıklar, 24px iç boşluk ve 48px kontrol yüksekliği kullanılır. Bu değerler, çevredeki kartların ve metinlerin büyümesine olanak tanırken bileşeni de aynı ritme oturtur. Çevrilmiş veya büyütülmüş bir etiketi sabit yükseklikteki içerik kutusunda kırpmak yerine minimum kontrol yüksekliği belirlemek daha uygundur.

Destekleyici belirtimi okuyun

## Adeo Mozaic Tasarım Sistemi Yoğun kontrollerin yanında gövde metnini okunaklı tutun

### Üç kullanışlı gövde metni boyutu

Belgelenmiş gövde metni ölçeğinin merkezinde 16px normal ağırlık bulunur. Çok satırlı metin için önerilen en küçük boyut 14px, paragraf için önerilen en büyük boyut ise 18px’tir. Önizleme sistem yazı tipi yedeğini kullanır ve Mozaic web-fonts paketini içerdiği izlenimini vermez.

Projeyi adlandırmak için büyük başlığı, hesaplamayı açıklamak için gövde metnini, örneğin kapsamını belirtmek içinse daha küçük destekleyici satırı kullanın. Malzeme değerleri, raf illüstrasyonunun içine çizilmiş metinler değil, gerçek metinler olarak kalır.

Destekleyici belirtimi okuyun

## Adeo Mozaic tasarım sistemi Tek bileşen, uyumlu üç öğe

### Sarmalayıcı, uygulama durumunu sağlamaz

Miktar seçici; kare, kenarlıklı bir azaltma düğmesini, sayısal giriş alanını ve bununla uyumlu bir artırma düğmesini bir araya getirir. Metin girişi ve düğme dâhil üç bileşenin de stillerini import edin; yalnızca quantity-selector import etmek, belgelenmiş bileşim için yeterli değildir.

Kompakt bir varyant için düğme ve giriş alanı boyutlarını birlikte değiştirin. Kullanım yönergeleri, küçük kesme noktalarında orta boyutun kullanılmasını gerektirir; bu nedenle telefonda her şeyi küçültmek yanlış bir optimizasyondur. Önizleme, 48px kontrolleri korur ve çevredeki düzeni dikey olarak sıralar.

Destekleyici belirtimi okuyun

## Adeo Mozaic Tasarım Sistemi Sınır stilleri gerçek davranışla uyumlu olmalıdır

### Yazılan girişin, artı ve eksi düğmelerinden daha fazla durumu vardır

Özgün örnek, 1 ile 12 arasındaki tam sayıları doğrular. Değer bir olduğunda azaltma gerçekten devre dışıdır; on iki olduğunda ise artırma devre dışıdır. is-disabled sınıfı tek başına klavyeyle etkinleştirmeyi engellemez. Yerel disabled özniteliğiyle görsel sınıf eşzamanlı tutulur.

Boş veya kesirli olarak girilen değer sessizce makul görünen bir malzeme listesine dönüştürülmez. Gönderim, kabul edilen aralığı açıklar ve odağı alana taşır. Hazırlanan sonuç önceki miktara karşılık geldiğinden, sonraki düzenleme eski sonucu temizler. Raf hesabı, kurgusal örnek verileridir; yapısal veya satın alma tavsiyesi değildir.

1. Boş dizeyi sıfır saymadan girilen değeri okuyun.

2. Örnek sayımları hesaplamadan önce tam sayı ve aralık koşullarını doğrulayın.

3. Her iki sınır düğmesini ve erişilebilir hata durumunu güncelleyin.

4. Yalnızca doğrulama başarılı olduktan sonra yerel bir anlık görüntü oluşturun.

Destekleyici belirtimi okuyun

## Adeo Mozaic Tasarım Sistemi Projenin sonucu için tek bir dolu eylem kullanın

### Adımlarla değiştirme ve liste hazırlama işlemlerini ayırın

Adım seçici, bir giriş değerini değiştirdiğinden sade kenarlıklı kare kontroller kullanır. Dolu Malzeme listesi hazırla düğmesi formun tamamına yönelik bir eylemdir. Yan yana duran, aynı renkteki iki dolu eylem bu ayrımı belirsizleştirir.

Sonuç mesajında hiçbir şeyin sipariş edilmediği açıkça belirtilir. Sahte bir yükleme durumu, ödeme akışı veya ağ üzerinden gönderim yoktur. Değerlerle eylemler arasındaki ilişkiyi göstermek için somut bir özet yeterlidir.

Destekleyici belirtimi okuyun

## Adeo Mozaic Tasarım Sistemi Belgelenmiş import ifadelerini Mozaic’in işlem hattından derleyin

### Önce ayarlar, ardından bileşen çıktısı

Tüm ayarları import eden ifade değişkenleri, işlevleri ve mixin’leri sağlar, ancak tek başına bileşen CSS çıktısı üretmez. Sağlanan paket bunu text-input, button ve quantity-selector ile devam ettirir. Sunulan eklenti yapılandırması, Mozaic import yollarını çözümler ve gerekli dönüşümleri uygular.

Eklenti paketi bir CLI çalıştırıcısı sağlamadığından kurulum, PostCSS CLI çalıştırıcısını içerir. Üretim için MOZAIC_ENV eklenti yapılandırmasını değiştirir. Kurulum sayfası artık Node 20+ sürümünü zorunlu, Dart Sass’ı ise önerilen seçenek olarak belirtir; Node Sass’tan söz eden eski metinler, kullanımdan kaldırılmış derleyiciyi yüklemek için gerekçe sayılmamalıdır.

Destekleyici belirtimi okuyun

## Adeo Mozaic Tasarım Sistemi Yardımcı sınıf boşluklarını bileşenlerin iç yapısından ayrı tutun

### Bileşenin kendi düzenini belirlediği yerlerde ölçek değerlerini kullanın

Mozaic’in margin ve padding yardımcı sınıfları, bileşenler arasındaki boşluklar için tasarlanmıştır. Yeni bir bileşenin içinde, bileşenin kendi başına çalışabilmesi için SCSS sihirli birim değişkenlerini kullanın. calc($mu025 - 1px) örneğinde olduğu gibi, amaçlanan ritmi korumak için hedef boyuttan bir kenarlık kalınlığını çıkarmak gerekebilir.

Çevrimdışı örnek, yerel Mozaic CSS uygulaması olduğu iddiasında bulunmaz. Belgelenmiş boyutları ve miktar bileşeninin yapısını özgün renklerle, CSS raf illüstrasyonuyla ve yalnızca yerel çalışan bir etkileşimle yorumlar. Ayrı kod bloğunda gerçek kütüphane sınıfları ve derleme bağlantısı sunulur.

Destekleyici belirtimi okuyun

## Adeo Mozaic Tasarım Sistemi Bileşen Örnekleri

### Tamamlanmış, bağımsız ve etkileşimli örnek

Belgenin tamamını index.html olarak kaydedip tarayıcıda açın. Mozaic’in sihirli birim ve orta miktar denetiminin özgün, çevrimdışı HTML/CSS yorumu; yerel kütüphane CSS değil, özgün çizim ve uygulama paleti.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>Shelf materials planner</title><style>*{box-sizing:border-box}body{margin:0;background:#f6f5ef;color:#242920;font:16px/1.5 Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #23682c;outline-offset:4px}header{border-bottom:1px solid #d9ddd1;padding:16px 32px;display:flex;justify-content:space-between;gap:16px}header b{font-size:18px}header span,.note{font-size:14px;color:#5a6154}main{max-width:1056px;margin:auto;padding:32px}h1{font-size:36px;line-height:1.1;letter-spacing:-1px;margin:8px 0 16px}p{margin:0 0 16px}.eyebrow{font-size:12px;letter-spacing:2px;color:#23682c;font-weight:bold}.layout{display:grid;grid-template-columns:1.1fr 1fr;gap:32px}.art{background:#e5eadc;border-radius:4px;min-height:350px;display:grid;place-items:center;position:relative;overflow:hidden}.wall{width:78%;height:220px;background:linear-gradient(90deg,transparent 49.6%,#d8dfcf 50%,transparent 50.4%);position:relative}.board{position:absolute;left:0;right:0;top:130px;height:18px;background:repeating-linear-gradient(0deg,#bd9b6e 0 3px,#c6a477 3px 7px);box-shadow:0 10px 12px #26341b20;transform:skewY(-3deg)}.bracket{position:absolute;top:148px;width:12px;height:62px;background:#727867;transform:skewY(-3deg)}.bracket.a{left:15%}.bracket.b{right:15%}.pot{position:absolute;left:23%;top:58px;width:47px;height:72px;background:#c88462;border-radius:3px 3px 15px 15px}.leaf{position:absolute;width:52px;height:34px;background:#3d6e38;left:4px;top:-22px;border-radius:100% 0 100% 0;transform:rotate(-25deg)}.leaf:after{content:'';position:absolute;width:45px;height:30px;background:#638a47;left:20px;top:-15px;border-radius:0 100% 0 100%;transform:rotate(45deg)}.books{position:absolute;top:48px;right:20%;height:80px;display:flex;gap:4px;align-items:end}.books i{width:18px;height:76px;background:#f4efe4;display:block;border-top:6px solid #7f9673}.books i:nth-child(2){height:88px;background:#d3b795}.books i:nth-child(3){height:68px;background:#718268;transform:rotate(-10deg)}.art small{position:absolute;bottom:16px;left:24px;color:#526448}.panel{background:#fff;padding:24px;border:1px solid #d9ddd1;border-radius:4px}h2{font-size:24px;line-height:1.25;margin:0 0 8px}label{display:block;font-weight:bold;margin:24px 0 8px}.quantity{display:flex;max-width:240px;margin-bottom:8px}.quantity button,.quantity input{height:48px;border:1px solid #727a6a;background:#fff}.quantity button{width:48px;color:#23682c;font-size:24px;flex-shrink:0}.quantity button:first-child{border-radius:4px 0 0 4px}.quantity button:last-child{border-radius:0 4px 4px 0}.quantity input{width:96px;min-width:0;border-left:0;border-right:0;text-align:center;appearance:textfield}.quantity input::-webkit-inner-spin-button{appearance:none}button:disabled{color:#a2a69b;background:#f1f2ed;cursor:default}.materials{margin:24px 0;display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid #d9ddd1;padding:16px 0}.materials strong{font-size:24px;display:block}.materials span{font-size:14px;color:#62695c}.primary{min-height:48px;padding:12px 24px;background:#23682c;color:#fff;border:0;border-radius:4px;width:100%;font-weight:bold}.error{color:#ac2323;margin:8px 0;font-size:14px}.result{margin-top:16px;background:#eaf3e2;padding:16px;border-left:4px solid #23682c}.result:empty{display:none}footer{padding-top:24px;font-size:14px;color:#62695c}@media(max-width:650px){header{padding:16px}header span{max-width:140px}main{padding:24px 16px}h1{font-size:32px}.layout{grid-template-columns:1fr;gap:16px}.art{min-height:260px}.panel{padding:24px}.materials{gap:12px}}
</style><header><b>PROJECT WORKSHOP</b><span>Original Mozaic interpretation</span></header><main><p class="eyebrow">SMALL PROJECT · BIG DIFFERENCE</p><h1>Make room for what matters.</h1><p>Plan a simple shelf arrangement and prepare its sample materials list.</p><div class="layout"><div class="art" role="img" aria-label="Original illustration of a wooden shelf with books and a potted plant"><div class="wall"><div class="board"></div><div class="bracket a"></div><div class="bracket b"></div><div class="pot"><div class="leaf"></div></div><div class="books"><i></i><i></i><i></i></div></div><small>Original shelf illustration</small></div><form class="panel" id="planner" novalidate><h2>Your shelf project</h2><p class="note">Each sample shelf uses one board, two brackets and four screws.</p><label for="quantity">Number of shelves</label><div class="quantity"><button id="minus" type="button" aria-label="Remove one shelf" aria-controls="quantity">−</button><input id="quantity" type="number" min="1" max="12" step="1" required value="2" aria-describedby="hint error"><button id="plus" type="button" aria-label="Add one shelf" aria-controls="quantity">+</button></div><p class="note" id="hint">Choose a whole number from 1 to 12.</p><p class="error" id="error" role="alert"></p><div class="materials" aria-live="polite"><div><strong id="boards">2</strong><span>Boards</span></div><div><strong id="brackets">4</strong><span>Brackets</span></div><div><strong id="screws">8</strong><span>Screws</span></div></div><button type="submit" class="primary">Prepare materials list</button><div id="result" class="result" role="status"></div></form></div><footer>Local interaction example. No order is placed. Sample quantities are illustrative, not structural guidance.</footer></main><script>const input=document.querySelector('#quantity'),minus=document.querySelector('#minus'),plus=document.querySelector('#plus'),error=document.querySelector('#error'),result=document.querySelector('#result');function number(){return input.value.trim()===''?NaN:Number(input.value)}function valid(n){return Number.isInteger(n)&&n>=1&&n<=12}function update(show=false){const n=number(),ok=valid(n);result.textContent='';minus.disabled=ok&&n===1;plus.disabled=ok&&n===12;input.setAttribute('aria-invalid',String(!ok&&show));error.textContent=!ok&&show?'Enter a whole number from 1 to 12.':'';document.querySelector('#boards').textContent=ok?n:'—';document.querySelector('#brackets').textContent=ok?n*2:'—';document.querySelector('#screws').textContent=ok?n*4:'—';return ok}minus.onclick=()=>{input.value=String(Math.max(1,(valid(number())?number():1)-1));update()};plus.onclick=()=>{input.value=String(Math.min(12,(valid(number())?number():0)+1));update()};input.oninput=()=>update();document.querySelector('#planner').onsubmit=e=>{e.preventDefault();if(!update(true)){input.focus();return}result.textContent=`Local list prepared: ${number()} boards, ${number()*2} brackets and ${number()*4} screws. Nothing was ordered.`};update();</script></html>
```

Kod referansı

- Raf miktarları bir sipariş değil, malzeme listesi oluşturur. Yerel işaretleme, belgelenmiş Mozaic PostCSS çıktısını gerektirir; bu bağımsız belge kendi yorumlama stillerini içerir.

### Sınırları belirlenmiş raf miktarı ve türetilmiş malzeme listesi

Yerel Mozaic sınıfları, yerel bir sayı giriş alanını çevreler. Özgün JavaScript tam sayı doğrulaması, sınırda devre dışı bırakma ve yalnızca yerel bir özet sağlar.

```
<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./mozaic.css"><title>Shelf materials</title>
<main><h1>Plan a shelf project</h1>
<form id="planner" novalidate>
<label for="quantity">Number of shelves</label>
<p id="hint">Choose 1 to 12. Each sample shelf needs two brackets and four screws.</p>
<div class="mc-quantity-selector">
<button type="button" id="minus" class="mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-left" aria-controls="quantity" aria-label="Remove one shelf">−</button>
<input id="quantity" name="quantity" class="mc-text-input mc-quantity-selector__input" type="number" min="1" max="12" step="1" value="2" required aria-describedby="hint error">
<button type="button" id="plus" class="mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-right" aria-controls="quantity" aria-label="Add one shelf">+</button>
</div>
<p id="error" role="alert"></p><p id="counts" aria-live="polite"></p>
<button type="submit" class="mc-button">Prepare materials list</button>
<p id="result" role="status"></p></form></main>
<script>
const input=document.querySelector('#quantity'), minus=document.querySelector('#minus'), plus=document.querySelector('#plus');
const error=document.querySelector('#error'), counts=document.querySelector('#counts'), result=document.querySelector('#result');
function number(){return input.value.trim()===''?NaN:Number(input.value);}
function valid(n){return Number.isInteger(n)&&n>=1&&n<=12;}
function update(showError=false){
 const n=number(),ok=valid(n); result.textContent='';
 minus.disabled=ok&&n===1; plus.disabled=ok&&n===12;
 minus.classList.toggle('is-disabled',minus.disabled);plus.classList.toggle('is-disabled',plus.disabled);
 input.setAttribute('aria-invalid',String(!ok&&showError));
 error.textContent=!ok&&showError?'Enter a whole number from 1 to 12.':'';
 counts.textContent=ok?`${n} boards · ${n*2} brackets · ${n*4} screws`:'Enter a quantity to calculate materials.';
 return ok;
}
minus.onclick=()=>{input.value=String(Math.max(1,(valid(number())?number():1)-1));update();};
plus.onclick=()=>{input.value=String(Math.min(12,(valid(number())?number():0)+1));update();};
input.oninput=()=>update();
document.querySelector('#planner').onsubmit=e=>{e.preventDefault();if(!update(true)){input.focus();return;}result.textContent=`Local list prepared: ${number()} boards, ${number()*2} brackets and ${number()*4} screws. Nothing was ordered.`;};
update();
</script></html>
```

Kod referansı

- İki adım düğmesi, formu göndermemeleri için type="button" kullanır.

- Yerel min/max/step değerleri anlamlarını korurken özel doğrulama boş ve kesirli girişleri denetler.

- Bir miktarın değiştirilmesi, önceki hazırlanmış anlık görüntüyü geçersiz kılar.

## Adeo Mozaic Tasarım Sistemi Yapay Zekâ Ajanı Kurulumu

### Uygulamaya Başlangıç Noktası

Belgelenmiş PostCSS yapılandırmasını kullanan genel SCSS iş akışı. HTML örneğini public/index.html yoluna kaydedin. Yerel paket derlemesi burada çalıştırılmadı; çevrimdışı önizleme bağımsız bir yorumdur. Güncel kurulum yönergeleri, eski PostCSS sayfasındaki Node Sass ifadesinin yerine Dart Sass kullanır.

```
# Node 20+. Use a CommonJS project for this configuration.
npm install @mozaic-ds/styles sass
npm install --save-dev @mozaic-ds/css-dev-tools postcss postcss-cli postcss-scss
# Save the configuration and SCSS below, then build:
npx postcss src/bundle.scss --output public/mozaic.css
# Production build on a POSIX shell:
MOZAIC_ENV=production npx postcss src/bundle.scss --output public/mozaic.css

// postcss.config.js
module.exports = {
  syntax: require('postcss-scss'),
  plugins: require('@mozaic-ds/css-dev-tools/postcssPluginConfig')
};

// src/bundle.scss — settings must precede components.
@import 'settings-tools/all-settings';
@import 'components/c.text-input';
@import 'components/c.button';
@import 'components/c.quantity-selector';
```

### Projeniz İçin Bir İstem

```
text-input, button ve quantity-selector bileşenlerinden önce settings-tools/all-settings kullanan bir Mozaic SCSS bileşimi oluştur. Küçük ekranlarda 48px orta boy denetimleri eşleştir, sınır düğmelerini yerel olarak devre dışı bırak, girilen tam sayıları doğrula ve yalnızca yerel bir özet oluştur. Belgelenmiş PostCSS işlem hattını kullan; varsayılan Leroy Merlin temasıyla ADEO ön ayarını birbirinden ayır.
```

## Adeo Mozaic Tasarım Sistemi Kaynakları ve Kapsamı

Mozaic’e bağımsız bir OpenDesign referansı. Örnek, ADEO ya da Leroy Merlin mağazası, canlı sipariş veya yapısal yönlendirme değildir. Belge anlık görüntülerinde farklı sürüm etiketleri bulunur.

- Kurulum Paketler, Node ve Dart Sass.

- PostCSS yapılandırması Gerekli eklenti işlem hattı.

- SCSS içe aktarımları Ayar bağımlılığı ve içe aktarma sırası.

- Sihirli birim Gerçek aralık adımları.

- Gövde stilleri Belgelenmiş paragraf boyutları.

- Düğmeler Boyutlar ve eylem hiyerarşisi.

- Miktar kullanımı Uyarlanabilir boyut ve amaçlanan kullanım.

- Miktar kodu BEM yapısı ve bağımlılık içe aktarımları.

- Token özelleştirme Varsayılan tema ve geçersiz kılmalar.

- Boşluk yardımcı sınıfları Yardımcı sınıflar ve bileşen aralıkları.

## Adeo Mozaic Tasarım Sistemiyle İlgili Kaynaklar

### Adobe Spectrum

Seçilebilir bir yaratıcı varlık tablosu ve dışa aktarma ön ayarı inceleyicisiyle React Spectrum v3’ü keşfedin. Provider temalarını ve giriş ölçeğini, desteklenen stil özelliklerini, anahtarlı koleksiyonları ve v3 ile daha yeni Spectrum 2 uygulaması arasındaki farkı öğrenin.

### Alaska Airlines Auro

Auro’nun Alaska temasını gerçek anlamsal renk ve yazı belirteçleri, sınıf tabanlı tipografi ve yerel uçuş bileşeniyle keşfedin. Özgün iki uçuş kaydı, havayolu envanterini veya rezervasyonu temsil etmeden yerel filtreleme ve seçimi gösterir.

### Arco Design

Arco’nun kontrollü Transfer bileşeniyle bir rapor bölümü seçicisi oluşturun. Gerçek boşluk ve boyut ölçeklerini, CSS değişken adlandırma kurallarını, anlamsal arka plan katmanlarını ve satırları seçmekle taşımak arasındaki farkı keşfedin.


- [Uygulama başvurusu](https://mozaic.adeo.cloud/components/form/quantity-selector/)
- [Kaynak](https://mozaic.adeo.cloud/foundations/spacing/magic-unit/)
- [Kaynak](https://mozaic.adeo.cloud/components/buttons/)
- [Kaynak](https://mozaic.adeo.cloud/foundations/typography/body-styles/)
- [Kaynak](https://mozaic.adeo.cloud/components/form/quantity-selector/code/)
- [Kaynak](https://mozaic.adeo.cloud/get-started/developers/installation/postcss/)
- [Kaynak](https://mozaic.adeo.cloud/foundations/spacing/margin-and-paddings/code/)
- [Destekleyici belirtimi okuyun](https://mozaic.adeo.cloud/get-started/developers/customize-tokens/)
- [Destekleyici belirtimi okuyun](https://mozaic.adeo.cloud/foundations/spacing/magic-unit/)
- [Destekleyici belirtimi okuyun](https://mozaic.adeo.cloud/foundations/typography/body-styles/)
- [Destekleyici belirtimi okuyun](https://mozaic.adeo.cloud/components/form/quantity-selector/)
- [Destekleyici belirtimi okuyun](https://mozaic.adeo.cloud/components/form/quantity-selector/code/)
- [Destekleyici belirtimi okuyun](https://mozaic.adeo.cloud/components/buttons/)
- [Destekleyici belirtimi okuyun](https://mozaic.adeo.cloud/get-started/developers/installation/import/)
- [Destekleyici belirtimi okuyun](https://mozaic.adeo.cloud/foundations/spacing/margin-and-paddings/code/)
- [Kod referansı](https://mozaic.adeo.cloud/components/form/quantity-selector/)
- [Kod referansı](https://mozaic.adeo.cloud/components/form/quantity-selector/code/)
- [Kurulum Paketler, Node ve Dart Sass.](https://mozaic.adeo.cloud/get-started/developers/installation/)
- [PostCSS yapılandırması Gerekli eklenti işlem hattı.](https://mozaic.adeo.cloud/get-started/developers/installation/postcss/)
- [SCSS içe aktarımları Ayar bağımlılığı ve içe aktarma sırası.](https://mozaic.adeo.cloud/get-started/developers/installation/import/)
- [Sihirli birim Gerçek aralık adımları.](https://mozaic.adeo.cloud/foundations/spacing/magic-unit/)
- [Gövde stilleri Belgelenmiş paragraf boyutları.](https://mozaic.adeo.cloud/foundations/typography/body-styles/)
- [Düğmeler Boyutlar ve eylem hiyerarşisi.](https://mozaic.adeo.cloud/components/buttons/)
- [Miktar kullanımı Uyarlanabilir boyut ve amaçlanan kullanım.](https://mozaic.adeo.cloud/components/form/quantity-selector/)
- [Miktar kodu BEM yapısı ve bağımlılık içe aktarımları.](https://mozaic.adeo.cloud/components/form/quantity-selector/code/)
- [Token özelleştirme Varsayılan tema ve geçersiz kılmalar.](https://mozaic.adeo.cloud/get-started/developers/customize-tokens/)
- [Boşluk yardımcı sınıfları Yardımcı sınıflar ve bileşen aralıkları.](https://mozaic.adeo.cloud/foundations/spacing/margin-and-paddings/code/)