Token'lara genel bakış

Token nedir

Token, bir tasarım kararına verilen addır: “birincil eylemin arka planı”, “kartlar arası boşluk”, “kısa geçiş süresi” gibi. Bileşenler hiçbir değeri doğrudan yazmaz; bu adları kullanır. Böylece bir değer tek yerde değişir ve her bileşene aynı anda yansır.

Katmanlar

Katman	Örnek	Kim kullanır
Ham değer	red.700, dimension.12	Yalnızca anlam katmanı; bileşen ve ekran kodu kullanmaz
Anlam	color.action.danger.default, space.md	Bileşenler ve ekranlar
Bileşen	badge.height.md, button.padding-inline.md	Yalnızca ilgili bileşen

Marka paketi ham değerleri değiştirir (örneğin marka renk skalası). Anlam ve bileşen katmanları her markada aynı adlarla kalır; bu yüzden marka değişince bileşen kodu değişmez.

Adlandırma

Token adları kaynakta noktalı yolla yazılır ve CSS’te --bigbang- önekli, tireli değişkene dönüşür:

color.action.danger-subtle.hovered  →  --bigbang-color-action-danger-subtle-hovered

Renk adları önce rolü (surface, text, icon, border, action, status), sonra tonu ve en sonda durumu (default, hovered, pressed, disabled) taşır.

Kaynak ve çıktı

Token’lar W3C tasarım token biçiminde (DTCG) JSON dosyalarında tutulur ve Style Dictionary ile her marka ve mod için ayrı CSS ve JSON dosyalarına derlenir. Açık ve koyu mod aynı adları paylaşır, yalnızca değerler değişir. Kontrast testleri her derlemede metin ve arayüz çiftlerinin WCAG 2.2 eşiklerini karşıladığını doğrular.

Sonraki adım

• Tüm token’lar: her grubun açık ve koyu moddaki değerleri.
• Tema ve beyaz etiket: müşteri markasının nasıl tanımlandığı.