İlkel ve Anlamsal Belirteçler

Tasarım belirteçleri, bir tasarım sisteminin renkler, boşluklar, yazı tipi boyutları ve diğer görsel kararlarını saklayan adlandırılmış değerlerdir. CSS'inizin her yerinde #3b82f6 değerini sabit kodlamak yerine ona bir ad verir ve her yerde bu ada başvurursunuz. Böylece genel olarak kolayca güncellenebilen tek bir doğruluk kaynağı oluşturulur. Tailwind'in yapılandırması, bu adlandırılmış değerlerden yardımcı program sınıfları oluşturduğu için tasarım belirteçleri için doğal bir yerdir.

İlkel belirteçler, kendilerine anlamsal bir anlam yüklenmemiş ham ve açıklayıcı değerlerdir. Bir değerin ne olduğunu, nerede kullanıldığını değil, açıklarlar. Örnek olarak color.blue.500, spacing.4 veya fontSize.lg verilebilir. Tailwind'in varsayılan renk paleti tamamen ilkel değerlerden oluşur: blue-500, red-300 ve benzerleri. Daha üst düzey anlamsal katmanı oluşturmak için ilkel belirteçlere başvurursunuz.

Anlamsal belirteçler, bir değerin ham görünümünü değil, amacını açıklar. blue-500 yerine color.primary tanımlarsınız. red-500 yerine color.danger tanımlarsınız. Anlamsal belirteçler kod tabanınızı niyet odaklı hâle getirir; text-primary ifadesini okuyan bir geliştirici, rengin gerçekte ne olduğundan bağımsız olarak bunun ana marka rengi olduğunu hemen anlar. Bu soyutlama, kolay tema oluşturmayı ve yeniden markalamayı mümkün kılar.

Sağlam bir token sistemi iki katman kullanır: altta primitives, üstte ise semantics bulunur. Primitive katmanı, tasarımınızda kullanabileceğiniz tüm ham değerleri depolar. Semantic katman, bu primitives değerlerini amaca dayalı adlarla eşler. Marka renginiz değiştiğinde primitive değeri yalnızca bir kez güncellersiniz ve ona başvuran her semantic token değişikliği otomatik olarak devralır. Sorumlulukların bu şekilde ayrılması, ölçeklenebilir tasarım sistemlerinin temelidir.

Semantic token'lar Tailwind config'inize kaydedildikten sonra, renk kabul eden tüm utility'ler arasında utility class olarak kullanılabilir hâle gelir. bg-primary, text-primary, border-primary ve ring-primary kullanabilirsiniz; bunların tümü aynı semantic değere başvurur. Bu sayede config'inizdeki primary rengini değiştirdiğinizde, arayüzünüzde bu semantic utility'leri kullanan her öğe anında güncellenir.

İyi token adlandırması, rolü ve ölçeği açıklayan tutarlı bir düzen izler. Yaygın bir kural category.role.modifier biçimini kullanır; örneğin color.action.default, color.action.hover ve color.action.disabled. submit-button-blue gibi aşırı özgül adlardan kaçının; token'ı başka bir yerde yeniden kullanmak istediğiniz anda bu adlar anlamını yitirir. Görsel uygulamayı değil, amacı ve ölçeği açıklayan adlar seçin.

İki katmanlı mimariyi sürdürmenin en temiz yolu, primitives değerlerini ayrı bir dosyada JavaScript sabitleri olarak tanımlamak ve bunları Tailwind config'inize aktarmaktır. Bu yaklaşım, primitives değerlerinin okunabilir ve yeniden kullanılabilir olmasını sağlarken config'in yalnızca semantic eşlemeleri içermesini sağlar. Bir tasarımcı marka paletini değiştirdiğinde yalnızca primitives dosyasının güncellenmesi gerekir; semantic eşleme olduğu gibi kalır.

Token'lar yalnızca renklerle sınırlı değildir. Semantic boşluk ve tipografi token'ları da tanımlayabilirsiniz. p-4 yerine card-padding adlı bir semantic boşluk token'ı kullanmak, boşluğun ne amaçla kullanıldığını açıkça belirtir. Tailwind'de bunları theme.extend.spacing ve theme.extend.fontSize altında eklersiniz. Bu, arayüz tutarlılığını güvence altına alır: uygulamadaki her kart aynı p-card boşluğunu kullanır ve bu boşluğun yalnızca bir kez ayarlanması gerekir.

Etkileşimli durumlar için token tanımlamak da aynı derecede önemlidir. Birincil düğmenin varsayılan, üzerine gelme, etkin ve devre dışı görünümleri için token'lara ihtiyacı vardır. Semantic token'lar olmadığında her geliştirici üzerine gelme durumu için biraz farklı tonlar seçebilir ve bu da görsel tutarsızlık oluşturur. action-hover ve action-disabled gibi semantic token'larla sistemdeki her düğme, kullanıcı etkileşimine aynı şekilde yanıt verir.

Semantic token'lar koyu mod ile birleştirildiğinde en güçlü hâline ulaşır. blue-500 gibi bir primitive token sabit bir değere sahipken primary gibi bir semantic token, açık ve koyu modlarda farklı primitives değerlerine eşlenebilir. Aracı olarak CSS değişkenlerini kullanmak, CSS'yi yeniden oluşturmadan çalışma zamanında geçiş yapmayı sağlar. Bu teknik temalandırma modülünde daha ayrıntılı ele alınacaktır; ancak semantic token'ların bunu mümkün kıldığını anlamak, mimari açıdan önemli bir kavrayıştır.

Bir tasarım sistemi büyüdükçe token denetimleri zorunlu hâle gelir. Denetim, her token'ın etkin olarak kullanılıp kullanılmadığını, herhangi bir token'ın belgelenen amacından sapıp sapmadığını ve yeni bir token gerektiren yeni kalıpların ortaya çıkıp çıkmadığını kontrol eder. grep gibi araçlar veya özel tasarım token yöneticileri, kullanılmayan token'ları bulmak için kod tabanınızı tarayabilir. Kullanılmayan token'ları kaldırmak config'i yalın tutar ve ekibe yeni katılan geliştiricilerin zihinsel yükünü azaltır.

Bu derste şunları öğrendiniz: primitive token'lar, color.blue.500 gibi adlandırılmış ham değerlerdir; semantic token'lar, bu primitive değerleri color.primary gibi amaca dayalı adlarla eşler; iki katmanlı mimari ise bir değerin ne olduğunu, nerede kullanıldığından ayırır. Sırada, CSS değişkenlerinin Tailwind token'ları çalışma zamanında tema değiştirmeye nasıl bağladığını inceleyeceğiz.