Soul’un veri tablosu sözleşmesini altı piksellik boşlukları, katmanlı renk rolleri ve kompakt Inter yazı tipiyle birlikte inceleyin. Toplu seçimi, eksik veri gösterimini ve özet satırlarını karşılaştırın; ardından doğrulanmış özel React paketi giriş noktalarını inceleyin.
Soul tasarım yönergelerinin ve doğrulanmış açık mod token’larının bağımsız HTML/CSS yorumu. Sistem yazı tipi yedeği kullanılır; özel React varlıkları içermez. · Uygulama başvurusu
02
Emplifi Soul Tasarım Sistemi tasarım referansı
Soul’un herkese açık tasarım belgeleri ve canlı resmî Storybook. Bunlar, adlandırılmış açık mod temel değerleridir; her belge sayfasının ve paket sürümünün aynı durumda olduğu iddiasını taşımaz. Önizleme, yerel yedek olarak sistem yazı tiplerini kullanır.
Emplifi Soul Tasarım Sistemi tasarım yönergeleri ve uygulama durumu
Bir bileşen adından paket olduğu sonucunu çıkarmayın
Soul, Emplifi’nin tasarım sistemidir. Herkese açık tasarım referansları ve Storybook incelenebilir; ancak resmî hızlı başlangıç kılavuzu özel bir npm kapsamına erişim gerektirir. Tarayıcı örneği bağımsız bir HTML/CSS yorumudur; Soul React paketini içermez. Tablo davranışı, herkese açık sayfasında React bileşeninin hâlâ planlanmış olarak işaretlendiği tasarım yönergelerini temel alır.
Sunulan React örneğinde bilerek anlamsal bir tablo ve gerçek Soul Button kontrolleri kullanılır. Belgelenmemiş bir DataTable dışa aktarımı olduğu iddia edilmeden, çalışan bir uygulama durumu sunar. Herkese açık belgelerin okunabilir olması, pakete erişim ya da özel varlıkları yeniden dağıtma izni vermez.
Emplifi Soul Tasarım Sistemi: Satır seçiminin ötesinde bir veri tablosu sözleşmesi
Başlıklar, özetler ve eksik değerler
Soul’un tablo yönergelerinde başlıklar, satırlar, hücreler ve isteğe bağlı özet çubuğu birbirinden ayrılır. Sayısal değerler sağa, metinsel içerik sola hizalanır. Özet; toplamları veya ortalamaları gösterebilir, bu nedenle etiketi, açıklanmayan bir sayı yerine yapılan işlemi belirtmelidir.
Bir ölçüm uygulanabilir değilse (örneğin, görsel için video süresi) N/A kullanın. Uzun çizgi, kullanılamayan veya bilinmeyen verileri belirtir. Bu durumlar sıfıra dönüştürülmemelidir; böyle yapmak özetin ve ona dayalı karşılaştırmaların yorumunu değiştirir.
Mevcut örnekte sıralama ve seçilebilir satırlar bulunur; özet hesaplaması uygulanmaz.
Tasarım referansında React tablosu planlanmış olarak işaretlendiğinden, sunulan kod Soul DataTable içe aktarımı uydurmak yerine tablonun işaretlemesini kendi içinde tanımlar.
Soul, toplu eylem çubuğunu koleksiyonun altına yerleştirir ve toplu seçim etkin olduğunda tek tek satır eylemlerini gizler. Başlık onay kutusunun seçili, seçili değil ve belirsiz durumları vardır. Aynı anda yalnızca tek bir sütun sıralanabilir.
Örnekte üç kaydın tümü yereldir ve seçim kapsamı içinde kalır. Erişim başlığı, sıralama yönünü bildirir; seçili kimlikler sıralama değiştiğinde korunur. Gelecekte eklenecek satır düzeyinde bir eylem, toplu işlem araç çubuğuyla rekabet etmek yerine belgelenmiş toplu mod kısıtlamasına uymalıdır.
Emplifi Soul Tasarım Sistemi: Nötr katmanlarla derinlik oluşturun
Sade bir CX çalışma alanı
Soul’un açık modu gri ve beyaz yüzeyleri dönüşümlü kullanırken koyu katmanlar derinlik arttıkça giderek açılır. Örnekte gri bir sayfa, beyaz bir tablo yüzeyi ve kompakt koyu bir gezinme şeridi kullanılır. Renk, her satırı süslemek yerine rolünü tanımlar.
Etkileşimli mavi yalnızca inceleme eylemi ve seçili kontroller için kullanılır. Küçük özgün gönderi çizimleri dekoratif renk taşır. Bu çizimler, gönderi konularına yanlış bir başarı veya tehlike anlamı yüklemeden içerik konularını ayırt etmeye yardımcı olur.
Emplifi Soul Tasarım Sistemi: Hiyerarşiyi kaybetmeden kompakt yazı tipi kullanın
Birincil yazı tipi Inter’dir
Soul, arayüz genelinde Inter; Arapça metinler için Noto Sans Arabic ve kod için Noto Sans Mono belirtir. Önizleme bu yazı tipi dosyalarını içermediğinden sistem yazı tiplerini kullanır. Ölçüler, yayımlanmış tariflere dayanır.
30/42 boyutundaki ana başlık, 13/18 boyutundaki gövde metni düzeninin önüne geçer. Tablo rakamlarında tabular biçimler kullanılır. Tabloda aşırı büyük bir pazarlama başlığı stili kullanılmaz; gönderi başlıkları da görsele gömülmüş etiketler yerine okunabilir metin olarak kalır.
Emplifi Soul Tasarım Sistemi: Altı piksellik ritim ve kapsayıcı yarıçapı
Yoğun kontrolleri düzenli tutun
Temel aralık birimi 6 px’dir. 12, 18, 24 ve 36 px gibi değerler daha büyük ilişkileri kurarken 3 ve 9 px, varsayılan sayfa kenar boşlukları yerine kompakt bileşenlerin iç aralıklarında kullanılır. Belgelenmiş içerik dolgusu, 1559 px ve altındaki genişliklerde 24 px; 1560 px ve üzerindeki genişliklerde 36 px olur.
Soul, aralık değerlerini T-shirt tipi bileşen boyutlarından ayrı tutar. Medium boyutta bir kontrol, --space-6 değildir. Örnekte 36 px kontroller, 6 px öğe yuvarlatması ve 8 px kapsayıcı yarıçapı kullanılır.
Emplifi Soul Tasarım Sistemi: Bir sonraki eylemi açıklamak için vurgu kullanın
Tek bir birincil inceleme eylemi
Soul’un primary varyantı en önemli eylemi vurgular. Light ve ghost varyantları destekleyici işlemler için; invisible kontroller ise yoğun araç çubuklarında görsel ağırlığı azaltmak için kullanılır. Önizlemede yalnızca toplu inceleme eylemi dolgulu birincil stile sahiptir.
Seçimi iptal et, seçili satırları temizler ve inceleme etiketlerini değiştirmez. İnceleme işlemi yalnızca yerel inceleme durumunu değiştirir ve iletide hiçbir şeyin yayımlanmadığı açıkça belirtilir. Kontrol metninde cümle düzeninde büyük harf kullanılır.
Emplifi Soul Tasarım Sistemi: Özel kitaplığı bilinçli biçimde yükleyin
Bileşenleri birleştirmeden önce Foundation ve CSS
Resmî giriş noktası, @sbks/ds-design-library paketinden variables.css ve default-styles.css dosyalarını içe aktarır. Sass giriş noktası mixin’leri sağlar; global CSS öğesinden ayrıdır. Button, @sbks/ds-button paketinden gelir.
Canlı Button API; isLoading, isSelected, isApplied ve badge özelliklerini içerir. Enum destekli proplar için TypeScript içinde kitaplığın dışa aktardığı enum sabitleri gerekir. Bu örnekte enum içe aktarma yolunu tahmin etmek yerine doğrulanmış varsayılan LIGHT varyantı kullanılır.
Resmî hızlı başlangıç kılavuzunu izleyerek özel kapsama erişim ve derleme yükleyicisi kurulumunu tamamlayın.
Temel CSS öğesini uygulama giriş noktasında bir kez içe aktarın ve seçilen yazı tipi varlıklarını yapılandırın.
Sunulan kontrollü tablo örneğini bağlayın; ardından herhangi bir yayımlama iş akışına bağlamadan önce seçimi, iptali ve yerel incelemeyi test edin.
Belgenin tamamını index.html olarak kaydedip tarayıcıda açın. Soul tasarım yönergelerinin ve doğrulanmış açık mod token’larının bağımsız HTML/CSS yorumu. Sistem yazı tipi yedeği kullanılır; özel React varlıkları içermez.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Content review</title><style>:root{--color-layer-level-0:#f3f3f5;--color-layer-level-1:#fff;--color-on-layer-primary:#24242b;--color-on-layer-secondary:#505057;--color-button-primary:#0c4bff;--space-2:6px;--space-4:12px;--space-6:24px;--border-radius-medium:6px;--border-radius-large:8px}*{box-sizing:border-box}body{margin:0;background:var(--color-layer-level-0);color:var(--color-on-layer-primary);font:13px/18px system-ui}nav{padding:15px 24px;background:#111114;color:#f9f9fa;font-size:13px;display:flex;justify-content:space-between;gap:24px}main{padding:24px}header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:24px}h1{font-size:30px;font-weight:500;line-height:42px;margin:0}p{color:#505057;margin:6px 0}small{font-size:11px}.surface{background:white;border:1px solid #ddd;border-radius:8px;overflow:hidden}.bar{padding:18px 24px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;gap:12px}table{width:100%;border-collapse:collapse;table-layout:fixed}caption{text-align:left;padding:12px 24px;background:#f9f9fa;font-size:11px;color:#505057}th,td{padding:16px 12px;text-align:left;border-bottom:1px solid #e7e7e7;font-weight:400}thead th{font-size:11px;font-weight:600;padding-top:12px;padding-bottom:12px}th:first-child,td:first-child{width:44px;text-align:center}.title{width:46%}.reach{width:15%;text-align:right;font-variant-numeric:tabular-nums}tbody tr:nth-child(even){background:#f9f9fa}tbody tr:hover{background:#d5efff}input{accent-color:#003beb;width:16px;height:16px;cursor:pointer}input:focus-visible,button:focus-visible{outline:2px solid #003beb;outline-offset:3px}button{font:600 13px/18px system-ui;border:1px solid #ccc;background:white;padding:8px 12px;border-radius:6px;min-height:36px;cursor:pointer;color:inherit}button:hover{background:#f3f3f5}#sort{border:0;background:transparent;padding:0;min-height:28px;color:#003beb}#apply{background:#0c4bff;color:white;border-color:#0c4bff}#apply:hover{background:#003beb}.name{display:flex;align-items:center;gap:12px}.art{width:52px;height:52px;flex:0 0 52px;border-radius:6px;position:relative;overflow:hidden}.field{background:#d4e5d3}.field:before{content:'';position:absolute;width:65px;height:65px;border-radius:50%;background:#7ca77a;left:15px;top:20px}.field:after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff1c5;left:8px;top:8px}.studio{background:#e6daee}.studio:before{content:'';position:absolute;width:20px;height:36px;background:#a089b2;left:8px;top:16px;transform:rotate(-14deg)}.studio:after{content:'';position:absolute;width:20px;height:28px;background:#c3abc9;left:30px;top:24px;transform:rotate(12deg)}.guide{background:#f4e4c9}.guide:before{content:'';position:absolute;width:26px;height:38px;background:#fff;left:13px;top:9px;transform:rotate(8deg);border:1px solid #c9ad7c}.name strong{font-weight:600;display:block}.name small{color:#505057}.state{font-size:11px;color:#505057}#bulk{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px;background:#f3f3f5;border-top:1px solid #ccc}#bulk[hidden]{display:none}.actions{display:flex;gap:6px}#status{margin:18px 0;min-height:18px}footer{padding:0 24px 20px;color:#505057;font-size:11px}@media(min-width:1560px){main{padding:36px}}@media(max-width:600px){main{padding:18px}.bar{padding:12px}.channel{display:none}.title{width:57%}.reach{width:22%}.state{display:block;margin-top:4px}th,td{padding:12px 6px}.art{width:36px;height:42px;flex-basis:36px}.name{gap:6px}#bulk{padding:12px;flex-direction:column;align-items:stretch}.actions{flex-wrap:wrap}header{flex-direction:column;gap:8px}h1{font-size:27px}.bar small{max-width:140px;text-align:right}nav{padding:14px 18px}}</style><nav><strong>Soul / Content workspace</strong><span>Demo collection</span></nav><main><header><div><h1>Content review</h1><p>A final editorial check before your team publishes.</p></div><small>3 fictional drafts · No publishing connection</small></header><section class="surface" aria-label="Content drafts"><div class="bar"><strong>Draft collection</strong><small>Select items to review together</small></div><table><caption>Local sample data. Reach values are illustrative.</caption><thead><tr><th scope="col"><input id="all" type="checkbox" aria-label="Select all drafts"></th><th scope="col" class="title">Content</th><th scope="col" class="channel">Channel</th><th scope="col" class="reach" id="reach-head" aria-sort="none"><button id="sort">Reach ↕</button></th></tr></thead><tbody id="rows"></tbody></table><div id="bulk" hidden><span id="count"></span><div class="actions"><button id="apply">Mark as reviewed</button><button id="cancel">Cancel selection</button></div></div></section><p id="status" role="status">Select a draft to begin. All changes stay in this example.</p></main><footer>Independent Soul interpretation · verified light-mode tokens · system font fallback</footer><script>let items=[{id:'field',title:'A morning in the field',channel:'Instagram',reach:2480},{id:'studio',title:'Inside the studio',channel:'Facebook',reach:1860},{id:'guide',title:'Care guide: summer edition',channel:'Instagram',reach:3210}],selected=new Set(),reviewed=new Set(),direction=0;const rows=document.querySelector('#rows'),all=document.querySelector('#all'),bulk=document.querySelector('#bulk'),status=document.querySelector('#status');function render(){rows.innerHTML=items.map(i=>`<tr><td><input type="checkbox" data-id="${i.id}" aria-label="Select ${i.title}" ${selected.has(i.id)?'checked':''}></td><th scope="row"><div class="name"><div class="art ${i.id}" aria-hidden="true"></div><div><strong>${i.title}</strong><span class="state">${reviewed.has(i.id)?'Reviewed locally':'Not reviewed'}</span></div></div></th><td class="channel">${i.channel}</td><td class="reach">${i.reach.toLocaleString('en-US')}</td></tr>`).join('');rows.querySelectorAll('input').forEach(x=>x.onchange=()=>{x.checked?selected.add(x.dataset.id):selected.delete(x.dataset.id);sync()});sync()}function sync(){all.checked=selected.size===items.length;all.indeterminate=selected.size>0&&selected.size<items.length;bulk.hidden=!selected.size;document.querySelector('#count').textContent=selected.size+' selected'}all.onchange=()=>{selected=all.checked?new Set(items.map(i=>i.id)):new Set();render()};document.querySelector('#cancel').onclick=()=>{selected.clear();render();all.focus()};document.querySelector('#apply').onclick=()=>{let n=selected.size;selected.forEach(x=>reviewed.add(x));selected.clear();render();status.textContent=n+(n===1?' draft':' drafts')+' reviewed locally. Nothing published.';all.focus()};document.querySelector('#sort').onclick=()=>{direction=direction===1?-1:1;items.sort((a,b)=>(a.reach-b.reach)*direction);document.querySelector('#reach-head').setAttribute('aria-sort',direction===1?'ascending':'descending');document.querySelector('#sort').textContent='Reach '+(direction===1?'↑':'↓');render()};render();</script></html>
Tablo, seçimi ve sıralamayı doğrudan HTML içinde uygular. Özel bir Soul DataTable dışa aktarımı olduğu iddia edilmez; React örneğinde uygulamanın kendi tablosuyla birlikte doğrulanmış Button dışa aktarımı kullanılır.
Gerçek Soul düğmelerine sahip seçilebilir inceleme tablosu
Yerel semantik tablo ve denetimli onay kutuları, belgelenmiş Button dışa aktarımıyla bir araya getirilmiştir. Tablo uygulama kodudur; uydurma bir Soul DataTable bileşeni değildir.
Button varsayılanı LIGHT değeridir. Bu örnek, bir enum dışa aktarımının konumunu tahmin etmez veya DataTable özellikleri uydurmaz.
Önce özel tasarım kütüphanesini ve düğme paketlerini yükleyip yapılandırın. İçe aktarımlar resmî Storybook'ta doğrulanmıştır.
Toplu inceleme yalnızca yerel durumu günceller. Hiçbir içerik yayımlanmaz.
04
Emplifi Soul Tasarım Sistemi Aracısı Kurulumu
Uygulamaya Başlangıç Noktası
Resmî hızlı başlangıç kılavuzu için özel npm erişimi ile Emplifi deposu/VPN erişimi gerekir. React 18/19 ve Webpack 4/5 sürümlerini destekler; Sass ve SVG yükleyici kurulumu içerir. Bu paketleri herkese açık kayıt defterinde bulmayı beklemek yerine bağlantısı verilen dahili kapsamlı başlangıç kılavuzunu kullanın. Tek başına çalışan önizleme bu özel varlıkların hiçbirini gerektirmez.
bash / tsx
# For authorized Emplifi environments with the private @sbks scope configured:
npm i -D @sbks/ds-design-library @sbks/ds-button
// Application entry:
import "@sbks/ds-design-library/dist/css/variables.css";
import "@sbks/ds-design-library/dist/css/default-styles.css";
// Optional SCSS file:
@use "@sbks/ds-design-library/dist/sass/main.scss" as *;
Projeniz İçin Bir İstem
Ajan İstemi
Doğrulanmış katman/renk/aralık değişkenleri, 13/18 gövde metni, 6px denetim köşe yarıçapı ve 8px kapsayıcılarla bir Emplifi Soul içerik inceleme arayüzü oluşturun. Kararlı kimliklere, belirsiz durumlu tümünü seç seçeneğine ve tek bir sıralı sütuna sahip semantik, seçilebilir bir tablo kullanın. Yetkili uygulamalarda gerçek @sbks/ds-button dışa aktarımını ve temel CSS öğesini kullanın; herkese açık bir DataTable paketi uydurmayın.
05
Emplifi Soul Tasarım Sistemi Kaynakları ve Kapsamı
Soul, Emplifi’nin tasarım sistemidir. Herkese açık tasarım referansları ve Storybook incelenebilir; ancak resmî hızlı başlangıç kılavuzu özel bir npm kapsamına erişim gerektirir. Tarayıcı örneği bağımsız bir HTML/CSS yorumudur; Soul React paketini içermez. Tablo davranışı, herkese açık sayfasında React bileşeninin hâlâ planlanmış olarak işaretlendiği tasarım yönergelerini temel alır.
