Avatar

Durumlar

Durum	Destek	Görsel değişiklik	Token’lar
Varsayılan	Var	Görsel ya da yedek: baş harfler, addan türeyen pastel etiket çiftinde (yedi renk)	color-tag-<renk>-background, color-tag-<renk>-foreground
Yükleniyor	Var	Yedek görünür; delay ile geciktirilebilir	-
Yüklendi	Var	Görsel opaklıkla belirir, yedek kalkar	motion-skeleton-reveal-duration
Hata	Var	Görsel yüklenemezse yedek kalır	-
Çevrimiçi, meşgul, çevrimdışı	status ile	Yeşil dolu, kırmızı dolu, gri içi boş nokta	color-status-success-emphasis, color-status-danger-emphasis, color-status-neutral-emphasis
Üzerine gelme, basılı, odak, devre dışı	Yok	Avatar etkileşimli değildir	-

Ölçüler

Boyut	Kutu	Durum noktası	Simge	Baş harf stili
xs	24 px	8 px	12 px	12 px / 16 px, orta
sm (varsayılan)	32 px	8 px	16 px	12 px / 16 px, orta
md	40 px	12 px	20 px	14 px / 20 px, orta
lg	48 px	12 px	24 px	16 px / 24 px, yarı kalın
xl	64 px	16 px	32 px	20 px / 28 px, yarı kalın

Özellik	Değer	Token
Kişi biçimi	Daire	radius-full
Şirket biçimi	8 px köşeli kare	radius-md
Durum halkası	2 px, yüzey rengi	color-surface-default
Grup örtüşmesi	8 px	space-md

Token’lar

Değerler seçili markaya göre gösterilir; markayı üst çubuktan değiştirebilirsiniz.

Token	Örnek	Açık mod	Koyu mod
--bigbang-avatar-size-xs		24px24px24px	24px24px24px
--bigbang-avatar-size-sm		32px32px32px	32px32px32px
--bigbang-avatar-size-md		40px40px40px	40px40px40px
--bigbang-avatar-size-lg		48px48px48px	48px48px48px
--bigbang-avatar-size-xl		64px64px64px	64px64px64px
--bigbang-avatar-status-size-xs		8px8px8px	8px8px8px
--bigbang-avatar-status-size-md		12px12px12px	12px12px12px
--bigbang-avatar-status-size-xl		16px16px16px	16px16px16px
--bigbang-color-status-success-emphasis		#2da264#2da264#2da264	#7dd09b#7dd09b#7dd09b
--bigbang-color-status-danger-emphasis		#e1595b#e1595b#e1595b	#ff9a97#ff9a97#ff9a97
--bigbang-color-status-neutral-emphasis		#737373#737373#737373	#a1a1a1#a1a1a1#a1a1a1
--bigbang-color-status-brand-background		#edf5f8#fcf1ec#f0f3ff	#092932#3c190a#1d2046
--bigbang-color-status-brand-foreground		#125768#7b3717#3e4490	#a4d0df#f3b9a1#b9c4ff
--bigbang-color-surface-default		#f7f7f7#f7f7f7#f7f7f7	#1e1e1e#1e1e1e#1e1e1e
--bigbang-color-surface-layer-2		#ededed#ededed#ededed	#303030#303030#303030
--bigbang-radius-md		8px8px8px	8px8px8px
--bigbang-radius-full		9999px9999px9999px	9999px9999px9999px
--bigbang-space-md		8px8px8px	8px8px8px
--bigbang-motion-skeleton-reveal-duration		0.11s0.11s0.11s	0.11s0.11s0.11s

Hareket ve etkileşim

Etkileşim	Hareket	Azaltılmış hareket
Görsel yüklenir	Opaklık 0 → 1, motion-skeleton-reveal-duration (110 ms), motion.reveal	Aynı kısa solma; hareket yok
Durum noktası görünür	Aynı solma	Aynı
Yedek gecikmesi (delay)	Yedek, gecikme dolana kadar görünmez	Aynı
Diğer	Avatar üzerine gelince, basınca ya da odakta değişmez	Azaltılacak bir şey yok

Değerler token’lardan gelir; ayrıntılar için Hareket sayfasına bakın.