# Emplifi Soul Tasarım Sistemi

## Emplifi Soul Tasarım Sistemi arayüz önizlemesi

Tümünü seçmeyi, belirsiz seçimi, sıralamayı, toplu incelemeyi ve iptali deneyin.

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

### Katman modeli

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --color-layer-level-0 | #f3f3f5 | Açık mod yüzey düzeyi. |
| --color-layer-level-1 | #ffffff | Açık mod yüzey düzeyi. |
| --color-layer-level-2 | #f3f3f5 | Açık mod yüzey düzeyi. |
| --color-layer-level-3 | #e7e7e7 | Açık mod yüzey düzeyi. |
| --color-on-layer-primary | #24242b | Ana metin. |
| --color-on-layer-secondary | #505057 | Yardımcı metin. |
| Dark level 0 / level 1 | #111114 / #24242b | Koyu yüzeyler, derinlik arttıkça daha açık hale gelir. |
### Eylem ve tablo renkleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --color-button-primary | #0c4bff | Birincil düğme arka planı. |
| --color-on-layer-interactive | #003beb | Etkileşimli metin. |
| --color-border-focus-ring | #003beb | Odak halkası. |
| --color-table-row-odd | #ffffff | Tek ve tablo başlığı/altbilgisi. |
| --color-table-row-even | #f9f9fa | Çift satırlar. |
| --color-table-row-hover | #d5efff | Tarama geri bildirimi. |
| --color-layer-main-navigation | #111114 | Yalnızca ana gezinme. |
### Aralık ve yarıçap

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --space-1 | 3px | Foundation aralığı. |
| --space-2 | 6px | Foundation aralığı. |
| --space-3 | 9px | Foundation aralığı. |
| --space-4 | 12px | Foundation aralığı. |
| --space-5 | 18px | Foundation aralığı. |
| --space-6 | 24px | Foundation aralığı. |
| --space-7 | 30px | Foundation aralığı. |
| --space-8 | 36px | Foundation aralığı. |
| --space-9 | 48px | Foundation aralığı. |
| Default control height | 36px | Kompakt seçenek 30px; aralık ölçeğiyle karıştırmayın. |
### Köşe hiyerarşisi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --border-radius-small | 2px | Hafif yumuşatma. |
| --border-radius-medium | 6px | Varsayılan öğeler. |
| --border-radius-large | 8px | Kapsayıcılar. |
| --border-radius-full | 50% | Daire. |
| --border-radius-pill | 999px | Hap biçimi. |
### Yazı tipi tarifleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| headline-1 | 500 · 30px / 42px | Ana sayfa başlığı. |
| headline-2 | 500 · 20px / 30px | Bölüm başlığı. |
| headline-3 | 500 · 16px / 24px | Alt bölüm başlığı. |
| paragraph-regular | 400 · 13px / 18px | Orta boy gövde metni. |
| Button label | 600 · 13px / 18px | Cümle düzeninde büyük harf kullanımı. |
| Table numerals | Tabular numbers | Karşılaştırılabilir sayısal değerleri hizalayın. |
### React Button API

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Package | @sbks/ds-button | Özel kapsam; Button adlı bir dışa aktarımdır. |
| variant | BUTTON_VARIANT.LIGHT default | Enum desteklidir; TypeScript içinde ham dizeler yerine dışa aktarılan enum sabitlerini kullanın. |
| size | BUTTON_SIZE.MEDIUM default | Temel boyut Medium’dur. |
| isLoading | false | Yükleme görselleştirmesi. |
| isSelected | false | Seçili görünüm. |
| isApplied | false | Görsel destek şu anda yalnızca görünmez varyant içindir. |
| onClick | Mouse event handler | Yerel uygulama durumunu bağlayın. |
| badge | string \| number | Uygulanan seçime ilişkin bilgi. |
| theme | Inherited; light fallback | Koyu bir yüzeyin tüm alt öğeleri otomatik olarak değiştirdiğini varsaymayın. |
## Emplifi Soul Tasarım Sistemi eksiksiz kılavuzu

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

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

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

Destekleyici belirtimi okuyun

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

- Genişletilmiş satırlar ve eksik verileri açıklama, belgelenmiş genişletme noktalarıdır; önizlemede taklit edilmez.

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

Destekleyici belirtimi okuyun

### Toplu mod, kullanılabilir eylemleri değiştirir

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.

Destekleyici belirtimi okuyun

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

Destekleyici belirtimi okuyun

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

Destekleyici belirtimi okuyun

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

Destekleyici belirtimi okuyun

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

Destekleyici belirtimi okuyun

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

1. Resmî hızlı başlangıç kılavuzunu izleyerek özel kapsama erişim ve derleme yükleyicisi kurulumunu tamamlayın.

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

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

Destekleyici belirtimi okuyun

## Emplifi Soul 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. 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.

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

Kod referansı

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

```
// ContentReview.tsx — inside a configured, authorized Soul application
import React, { useState } from 'react';
import { Button } from '@sbks/ds-button';
import '@sbks/ds-design-library/dist/css/variables.css';
import '@sbks/ds-design-library/dist/css/default-styles.css';

const posts = [
  { id: 'field', title: 'A morning in the field', channel: 'Instagram' },
  { id: 'studio', title: 'Inside the studio', channel: 'Facebook' },
  { id: 'guide', title: 'Care guide: summer edition', channel: 'Instagram' }
];
export default function ContentReview() {
  const [selected, setSelected] = useState<string[]>([]);
  const [reviewed, setReviewed] = useState<string[]>([]);
  const [message, setMessage] = useState('');
  const toggle = (id: string) => setSelected(previous =>
    previous.includes(id) ? previous.filter(x => x !== id) : [...previous, id]);
  const review = () => {
    setReviewed(previous => [...new Set([...previous, ...selected])]);
    setMessage(`${selected.length} items reviewed locally. Nothing published.`);
    setSelected([]);
  };
  return <section aria-labelledby="review-title">
    <h1 id="review-title">Content review</h1>
    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
      <caption>Fictional content drafts</caption>
      <thead><tr><th scope="col">Select</th><th scope="col">Content</th>
        <th scope="col">Channel</th><th scope="col">Review</th></tr></thead>
      <tbody>{posts.map(post => <tr key={post.id}>
        <td><input type="checkbox" aria-label={`Select ${post.title}`}
          checked={selected.includes(post.id)} onChange={() => toggle(post.id)} /></td>
        <th scope="row">{post.title}</th><td>{post.channel}</td>
        <td>{reviewed.includes(post.id) ? 'Reviewed locally' : 'Not reviewed'}</td>
      </tr>)}</tbody>
    </table>
    {selected.length > 0 && <div aria-label="Bulk actions"
      style={{ display: 'flex', gap: 'var(--space-2)', marginTop: 'var(--space-6)' }}>
      <Button onClick={review}>Mark {selected.length} as reviewed</Button>
      <Button onClick={() => setSelected([])}>Cancel selection</Button>
    </div>}
    <p role="status">{message}</p>
  </section>;
}
```

Kod referansı

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

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

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

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

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

- Katman modeli Açık/koyu yüzey hiyerarşisi.

- Arayüz renk belirteçleri Adlandırılmış renkler ve durum rolleri.

- Boşluklar Altı piksellik birim ve bileşen boyutları.

- Tipografi Yazı stilleri ve semantik metin renkleri.

- Yazı tipleri Inter ve Noto ailesi rolleri.

- Köşe yarıçapı 2, 6, 8 px, tam ve hap biçimli değerler.

- Düğme kullanımı Eylem vurgusu.

- Tablo yönergeleri Seçim, sıralama ve özet davranışı.

- Özel paketlerle hızlı başlangıç Gerçek erişim ve derleme gereksinimleri.

- CSS giriş noktaları Değişkenler ve varsayılan stil içe aktarımları.

- Düğme API Gerçek bileşen özellikleri ve paketi.

## Emplifi Soul Tasarım Sistemiyle İlgili Kaynaklar

### Esri Calcite

Odaklanmış mekânsal araçlar için pratik bir Calcite başvuru kaynağı: anlamsal yüzeyler ve mavi eylemler, kompakt inceleme panelleri, gerçek giriş API’leri ve site incelemesi için eksiksiz bir yerel örnek.

### GitLab Pajamas

Teknik iş akışları için bir Pajamas kılavuzu: gerçek anlamsal tasarım belirteçleri, akışkan tipografi ve boşluklar, aşamalı bir işlem hattı denetleyicisi, okunaklı hata çıktısı ve açıkça yerel bir yeniden deneme simülasyonu.

### HPE Grommet

Grommet’in düzen ilkelleri, denetimli form alanları ve sayısal göstergeleriyle kapasite rezervasyonunu modelleyin. Tema ölçeğini bilinçli kullanın; temel Grommet temasını ayrıca yüklenen HPE temasından ayrı tutun.


- [Uygulama başvurusu](https://soul.emplifi.io/latest/components/components/data-table/usage-nLS68kIE)
- [Kaynak](https://soul.emplifi.io/latest/foundations/foundations/colors/overview-X0TahKWD)
- [Kaynak](https://soul.emplifi.io/latest/foundations/foundations/colors/ui-colors-aysX6TuQ)
- [Kaynak](https://soul.emplifi.io/latest/foundations/foundations/spacing-67iRzZzQ)
- [Kaynak](https://soul.emplifi.io/latest/foundations/foundations/radius-Z9zxhvSr)
- [Kaynak](https://soul.emplifi.io/latest/foundations/foundations/typography/overview-D0qyFyli)
- [Kaynak](https://soul.dev.emplifi.io/?path=/docs/components-button--overview)
- [Destekleyici belirtimi okuyun](https://soul.dev.emplifi.io/?path=/docs/getting-started-quickstart-guide-overview--overview)
- [Destekleyici belirtimi okuyun](https://soul.emplifi.io/latest/components/components/data-table/usage-nLS68kIE)
- [Destekleyici belirtimi okuyun](https://soul.emplifi.io/latest/foundations/foundations/colors/overview-X0TahKWD)
- [Destekleyici belirtimi okuyun](https://soul.emplifi.io/latest/foundations/foundations/typography/typefaces-hFaPahBG)
- [Destekleyici belirtimi okuyun](https://soul.emplifi.io/latest/foundations/foundations/spacing-67iRzZzQ)
- [Destekleyici belirtimi okuyun](https://soul.emplifi.io/latest/components/components/button/usage-LajmcVQv)
- [Destekleyici belirtimi okuyun](https://soul.dev.emplifi.io/?path=/docs/getting-started-quickstart-guide-css-variables-and-mixins--overview)
- [Kod referansı](https://soul.emplifi.io/latest/components/components/data-table/usage-nLS68kIE)
- [Kod referansı](https://soul.dev.emplifi.io/?path=/docs/components-button--overview)
- [Katman modeli Açık/koyu yüzey hiyerarşisi.](https://soul.emplifi.io/latest/foundations/foundations/colors/overview-X0TahKWD)
- [Arayüz renk belirteçleri Adlandırılmış renkler ve durum rolleri.](https://soul.emplifi.io/latest/foundations/foundations/colors/ui-colors-aysX6TuQ)
- [Boşluklar Altı piksellik birim ve bileşen boyutları.](https://soul.emplifi.io/latest/foundations/foundations/spacing-67iRzZzQ)
- [Tipografi Yazı stilleri ve semantik metin renkleri.](https://soul.emplifi.io/latest/foundations/foundations/typography/overview-D0qyFyli)
- [Yazı tipleri Inter ve Noto ailesi rolleri.](https://soul.emplifi.io/latest/foundations/foundations/typography/typefaces-hFaPahBG)
- [Köşe yarıçapı 2, 6, 8 px, tam ve hap biçimli değerler.](https://soul.emplifi.io/latest/foundations/foundations/radius-Z9zxhvSr)
- [Düğme kullanımı Eylem vurgusu.](https://soul.emplifi.io/latest/components/components/button/usage-LajmcVQv)
- [Tablo yönergeleri Seçim, sıralama ve özet davranışı.](https://soul.emplifi.io/latest/components/components/data-table/usage-nLS68kIE)
- [Özel paketlerle hızlı başlangıç Gerçek erişim ve derleme gereksinimleri.](https://soul.dev.emplifi.io/?path=/docs/getting-started-quickstart-guide-overview--overview)
- [CSS giriş noktaları Değişkenler ve varsayılan stil içe aktarımları.](https://soul.dev.emplifi.io/?path=/docs/getting-started-quickstart-guide-css-variables-and-mixins--overview)
- [Düğme API Gerçek bileşen özellikleri ve paketi.](https://soul.dev.emplifi.io/?path=/docs/components-button--overview)