# Designsystemet Tasarım Sistemi ## Designsystemet Tasarım Sistemi Arayüz Önizlemesi Yerel karakter sayacını kullanın, temayı ve boyutu değiştirin; değişenlere bağlı olarak gözden geçirme sonucunu koruyun veya geçersiz kılın. ## Designsystemet Tasarım Sistemi Tasarım Başvurusu @digdir/designsystemet-css/web 1.23.0 içindeki varsayılan tema dışa aktarımları ve yerel ds-field uygulaması. Renk satırlarında açık kipteki değerler açıkça belirtilir. ### Varsayılan açık vurgu rolleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --ds-color-accent-background-default | #fff | 1.23.0 sürümündeki gerçek varsayılan açık tema rolü. Çalışma zamanının koyu renk şeması için ayrı rol değerleri kullanılır. | | --ds-color-accent-background-tinted | #eef4fa | 1.23.0 sürümündeki gerçek varsayılan açık tema rolü. Çalışma zamanının koyu renk şeması için ayrı rol değerleri kullanılır. | | --ds-color-accent-surface-tinted | #ddeaf6 | 1.23.0 sürümündeki gerçek varsayılan açık tema rolü. Çalışma zamanının koyu renk şeması için ayrı rol değerleri kullanılır. | | --ds-color-accent-surface-hover | #c7ddf0 | 1.23.0 sürümündeki gerçek varsayılan açık tema rolü. Çalışma zamanının koyu renk şeması için ayrı rol değerleri kullanılır. | | --ds-color-accent-border-subtle | #99c0e3 | 1.23.0 sürümündeki gerçek varsayılan açık tema rolü. Çalışma zamanının koyu renk şeması için ayrı rol değerleri kullanılır. | | --ds-color-accent-border-default | #2a7cc5 | 1.23.0 sürümündeki gerçek varsayılan açık tema rolü. Çalışma zamanının koyu renk şeması için ayrı rol değerleri kullanılır. | | --ds-color-accent-text-default | #002c54 | 1.23.0 sürümündeki gerçek varsayılan açık tema rolü. Çalışma zamanının koyu renk şeması için ayrı rol değerleri kullanılır. | | --ds-color-accent-base-default | #0062ba | 1.23.0 sürümündeki gerçek varsayılan açık tema rolü. Çalışma zamanının koyu renk şeması için ayrı rol değerleri kullanılır. | | --ds-color-accent-base-hover | #004f96 | 1.23.0 sürümündeki gerçek varsayılan açık tema rolü. Çalışma zamanının koyu renk şeması için ayrı rol değerleri kullanılır. | | --ds-color-accent-base-active | #003d75 | 1.23.0 sürümündeki gerçek varsayılan açık tema rolü. Çalışma zamanının koyu renk şeması için ayrı rol değerleri kullanılır. | | --ds-color-accent-base-contrast-default | #fff | 1.23.0 sürümündeki gerçek varsayılan açık tema rolü. Çalışma zamanının koyu renk şeması için ayrı rol değerleri kullanılır. | ### Varsayılan açık nötr roller | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --ds-color-neutral-background-default | #fff | Gereksiz durum anlamları yüklemeden yardımcı yüzeylerde ve metinlerde nötr rolleri kullanın. | | --ds-color-neutral-background-tinted | #f3f3f4 | Gereksiz durum anlamları yüklemeden yardımcı yüzeylerde ve metinlerde nötr rolleri kullanın. | | --ds-color-neutral-surface-default | #fff | Gereksiz durum anlamları yüklemeden yardımcı yüzeylerde ve metinlerde nötr rolleri kullanın. | | --ds-color-neutral-surface-tinted | #e8e8e9 | Gereksiz durum anlamları yüklemeden yardımcı yüzeylerde ve metinlerde nötr rolleri kullanın. | | --ds-color-neutral-border-subtle | #bbbcbd | Gereksiz durum anlamları yüklemeden yardımcı yüzeylerde ve metinlerde nötr rolleri kullanın. | | --ds-color-neutral-text-subtle | #5b5d60 | Gereksiz durum anlamları yüklemeden yardımcı yüzeylerde ve metinlerde nötr rolleri kullanın. | | --ds-color-neutral-text-default | #292c30 | Gereksiz durum anlamları yüklemeden yardımcı yüzeylerde ve metinlerde nötr rolleri kullanın. | | --ds-color-neutral-base-default | #24272b | Gereksiz durum anlamları yüklemeden yardımcı yüzeylerde ve metinlerde nötr rolleri kullanın. | | --ds-color-neutral-base-contrast-default | #fff | Gereksiz durum anlamları yüklemeden yardımcı yüzeylerde ve metinlerde nötr rolleri kullanın. | ### Boyut kipi ve tipografi temelleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --ds-size-mode-font-size--sm | 1 | Dışa aktarılan gerçek skaler değer veya ifade. Her skaler değeri piksel değeri olarak yorumlamak yerine data-size kiplerini kullanın. | | --ds-size-mode-font-size--md | 1.125 | Dışa aktarılan gerçek skaler değer veya ifade. Her skaler değeri piksel değeri olarak yorumlamak yerine data-size kiplerini kullanın. | | --ds-size-mode-font-size--lg | 1.3125 | Dışa aktarılan gerçek skaler değer veya ifade. Her skaler değeri piksel değeri olarak yorumlamak yerine data-size kiplerini kullanın. | | --ds-size-base | 18 | Dışa aktarılan gerçek skaler değer veya ifade. Her skaler değeri piksel değeri olarak yorumlamak yerine data-size kiplerini kullanın. | | --ds-font-family | Inter | Dışa aktarılan gerçek skaler değer veya ifade. Her skaler değeri piksel değeri olarak yorumlamak yerine data-size kiplerini kullanın. | | --ds-font-weight-regular | 400 | Dışa aktarılan gerçek skaler değer veya ifade. Her skaler değeri piksel değeri olarak yorumlamak yerine data-size kiplerini kullanın. | | --ds-font-weight-medium | 500 | Dışa aktarılan gerçek skaler değer veya ifade. Her skaler değeri piksel değeri olarak yorumlamak yerine data-size kiplerini kullanın. | | --ds-font-weight-semibold | 600 | Dışa aktarılan gerçek skaler değer veya ifade. Her skaler değeri piksel değeri olarak yorumlamak yerine data-size kiplerini kullanın. | | --ds-line-height-sm | 1.3 | Dışa aktarılan gerçek skaler değer veya ifade. Her skaler değeri piksel değeri olarak yorumlamak yerine data-size kiplerini kullanın. | | --ds-line-height-md | 1.5 | Dışa aktarılan gerçek skaler değer veya ifade. Her skaler değeri piksel değeri olarak yorumlamak yerine data-size kiplerini kullanın. | | --ds-line-height-lg | 1.7 | Dışa aktarılan gerçek skaler değer veya ifade. Her skaler değeri piksel değeri olarak yorumlamak yerine data-size kiplerini kullanın. | | --ds-border-radius-base | 0.25rem | Dışa aktarılan gerçek skaler değer veya ifade. Her skaler değeri piksel değeri olarak yorumlamak yerine data-size kiplerini kullanın. | | --ds-border-radius-sm | min(.5 * var(--ds-border-radius-base), var(--ds-border-radius-scale)) | Dışa aktarılan gerçek skaler değer veya ifade. Her skaler değeri piksel değeri olarak yorumlamak yerine data-size kiplerini kullanın. | | --ds-border-radius-md | min(var(--ds-border-radius-base), 2 * var(--ds-border-radius-scale)) | Dışa aktarılan gerçek skaler değer veya ifade. Her skaler değeri piksel değeri olarak yorumlamak yerine data-size kiplerini kullanın. | | --ds-border-radius-lg | min(2 * var(--ds-border-radius-base), 5 * var(--ds-border-radius-scale)) | Dışa aktarılan gerçek skaler değer veya ifade. Her skaler değeri piksel değeri olarak yorumlamak yerine data-size kiplerini kullanın. | ## Designsystemet 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ı. ## Designsystemet Tasarım Sistemi Davranışı, CSS ve Tema Paketleri ### Üç parçayı doğru sırayla yükleyin > Designsystemet, çerçeveden bağımsız davranışı, bileşen CSS'ini ve tema değerlerini birbirinden ayırır. Bu örnekte designsystemet-web ve designsystemet-css 1.23.0 sürümlerine sabitlenir; önce CSS, ardından varsayılan tema içe aktarılır ve davranış bir kez kaydedilir. Davranış paketi olmadan biçimlendirilmiş bir alan, burada gösterilen bağlantılı ds-field ile aynı uygulama değildir. ### Güncel yalın HTML sözleşmesini kullanın Örnekte normal input, textarea ve select öğeleri ds-input sınıflarıyla birlikte ds-field içine yerleştirilir. Böylece yerel form denetimleri korunurken paket etiketlerle açıklamaları ilişkilendirir. Eski, yalnızca React kullanan bir alan API'i kopyalanmaz. Tam kaynak, doğru paket içe aktarımlarını ve özgün uygulamanın gözden geçirme mantığını içerir. ## Designsystemet Tasarım Sistemi Renk Şeması ve Boyut Kipleri ### Görünümü veri öznitelikleriyle değiştirin Sayfanın kök öğesinde data-color-scheme değeri light veya dark olarak ayarlanır. Tema, buna karşılık gelen anlamsal renkleri sağlar; form değerleri ise değişmeden kalır. Parametre tablosunda varsayılan açık kip değerleri açıkça belirtilir; aynı onaltılık renklerin koyu kipte de geçerli olduğu iddia edilmez. İkincil görünüm düğmesinin etiketi, sırada gerçekleşecek eylemi açıklar. ### Boyut kipinin tüm sistemi etkilemesini sağlayın Okuma boyutu denetimi, data-size değerini sm, md ve lg arasında değiştirir. Böylece yalnızca başlık yakınlaştırılmaz; temanın boyut kipi değiştirilir. Yayımlanan kip katsayıları 1, 1.125 ve 1.3125'tir; bunlar belirteç formüllerinde kullanılır ve bir denetimin bu piksel değerlerine ayarlanması gerektiğine dair genel bir talimat değildir. Örnekte büyük kip hem telefon genişliğinde hem masaüstünde test edilir. ## Designsystemet Tasarım Sistemi Inter ve Anlamsal Tipografi ### Gereken kalınlıkları ekleyin Önizleme, Inter 400, 500 ve 600 kalınlıklarını pakete ekler ve küçük l harfinin biçimi için belgelenen cv05 yazı tipi özelliğini etkinleştirir. Sayfada, yazı tipi kalınlığı ve satır yüksekliğinin temaya uyması için yerel başlık ve paragraf sınıfları kullanılır. Sabit 14px boyutundaki açıklama, ana etkileşim ölçeğinin dışında olduğu açıkça belirtilen, yazar tarafından eklenmiş yardımcı bir nottur. ### Yardımcı içeriği ilgili denetimin yanında tutun Başlık ipucu, etiketin amacını açıklar; sonuç ipucu ise beklenen içerik türünü belirtir. İpuçları denetimlerinin yanında kalır ve ds-field aracılığıyla ilişkilendirilir. Yardımcı yönlendirme ayrı bir kartta yer alır; dar ekranlarda bu kart formu izler. Talimatları göstermek için üzerine gelme etkileşimine güvenilmez. ## Designsystemet Tasarım Sistemi Otomatik İlişkilendirmeler ve Karakter Geri Bildirimi ### ds-field'in tek bir denetimi ilişkilendirmesini sağlayın Her ds-field, input benzeri tek bir denetim, etiketini ve isteğe bağlı data-field açıklamalarını içerir. Paket kimlikleri atar ve etiket/açıklama ilişkilerini kurar. İlişkisiz denetimleri tek bir ds-field içinde gruplamak, bu otomatik sözleşmenin belirsizleşmesine yol açar. Bu sarmalayıcının genel amaçlı bir form kapsayıcısı olduğunu varsaymak yerine gruplar için fieldset kullanın. - Her ds-field içinde input benzeri tek bir denetim bulundurun. - İlişkili yardımcı içerik için data-field açıklamalarını kullanın. - Kimlikleri ve aria-describedby ilişkilerini yerel gözlemcinin yönetmesini sağlayın. ### Sayacın neyi ölçtüğünü anlayın Yerel sayaçta data-limit, data-under ve data-over kullanılır; %d, kalan veya aşım sayısıyla değiştirilir. 1.23.0 sürümünde sayaç, JavaScript dizge uzunluğuna göre hesaplama yapar ve data-label/data-state aracılığıyla geri bildirim sunar; sınıra aşıldığında geçersiz durumunu da bildirir. Bu, her emojinin grafem olarak sayılacağını garanti etmez. 140 karakter sınırı bu örneğe ait yazım kısıtıdır; resmi bir Designsystemet içerik kuralı değildir. ## Designsystemet Tasarım Sistemi Uygulama Doğrulaması ve Gözden Geçirme Durumu ### Yazım görevini ayrı doğrulayın Uygulama, görev başlığı ve sonuç alanlarının boş olmamasını zorunlu tutar; ayrıca örnek sınırını aşan sonuçları reddeder. İşlem yapılabilir bir mesaj gösterdikten sonra ilgili alana odaklanır. Yerel sayaç uzunluk hakkında bilgi verirken gönderim işleyicisi yerel gözden geçirme kuralını uygular. maxlength, yapıştırılan metni sessizce kırpıp silmez. ### Sunumu değiştirirken verileri koruyun Gözden geçirme başarıyla tamamlandığında geçerli başlık ve sonuç metin olarak gösterilir. Bu alanlardan biri düzenlenirse sonuç temizlenir; görünüm veya boyut değiştirildiğinde ise brief değişmediğinden sonuç korunur. Bu ayrım bilinçli olarak yapılmış ve doğrulanmıştır. Hiçbir veri proje yönetimi hizmetine gönderilmez; önizleme hiçbir zaman harici bir görevin oluşturulduğunu iddia etmez. ## Designsystemet Tasarım Sistemi Eksiksiz Yerel Alan Uygulaması ### Sürümlenmiş örneği yeniden oluşturun Bir Vite vanilla projesi oluşturun, sabitlenmiş iki Designsystemet paketini ve Inter'i yükleyin, ardından eksiksiz giriş dosyasını ve digdir.css dosyasını kaydedin. Kök bağlama öğesini koruyun. Kaynak; kaydı, tema sırasını, sayaç işaretlemesini, sunum denetimlerini ve gözden geçirme doğrulamasına ilişkin tüm geçişleri içerir. Yerel önizlemede el yapımı bir taklit yerine aynı yerel alan gözlemcisi kullanılır. 1. Davranışı bir kez, ardından bileşen CSS'ini ve varsayılan temayı içe aktarın. 2. Inter 400, 500 ve 600 kalınlıklarını yükleyip giriş dosyasının/CSS'in tamamını kaydedin. 3. Sınırı aşan sayacı deneyin ve sonucu düzeltin. 4. Gözden geçirin, boyutu ve görünümü değiştirin, ardından sonucu temizlemek için metni düzenleyin. ### Sınır aşımı ve sonrasında düzelme davranışını test edin Sonuç alanına 150 normal karakter yapıştırın ve sınırın on karakter aşıldığının bildirildiğini doğrulayın. Gözden geçirme bu metni reddetmelidir. Metni kısa bir sonuçla değiştirip gözden geçirmeyi başarıyla tamamlayın; ardından sonucu kaybetmeden koyu kipi ve okuma boyutunu değiştirin. Başlığı düzenleyip eski gözden geçirme sonucunun temizlendiğini doğrulayın. Her görüntü alanı genişliğinde görünür odağı ve metnin satırlara doğru bölünmesini kontrol edin. ## Designsystemet Tasarım Sistemi Bileşen Örnekleri ### main.js — eksiksiz yerel alan ve tema incelemesi Eksiksiz düzenleyici, gerçek sayaç işaretlemesi, görünüm/boyut denetimleri ve yerel gözden geçirme doğrulaması. ``` import '@digdir/designsystemet-web'; import '@digdir/designsystemet-css'; import '@digdir/designsystemet-css/theme'; import '@fontsource/inter/latin-400.css'; import '@fontsource/inter/latin-500.css'; import '@fontsource/inter/latin-600.css'; import './digdir.css'; document.documentElement.dataset.colorScheme='light';document.documentElement.dataset.size='md';document.getElementById('root').innerHTML=`

DESIGNSYSTEMET / NATIVE FIELD STUDY

Write a useful task brief

Describe one outcome clearly. The native field connects its label, hint and character feedback while the theme controls size and appearance.

Use a short label that identifies the work.

Describe the result, not a list of implementation instructions.

`;const $=id=>document.getElementById(id);function edit(){$('review').hidden=true;$('error').hidden=true}['title','outcome'].forEach(id=>$(id).addEventListener('input',edit));$('theme').addEventListener('click',()=>{const dark=document.documentElement.dataset.colorScheme!=='dark';document.documentElement.dataset.colorScheme=dark?'dark':'light';$('theme').setAttribute('aria-pressed',String(dark));$('theme').textContent=dark?'Light appearance':'Dark appearance'});$('size').addEventListener('change',e=>document.documentElement.dataset.size=e.target.value);$('brief-form').addEventListener('submit',e=>{e.preventDefault();let message='',focus='outcome';if(!$('title').value.trim()){message='Enter a task title.';focus='title'}else if(!$('outcome').value.trim())message='Describe the desired outcome.';else if($('outcome').value.length>140)message='Shorten the outcome to 140 characters or fewer.';if(message){$('error').textContent=message;$('error').hidden=false;$(focus).focus();return}$('review-title').textContent=$('title').value.trim();$('review-body').textContent=$('outcome').value.trim();$('review').hidden=false;$('review').focus()}); ``` Kod referansı - Select, ds-field içinde güncel ds-input biçimlendirmesini kullanır. Sayaç geri bildirimi yerel gözlemci tarafından yönetilir. ### digdir.css — özgün duyarlı düzen Inter özellik ayarı dâhil, yerel tema etrafında oluşturulan düzen. ``` body{margin:0;font-family:Inter,sans-serif;font-feature-settings:"cv05" 1}main{max-width:1160px;margin:auto;padding:32px}header{display:flex;gap:24px;justify-content:space-between;align-items:start}.eyebrow{font-size:13px;letter-spacing:.04em;font-weight:600}.lead{max-width:65ch;margin-top:24px}.layout{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;margin-top:32px}form{display:grid;gap:24px;align-content:start}form button{justify-self:start}aside{padding:24px;align-self:start}aside h3{margin-top:32px}aside select{margin-top:8px}aside li{margin:12px 0}.small{font-size:14px;line-height:1.6}#review{padding:24px;margin-top:32px}#review h3{margin-top:16px}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.layout{grid-template-columns:1fr;gap:24px}header{flex-direction:column}} ``` Kod referansı - Tema ve boyut değişiklikleri değerleri korur; yalnızca içerik düzenlemeleri incelemeyi geçersiz kılar. ## Designsystemet Tasarım Sistemi Aracısı Kurulumu ### Uygulamaya Başlangıç Noktası Yerel tarayıcıda etiket ilişkileri, sayaç durumu, doğrulama sonrası düzeltme ve açık/koyu tema boyut değişiklikleri test edildi. ``` npm create vite@latest ds-brief -- --template vanilla cd ds-brief npm install npm install @digdir/designsystemet-css@1.23.0 @digdir/designsystemet-web@1.23.0 @fontsource/inter # Replace src/main.js and add src/digdir.css. Keep
. npm run dev ``` ### Projeniz İçin Bir İstem ``` Kısa açıklama düzenleyicisini Designsystemet 1.23.0 davranışı/CSS/varsayılan tema sırasına uygun şekilde oluşturun. Tek bir yerel kontrol içeren ds-field, gerçek data-field sayaç öznitelikleri ve Inter yazı tipi ağırlıklarını kullanın. Görünüm ve boyut değişikliklerinde inceleme durumunu koruyun, içerik düzenlemelerinden sonra bu durumu temizleyin ve yapıştırılan metni kesmeden özgün 140 karakter kuralını uygulayın. ``` ## Designsystemet Tasarım Sistemi Kaynakları ve Kapsamı OpenDesign tarafından hazırlanmış, Designsystemet CSS ve 1.23.0 web davranışını kullanan yerel bir düzenleyici. Varsayılan tema ve alan gözlemcisi yereldir; kısa açıklama içeriği, 140 karakter kuralı ve inceleme iş akışı özgündür. - Kurulum ve tema sırası Yerel davranış, CSS, tema ve yazı tipi yapılandırması. - Temel tema ayarları Boyut, renk ve tipografi giriş noktaları. - Herkese açık uygulama Sürümlenmiş ds-field gözlemcisi ve oluşturulan tema. - Sistem kapsamı Paylaşılan bileşen ve yönerge kapsamı. ## Designsystemet Tasarım Sistemi İlgili Kaynaklar ### DSFR Fransız Devlet tasarım sisteminin kurumsal kapsamı içindeki somut tipografi, ızgara ve akordeon API yapısını inceleyin. Açık ve tarafsız bir eğitim örneğinde birbirine bağlı ve bağımsız açılır-kapanır davranışları karşılaştırın. ### Europa Component Library Klavye kullanımı, tümünü açma davranışı ve JavaScript olmadığında okunabilir yedek davranış da dahil olmak üzere eksiksiz bir yerel akordeon özeti üzerinden Europa’nın EC renk, tipografi ve boşluk rollerini inceleyin. ### gov.cz tasarım sistemi Altı kaynaklı eksiksiz bir okuma araç takımı üzerinden Gov Design System CE’nin gerçek renk rollerini, kart yuvalarını ve yerel sayfalandırmasını; ayrıca açık odak ve sayfa durumlarını inceleyin. - [Uygulama başvurusu](https://designsystemet.no/en/fundamentals/code/setup) - [Kaynak](https://github.com/digdir/designsystemet) - [Kod referansı](https://designsystemet.no/en/fundamentals/code/setup) - [Kurulum ve tema sırası Yerel davranış, CSS, tema ve yazı tipi yapılandırması.](https://designsystemet.no/en/fundamentals/code/setup) - [Temel tema ayarları Boyut, renk ve tipografi giriş noktaları.](https://designsystemet.no/en/fundamentals) - [Herkese açık uygulama Sürümlenmiş ds-field gözlemcisi ve oluşturulan tema.](https://github.com/digdir/designsystemet) - [Sistem kapsamı Paylaşılan bileşen ve yönerge kapsamı.](https://designsystemet.no/en/intro)