# Det Fælles Designsystem Tasarım Sistemi ## Det Fælles Designsystem Tasarım Sistemi Arayüz Önizlemesi Beş özgün planlama kaynağını karşılaştırın, sıralama yönünü tersine çevirin ve eşleşme bulunmayan bir sorgudan kurtulun. ## Det Fælles Designsystem Tasarım Sistemi Tasarım Referansı Gerçek DKFDS 11.3.0 Borger.dk teması, boşluk haritası, tipografi haritası ve odak değişkenleri. Gösterilen adlar Sass kaynak referanslarıdır. ### Borger.dk teması ve odak | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | $borger-primary | #44831E | Gerçek 11.3.0 Sass yapılandırması; bu adlar kaynak değişkenleridir, CSS özel özellikleri değildir. | | $borger-primary-dark | #3C5C22 | Gerçek 11.3.0 Sass yapılandırması; bu adlar kaynak değişkenleridir, CSS özel özellikleri değildir. | | $borger-primary-darker | #233614 | Gerçek 11.3.0 Sass yapılandırması; bu adlar kaynak değişkenleridir, CSS özel özellikleri değildir. | | $header-portal-background-color | #f1f1f1 | Gerçek 11.3.0 Sass yapılandırması; bu adlar kaynak değişkenleridir, CSS özel özellikleri değildir. | | $theme-focus-width | 3px | Gerçek 11.3.0 Sass yapılandırması; bu adlar kaynak değişkenleridir, CSS özel özellikleri değildir. | | $theme-focus-offset | 1px | Gerçek 11.3.0 Sass yapılandırması; bu adlar kaynak değişkenleridir, CSS özel özellikleri değildir. | | $theme-focus-style | solid | Gerçek 11.3.0 Sass yapılandırması; bu adlar kaynak değişkenleridir, CSS özel özellikleri değildir. | | $typography-text-max-width | 66ch | Gerçek 11.3.0 Sass yapılandırması; bu adlar kaynak değişkenleridir, CSS özel özellikleri değildir. | | $typography-font-family | IBM Plex Sans, system-ui, system, sans-serif | Gerçek 11.3.0 Sass yapılandırması; bu adlar kaynak değişkenleridir, CSS özel özellikleri değildir. | ### Boşluk haritası anahtarları | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | 0 | 0px | Yayımlanmış $spacers haritası. 305 ve 405 gibi ardışık olmayan anahtarlar sırasıyla 12px ve 20px anlamına gelir; anahtarı piksel boyutu olarak yorumlamayın. | | 1 | 2px | Yayımlanmış $spacers haritası. 305 ve 405 gibi ardışık olmayan anahtarlar sırasıyla 12px ve 20px anlamına gelir; anahtarı piksel boyutu olarak yorumlamayın. | | 2 | 4px | Yayımlanmış $spacers haritası. 305 ve 405 gibi ardışık olmayan anahtarlar sırasıyla 12px ve 20px anlamına gelir; anahtarı piksel boyutu olarak yorumlamayın. | | 3 | 8px | Yayımlanmış $spacers haritası. 305 ve 405 gibi ardışık olmayan anahtarlar sırasıyla 12px ve 20px anlamına gelir; anahtarı piksel boyutu olarak yorumlamayın. | | 305 | 12px | Yayımlanmış $spacers haritası. 305 ve 405 gibi ardışık olmayan anahtarlar sırasıyla 12px ve 20px anlamına gelir; anahtarı piksel boyutu olarak yorumlamayın. | | 4 | 16px | Yayımlanmış $spacers haritası. 305 ve 405 gibi ardışık olmayan anahtarlar sırasıyla 12px ve 20px anlamına gelir; anahtarı piksel boyutu olarak yorumlamayın. | | 405 | 20px | Yayımlanmış $spacers haritası. 305 ve 405 gibi ardışık olmayan anahtarlar sırasıyla 12px ve 20px anlamına gelir; anahtarı piksel boyutu olarak yorumlamayın. | | 5 | 24px | Yayımlanmış $spacers haritası. 305 ve 405 gibi ardışık olmayan anahtarlar sırasıyla 12px ve 20px anlamına gelir; anahtarı piksel boyutu olarak yorumlamayın. | | 505 | 28px | Yayımlanmış $spacers haritası. 305 ve 405 gibi ardışık olmayan anahtarlar sırasıyla 12px ve 20px anlamına gelir; anahtarı piksel boyutu olarak yorumlamayın. | | 6 | 32px | Yayımlanmış $spacers haritası. 305 ve 405 gibi ardışık olmayan anahtarlar sırasıyla 12px ve 20px anlamına gelir; anahtarı piksel boyutu olarak yorumlamayın. | | 7 | 40px | Yayımlanmış $spacers haritası. 305 ve 405 gibi ardışık olmayan anahtarlar sırasıyla 12px ve 20px anlamına gelir; anahtarı piksel boyutu olarak yorumlamayın. | | 8 | 48px | Yayımlanmış $spacers haritası. 305 ve 405 gibi ardışık olmayan anahtarlar sırasıyla 12px ve 20px anlamına gelir; anahtarı piksel boyutu olarak yorumlamayın. | ### Yazı boyutu haritası | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | 2xs | 1.2rem | Yayımlanmış $fds-font-sizes girdisi. Varsayılan kök boyutu, tarayıcının yazı tipi tercihini gözeterek %62,5'tir; tarayıcı varsayılanı 16px olduğunda 1.6rem, 16px'e karşılık gelir. | | xs | 1.4rem | Yayımlanmış $fds-font-sizes girdisi. Varsayılan kök boyutu, tarayıcının yazı tipi tercihini gözeterek %62,5'tir; tarayıcı varsayılanı 16px olduğunda 1.6rem, 16px'e karşılık gelir. | | sm | 1.6rem | Yayımlanmış $fds-font-sizes girdisi. Varsayılan kök boyutu, tarayıcının yazı tipi tercihini gözeterek %62,5'tir; tarayıcı varsayılanı 16px olduğunda 1.6rem, 16px'e karşılık gelir. | | md | 1.8rem | Yayımlanmış $fds-font-sizes girdisi. Varsayılan kök boyutu, tarayıcının yazı tipi tercihini gözeterek %62,5'tir; tarayıcı varsayılanı 16px olduğunda 1.6rem, 16px'e karşılık gelir. | | lg | 2.0rem | Yayımlanmış $fds-font-sizes girdisi. Varsayılan kök boyutu, tarayıcının yazı tipi tercihini gözeterek %62,5'tir; tarayıcı varsayılanı 16px olduğunda 1.6rem, 16px'e karşılık gelir. | | xl | 2.1rem | Yayımlanmış $fds-font-sizes girdisi. Varsayılan kök boyutu, tarayıcının yazı tipi tercihini gözeterek %62,5'tir; tarayıcı varsayılanı 16px olduğunda 1.6rem, 16px'e karşılık gelir. | | 2xl | 2.2rem | Yayımlanmış $fds-font-sizes girdisi. Varsayılan kök boyutu, tarayıcının yazı tipi tercihini gözeterek %62,5'tir; tarayıcı varsayılanı 16px olduğunda 1.6rem, 16px'e karşılık gelir. | | 3xl | 2.4rem | Yayımlanmış $fds-font-sizes girdisi. Varsayılan kök boyutu, tarayıcının yazı tipi tercihini gözeterek %62,5'tir; tarayıcı varsayılanı 16px olduğunda 1.6rem, 16px'e karşılık gelir. | | 4xl | 2.8rem | Yayımlanmış $fds-font-sizes girdisi. Varsayılan kök boyutu, tarayıcının yazı tipi tercihini gözeterek %62,5'tir; tarayıcı varsayılanı 16px olduğunda 1.6rem, 16px'e karşılık gelir. | | 5xl | 3.2rem | Yayımlanmış $fds-font-sizes girdisi. Varsayılan kök boyutu, tarayıcının yazı tipi tercihini gözeterek %62,5'tir; tarayıcı varsayılanı 16px olduğunda 1.6rem, 16px'e karşılık gelir. | | 6xl | 4.0rem | Yayımlanmış $fds-font-sizes girdisi. Varsayılan kök boyutu, tarayıcının yazı tipi tercihini gözeterek %62,5'tir; tarayıcı varsayılanı 16px olduğunda 1.6rem, 16px'e karşılık gelir. | | 7xl | 4.8rem | Yayımlanmış $fds-font-sizes girdisi. Varsayılan kök boyutu, tarayıcının yazı tipi tercihini gözeterek %62,5'tir; tarayıcı varsayılanı 16px olduğunda 1.6rem, 16px'e karşılık gelir. | ## Det Fælles Designsystem 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ı. ## Det Fælles Designsystem Tasarım Sistemi DKFDS Teması ve Uygulama Kapsamı ### Borger.dk veya Virk temasını bilinçli olarak seçin > Det Fælles Designsystem, Borger.dk ve Virk için ayrı stil sayfaları sunar. Bu örnek, dkfds 11.3.0 sürümünü sabitler ve Borger.dk stil sayfasını kullanarak temanın karakteristik yeşil birincil denetimlerini ve IBM Plex Sans metnini sağlar. Yalnızca tek bir düğmenin rengini değiştirip buna eksiksiz tema değişikliği demez. Farklı bir tema, bilinçli bir uygulama tercihi olarak yüklenmelidir. ### Özgün sıralamayı kütüphaneye atfetmeyin Yayımlanmış tablo yönergeleri, tablo işaretlemesini ve stillerini sağlar ancak sıralama ve arama davranışını açıkça uygulamaya bırakır. Önizleme, her ikisinin de eksiksiz özgün uygulamasını içerir. Bu ayrım önemlidir: DKFDS JavaScript dosyasını içe aktarmak, rastgele bir tabloyu aranabilir ve sıralanabilir bir veri görünümüne dönüştürmez. ## Det Fælles Designsystem Tasarım Sistemi Sass Değerleri ve Temel Ritim ### Kaynak haritalarını kaynak haritası olarak değerlendirin Bu referans, uydurulmuş --token adları yerine gerçek Sass değerlerini kaydeder. Boşluk haritasında 8px taban kullanılır; 305 gibi anahtarlar 12px, 405 gibi anahtarlar ise 20px anlamına gelir. Geliştirici, bu sayıları doğrudan piksel değeri olarak ele almak yerine kütüphanenin yardımcı işlevini veya ilgili yardımcı sınıf kurallarını kullanmalıdır. Parametre tablosu eşlemeyi görünür kılar. ### Kök yazı tipi boyutu kuralına uyun Varsayılan kök boyutu, tarayıcının yazı tipi tercihini gözeterek %62,5'tir. Bu nedenle kaynak yazı tipi boyutu haritasında, tarayıcının olağan varsayılanı altında standart küçük/gövde adımı için 1.6rem bulunur. Bir rem değerini farklı kök boyutu ortamına kopyalamak sonucu önemli ölçüde değiştirebilir. Örnek, tipografi ve boşluk bağlamının tutarlı kalması için gerçek stil sayfasını yükler. ## Det Fælles Designsystem Tasarım Sistemi Anlamsal Tablo Yapısı ### Başlık ve belirgin sütun rolleri kullanın Kaynak karşılaştırma tablosunda bir açıklama, sütun başlıkları ve olağan veri hücreleri bulunur. Kullanıcılar bu özellikleri karşılaştırdığından başlıklar, biçimler, sayısal dakika değerleri ve amaçlar ayrı sütunlarda yer alır. Okuma süreleri, ölçülmüş trafik veya performans istatistikleri değil, örnek için yazılmış tahminlerdir. Açıklama, tablonun yapısını değiştirmeden bu sınırı belirtir. - Açıklayıcı bir tablo başlığı ve sütun başlıkları sağlayın. - Sayısal verileri uygulama modelinde sayı olarak tutun. - Dar ekranlarda kaydırılabilir bölgeyi odaklanabilir olarak etiketleyin. ### Mobil kaydırmayı tablonun içinde tutun Sıralanabilir tablo, odaklanabilir ve duyarlı bir kaydırma bölgesinde yer alır. Minimum genişliği okunabilir sütunları korurken dış sayfanın görünüm alanı içinde kalmasını sağlar. Örnek, dar ekranda sıralama tablosunu ilgisiz kartlara dönüştürmez; böyle bir değişiklik farklı bir gezinme ve sıralama denetimi kuralı gerektirirdi. Klavye kullanıcısı kaydırma bölgesine odaklanabilir. ## Det Fælles Designsystem Tasarım Sistemi Sıralama Durumu ve Sayısal Karşılaştırma ### Tek bir etkin sıralamayı koruyun Başlık sütunu artan sırayla sıralanmaya başlar. Aynı başlığı etkinleştirmek sıralama yönünü tersine çevirir; dakika sütununu seçmek ise artan sırayla sıralamayı başlatır. aria-sort yalnızca etkin başlıkta bulunur ve her düğmenin gizli yönergesi bir sonraki işlemi açıklar. Görünür ok, bağımsız bir süsleme olmak yerine aynı durumu yansıtır. ### Sayıları sayı olarak karşılaştırın Dakikalar sayısal veridir ve çıkarma işlemiyle sıralanır. Başlıklar localeCompare ile sıralanır. Sayısal dizeleri alfabetik olarak sıralamak, değerler arttıkça yanıltıcı bir sıralamaya yol açar. Özgün satır nesneleri tek doğruluk kaynağı olmaya devam eder ve içerik oluşturulurken satır içeriği işaretleme olarak yorumlanmak yerine textContent kullanılır. ## Det Fælles Designsystem Tasarım Sistemi Gönderilen Arama ve Boş Sonuçtan Kurtarma ### Sorguyu gönderildiğinde uygulayın Form gönderildiğinde, Enter tuşuyla gönderim de dahil olmak üzere arama, görüntülenen tüm özelliklerde filtreleme yapar. Yalnızca yazı yazmak tablonun okuyucunun önünde değişmesine yol açmaz. Durum bildirimi görünür kayıt sayısını ve geçerli sıralamayı belirtirken sorgu alanda kalır. Bu yaklaşım, örnek için seçilen gönderimli arama modeline uygundur. ### Sıralamayı kaybetmeden sorguyu sıfırlayın Eşleşme bulunmayan bir sorgu, kurtarma mesajını gösterir. Sıfırlama, seçili sıralama sütununu ve yönünü koruyarak tüm satırları geri yükler ve odağı arama alanına taşır. Böylece arama ve sıralama ayrı durum değişkenleri olarak kalır. Beş satırlık veri kümesinin tamamı zaten yerel olduğundan yapay bir yüklenme durumu yoktur. ## Det Fælles Designsystem Tasarım Sistemi Eksiksiz Çalışan Entegrasyon ### Dağıtım varlıklarını dosya yollarını koruyarak yükleyin 11.3.0 paketinin dışa aktarma haritası, rastgele CSS derin içe aktarımlarını değil, JavaScript girişini sunar. Kurulum, dağıtımı public/dkfds konumuna kopyalar ve stil sayfasını index.html dosyasına bağlayarak göreli yazı tipi ve görsel yollarını korur. Sağlanan main.js ve denmark.css dosyalarını bu kabukla aynı konuma kaydedin. Yerel önizleme, güvenilir inceleme için aynı varlıkları içerir. 1. dkfds 11.3.0 sürümünü yükleyin ve dağıtımını public/dkfds konumuna kopyalayın. 2. Borger.dk stil sayfasını yüklemek için sağlanan HTML kabuğunu kullanın. 3. Tam giriş dosyasını ve CSS dosyasını kaydedin, ardından yerel uygulamayı çalıştırın. 4. Sayısal sıralamayı, gönderilen aramayı, sıfırlamayı ve dahili mobil kaydırmayı doğrulayın. ### Karşılaştırma akışının tamamını kontrol edin Dakikaları her iki yönde de sıralayın, eşleşme bulunmayan bir arama gönderin ve sıfırlayın. Template araması yapın ve geçerli sıralama korunurken yalnızca iki şablon satırının kaldığını doğrulayın. Telefon genişliğinde tabloyu kendi içinde kaydırın ve sayfanın taşmadığını kontrol edin. Bu kontrol, paketle gelen tüm varlıkların yüklendiğini ve tarayıcı hatası olmadığını da doğrular. ## Det Fælles Designsystem Tasarım Sistemi Bileşen Örnekleri ### main.js — karşılaştırma davranışının tamamı Özgün verilerin tamamı, sayısal/metinsel sıralama, gönderimle filtreleme ve sıfırlama. ``` // index.html loads /dkfds/css/dkfds-borgerdk.css from the copied distribution. import './denmark.css'; const rows=[{name:'Content inventory',type:'Worksheet',minutes:25,note:'Map the purpose and owner of each section.'},{name:'Accessibility review',type:'Checklist',minutes:30,note:'Inspect keyboard use, reading order and clear labels.'},{name:'Research questions',type:'Template',minutes:15,note:'Separate assumptions from questions that need evidence.'},{name:'Decision summary',type:'Template',minutes:10,note:'Record a choice, its reason and what remains uncertain.'},{name:'Prototype walkthrough',type:'Guide',minutes:20,note:'Walk through one realistic task and note friction.'}];let key='name',direction=1,query='';document.getElementById('root').innerHTML=`

DET FÆLLES DESIGNSYSTEM / ORIGINAL TABLE STUDY

Find a planning resource

Compare five authored resources. Search the full table or sort by title and estimated reading time.

Original resource comparison; reading times are sample estimates
FormatPurpose
`;const $=id=>document.getElementById(id);function render(){const list=rows.filter(r=>Object.values(r).join(' ').toLowerCase().includes(query)).sort((a,b)=>direction*(key==='minutes'?a.minutes-b.minutes:a.name.localeCompare(b.name)));$('rows').replaceChildren(...list.map(r=>{const tr=document.createElement('tr');[r.name,r.type,String(r.minutes),r.note].forEach(value=>{const td=document.createElement('td');td.textContent=value;tr.append(td)});return tr}));$('count').textContent=list.length+' of '+rows.length+' resources · sorted by '+(key==='name'?'title':'minutes')+' '+(direction===1?'ascending':'descending');$('empty').hidden=!!list.length;document.querySelectorAll('.sort').forEach(b=>{const active=b.dataset.key===key;active?b.parentElement.setAttribute('aria-sort',direction===1?'ascending':'descending'):b.parentElement.removeAttribute('aria-sort');b.querySelector('.arrow').textContent=active?(direction===1?'↑':'↓'):'↕';b.querySelector('.sr-only').textContent=' — sort '+(active&&direction===1?'descending':'ascending')})}$('search-form').addEventListener('submit',e=>{e.preventDefault();query=$('search').value.trim().toLowerCase();render()});$('reset').addEventListener('click',()=>{$('search').value='';query='';render();$('search').focus()});document.querySelectorAll('.sort').forEach(b=>b.addEventListener('click',()=>{direction=key===b.dataset.key?-direction:1;key=b.dataset.key;render()}));render(); ``` Kod referansı - Yayımlanmış tablo entegrasyonu sınırına uygun olarak sıralama ve arama, özgün uygulama koduyla sağlanır. ### denmark.css — özgün sayfa düzeni Duyarlı arama denetimleri ve klavyeyle odaklanılabilen tablo kaydırma bölgesi. ``` body{margin:0}main{max-width:1160px;padding:32px;margin:auto}.eyebrow{font-size:14px;font-weight:600;letter-spacing:.04em}.lead{max-width:66ch}#search-form{margin:32px 0}.search-controls{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.search-controls input{flex:1;min-width:180px;max-width:480px}#count{font-weight:600}.table--responsive-scroll{position:relative;max-width:100%;overflow:auto}.table{min-width:720px;width:100%}.table caption{text-align:left;font-weight:600;margin-bottom:16px}.table th:nth-child(1){width:25%}.table th:nth-child(2){width:15%}.table th:nth-child(3){width:16%}.arrow{margin-left:8px}.sort{white-space:nowrap}aside,#empty{padding:24px;margin-top:32px;background:#f1f1f1;border-left:4px solid #44831e}aside h2,#empty h2{margin-top:0}aside li{margin:8px 0}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.search-controls{gap:12px}.search-controls input{flex-basis:100%;max-width:none}h1{font-size:34px}} @media(max-width:480px){.search-controls input{min-width:0;width:100%}.search-controls .button{max-width:100%;white-space:normal}h1{overflow-wrap:anywhere}} ``` Kod referansı - Tablo, dar ekranlarda kaydırma bölgesinin içinde sütun düzenini korur. ### index.html — dağıtım varlıklarının tamamını yükleyen kabuk Yayımlanmış stil sayfasını, göreli varlık yollarını koruyarak yükleyin. ``` Planning resource comparison
``` Kod referansı - Vite kök dizinindeki index.html dosyasını bu kabukla değiştirin. ## Det Fælles Designsystem Tasarım Sistemi Agent Kurulumu ### Uygulamaya Başlangıç Noktası Resmî stil sayfası ve yazı tipleri yerel olarak çalışır. Sıralama ve filtreleme uygulamanın sorumluluğundadır; bu statik tablo biçimlendirmesi için DKFDS.init çağrısı gerekmez. ``` npm create vite@latest dkfds-table -- --template vanilla cd dkfds-table npm install npm install dkfds@11.3.0 mkdir -p public/dkfds cp -R node_modules/dkfds/dist/. public/dkfds/ # Replace index.html, src/main.js and src/denmark.css with the supplied examples. npm run dev ``` ### Projeniz İçin Bir İstem ``` Gerçek 11.3.0 Borger.dk dağıtımını ve yazı tipi bağlamını kullanarak DKFDS kaynak karşılaştırmasını oluşturun. Özgün sayısal ve başlık sıralamasının tamamını, tek bir etkin aria-sort başlığını, gönderilen aramayı, kayıt sayısı geri bildirimini ve sıralamayı koruyan sıfırlama davranışını uygulayın. Tabloyu, klavyeyle erişilebilen kendi bölgesinde yatay olarak kaydırılabilir tutun. ``` ## Det Fælles Designsystem Tasarım Sistemi Kaynakları ve Kapsamı DKFDS 11.3.0 Borger.dk stillerini ve yazı tiplerini kullanan, özgün bir OpenDesign karşılaştırması. Sıralama, arama ve örnek veriler, yerleşik DKFDS tablo davranışları değil, uygulamaya ait özgün kodun tamamıdır. - Tablo yönergeleri İşaretleme, kaydırma, sıralama ve arama sorumlulukları. - Paket ve temalar Dağıtım stil sayfaları ve başlatma sınırları. - Tema ayarı Kaynak düzeyinde tema yapılandırması. - Sürümlenmiş kaynak Sass eşlemeleri, tema değerleri ve varlık lisansları. ## Det Fælles Designsystem Tasarım Sistemiyle İlgili Kaynaklar ### tasarım sistemi .italia Bootstrap Italia’nın gerçek tipografisi, duyarlı Stepper yapısı ve kurtarılabilir yerel form durumuyla okunaklı bir hizmet adımları akışı uygulayın. ### Designsystemet Designsystemet’ın gerçek tema rollerini, boyut modlarını ve yerel alan davranışını; karakter geri bildirimi ve korunan sunum durumuyla eksiksiz bir görev özeti düzenleyicisi aracılığıyla keşfedin. ### 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. - [Uygulama başvurusu](https://designsystem.dk/komponenter/tables/) - [Kaynak](https://github.com/detfaellesdesignsystem/dkfds-components) - [Kod referansı](https://designsystem.dk/komponenter/tables/) - [Kod referansı](https://designsystem.dk/kom-i-gang/implementering-kode/hent-kodepakken/) - [Tablo yönergeleri İşaretleme, kaydırma, sıralama ve arama sorumlulukları.](https://designsystem.dk/komponenter/tables/) - [Paket ve temalar Dağıtım stil sayfaları ve başlatma sınırları.](https://designsystem.dk/kom-i-gang/implementering-kode/hent-kodepakken/) - [Tema ayarı Kaynak düzeyinde tema yapılandırması.](https://designsystem.dk/kom-i-gang/implementering-kode/justering/) - [Sürümlenmiş kaynak Sass eşlemeleri, tema değerleri ve varlık lisansları.](https://github.com/detfaellesdesignsystem/dkfds-components)