Çok Temalı ve Çok Markalı Belirteç Mimarisi

Tema, aynı markanın renk modunu değiştirir (aynı ürünün açık ve koyu sürümleri). Marka ise farklı bir görsel kimliktir; aynı tasarım sistemi bileşenleri, farklı ürünlere veya müşterilere hizmet etmek için farklı renkler, tipografi ve boşluklarla işlenir. Her ikisi de aynı belirteç mimarisini, ancak farklı soyutlama düzeylerinde kullanır.

İlkel belirteçler, sistemde kullanılabilen ham değerlerin eksiksiz paletidir. Her renk adımını (color-blue-50 ile color-blue-900 arası), her boşluk birimini ve her yazı tipi boyutunu içerir. İlkel belirteçler bileşenlerde hiçbir zaman doğrudan kullanılmaz; yalnızca anlamsal belirteçler tarafından referans alınır. Palet bir kez tanımlanır ve tüm temalar ile markalar arasında paylaşılır.

Anlamsal belirteçler amacı ifade eder: color-background-page, color-text-primary, color-action-primary. Her anlamsal belirteç, geçerli temaya uygun bir ilkel belirteç değerine başvurur. Bileşenler yalnızca anlamsal belirteçler temel alınarak oluşturulur. Tema uygulaması bu katmanda gerçekleşir.

Açık temada: color-background-page, color-white değerine; color-text-primary, color-gray-900 değerine; color-action-primary ise color-blue-500 değerine başvurur. Bu eşlemeler, açık tema bağlamı için anlamsal katmanı geçersiz kılan temaya özgü bir belirteç dosyasında tanımlanır.

Koyu temada: color-background-page, color-gray-950 değerine; color-text-primary, color-gray-50 değerine; color-action-primary ise color-blue-400 değerine başvurur (koyu arka planlarda kontrast sağlamak için biraz daha açıktır). Yalnızca anlamsal eşlemeler değişir; ilkel palet ve tüm bileşenler aynı kalır.

Marka A, birincil renk olarak maviyi kullanır (color-action-primary: {color-blue-500}). Marka B ise yeşili kullanır (color-action-primary: {color-green-500}). Düğme bileşeni var(--color-action-primary) değerini okur; etkin markanın hangisi olduğundan tamamen habersizdir. Marka geçersiz kılmaları yalnızca anlamsal belirteç eşlemelerini değiştirir; bileşen kodunu asla değiştirmez.

CSS özel özellikleri, çalışma zamanında tema değiştirmeyi kolaylaştırır. Geçerli temayı bir veri özniteliğinde saklayın: document.documentElement.setAttribute('data-theme', 'dark'). CSS kuralları, [data-theme="dark"] seçicisi altında anlamsal belirteçleri geçersiz kılar. Tarayıcı, tüm var() başvurularını yeni değerlere hemen çözümler; JavaScript ile yeniden işleme hiç gerekmez.

Ayrı dağıtımlar olarak sunulan farklı markalar için derleme zamanında tema oluşturmayı kullanın: Style Dictionary ile marka başına ayrı CSS belirteç dosyaları oluşturun ve uygulama başlangıcında doğru marka CSS'sini yükleyin. Bu yaklaşım, markanın kullanıcı etkileşimi sırasında değil, dağıtım zamanında belirlendiği durumlar için uygundur (farklı alan adları, alt alan adları veya beyaz etiketli örnekler).

Çok markalı ve çok temalı bir sistem, iki boyutlu bir matris gerektirir: Marka A Açık, Marka A Koyu, Marka B Açık ve Marka B Koyu. CSS özel özellikleri, iç içe seçicilerle bu durumu zarif bir şekilde yönetir: [data-brand="a"][data-theme="dark"], belirli bir birleşim için anlamsal belirteçleri geçersiz kılar. Dört birleşim, dört kod tabanı değil, dört CSS bloğudur.

Tasarım sistemi geliştikçe belirteçler eklenir, yeniden adlandırılır veya kaldırılır. Belirteçleri kodla aynı depoda sürüm denetimine alın. Bir belirteci kullanımdan kaldırırken eski adı bir sürüm döngüsü boyunca yeni ada yönlendiren bir takma ad olarak koruyun, kullanımdan kaldırma yorumu ekleyin ve belirteci kullanan kodu güncelleyin. Tasarım ve mühendislik ekipleri arasındaki belirteç değişikliklerini yapılandırılmış bir değişiklik günlüğü aracılığıyla koordine edin.

Yönetişim, belirteçleri kimin ekleyebileceğini veya değiştirebileceğini ve hangi inceleme sürecinin gerekli olduğunu tanımlar. İlkel belirteçler tasarım ekibinin onayını gerektirir. Anlamsal belirteçler hem tasarım hem de mühendislik incelemesi gerektirir. Bileşen belirteçleri, bileşen sahibi tarafından yönetilebilir. Bu yönetişim olmadan yinelenen belirteçler ortaya çıkar ve "tek doğruluk kaynağı" güvencesi bozulur.

Bileşenler neden ilkel belirteçler yerine anlamsal belirteçlere başvurmalıdır?

Temalar bir marka içindeki renk kiplerini değiştirir; markalar farklı görsel kimliklerdir. İlkel belirteçler ham renk paletidir; anlamsal belirteçler anlamı ifade eder ve temalandırmayı mümkün kılar. Bileşenler yalnızca anlamsal belirteçleri kullanır. Koyu kip ve marka geçersiz kılmaları yalnızca anlamsal belirteç eşlemelerini değiştirir; bileşenler değişmeden kalır. Çalışma zamanında temalandırma, [data-theme] seçicileriyle CSS özel özelliklerini kullanır; derleme zamanında markalama, her marka için ayrı CSS oluşturur. Belirteç yönetişimi ve sürümleme, sistem geliştikçe tutarlılığını korur.