· Ece Tunalı
Tasarım tokenlarını CSS değişkenlerine taşımak
Kısa cevap: tokenları iki katmana ayırın. Alttaki katman ham değerleri tutar (--blue-600), üstteki katman kullanım amacını adlandırır (--color-action-primary). Bileşenler yalnız üst katmanı kullanır; böylece karanlık tema ya da marka değişikliği tek bir dosyada yapılır.
Neden iki katman
Bir düğmenin rengi "mavi 600" olarak yazılırsa marka rengi yeşile döndüğünde düğmenin kodunu da değiştirmeniz gerekir. "Birincil eylem rengi" olarak yazılırsa yalnız eşleme değişir. Bu ayrım ilk bakışta fazladan iş gibi görünür, ancak ikinci tema eklendiği gün kendini öder.
Örnek
:root {
--blue-600: #0F4C81;
--blue-400: #3B82C4;
--color-action-primary: var(--blue-600);
}
[data-theme="dark"] {
--color-action-primary: var(--blue-400);
}
.button-primary { background: var(--color-action-primary); }Adlandırma kuralları
- Ad, değeri değil amacı anlatsın: "uyarı arka planı", "kenar çizgisi zayıf".
- Bileşene özel token yalnız gerçekten gerekiyorsa açılsın; yoksa sayı hızla patlar.
- Kontrast çiftleri birlikte tanımlansın: zemin ve üstündeki metin aynı yerde dursun.
Geçiş sırası
Mevcut bir kod tabanında önce ham renkleri tek bir dosyada toplayın, sonra en çok kullanılan beş bileşeni anlamsal tokenlara taşıyın. Kalan bileşenler, dokunuldukça taşınabilir. Bu yöntemi Pusula tasarım sistemi projesinde kullandık.
Yazan: Ece Tunalı. Son güncelleme: