ListItem

Durumlar

Durum	Destek	Görsel değişiklik	Token’lar
Varsayılan	Var	Şeffaf yüzey, varsayılan metin	color-text-default, color-text-subtle
Üzerine gelme	Yalnızca render ile	Geçerli renk %8 opaklıkla üste biner	state-layer-hovered
Basılı	Yalnızca render ile	Katman %10 opaklık	state-layer-pressed
Odak	Yalnızca render ile	2 px halka, 2 px uzaklıkta; katman %10	color-focus-ring, border-width-focus, state-layer-focused
Seçili	Var	Seçili yüzey ve başlangıç ucunda 2 px çubuk	color-surface-selected, color-border-selected
Devre dışı	Var	Metin soluk; etkileşimli satır odak ve tıklamayı bırakır	color-text-disabled
Yükleniyor, boş, hata	Kompozisyon	Skeleton ve EmptyState ile listenin içinde	-

Ölçüler

Özellik	Değer	Token
Köşe yarıçapı	8 px	radius-md
Dikey iç boşluk, sm	8 px	space-md
Dikey iç boşluk, md	12 px	space-lg
Dikey iç boşluk, lg	16 px	space-xl
Yatay iç boşluk	sm 8 px, md 12 px, lg 16 px	space-md, space-lg, space-xl
Alanlar arası boşluk	sm 8 px, md ve lg 10 px	list-item-gap-sm, list-item-gap-md, list-item-gap-lg
Kenarlık	1 px; varsayılan saydam, outline görünümde color-border-default	color-border-default
muted zemin	Renkli satır	color-surface-layer-1
Baştaki görsel	leading içindeki doğrudan img: sm 32 px, md 40 px, lg 48 px, 6 px köşe; alt metin varsa alan ilk satıra hizalanır	list-item-media-size-*, radius-sm
Başlık ile alt metin arası	2 px	space-xxs
Seçili çubuk	2 px genişlik, uçlardan 4 px içeride	space-xxs, space-xs
Ayırıcı çizgi	1 px	color-border-subtle
Başlık stili	Orta kalınlık, tek satır sonra üç nokta; sm ve md 14 px / 20 px, lg 16 px / 24 px	label-md, body-lg
Alt metin stili	14 px / 20 px, iki satır sonra üç nokta	body-md
Bilgi stili	12 px / 16 px	body-sm

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-color-surface-selected		#edf5f8#ededed#ededed	#092932#404040#404040
--bigbang-color-border-selected		#146d83#171717#171717	#77bacf#e5e5e5#e5e5e5
--bigbang-color-border-subtle		#ededed#ededed#ededed	#303030#303030#303030
--bigbang-color-text-default		#171717#171717#171717	#fafafa#fafafa#fafafa
--bigbang-color-text-subtle		#404040#404040#404040	#d4d4d4#d4d4d4#d4d4d4
--bigbang-color-text-disabled		#a1a1a1#a1a1a1#a1a1a1	#525252#525252#525252
--bigbang-color-focus-ring		#146d83#737373#737373	#77bacf#8c8c8c#8c8c8c
--bigbang-state-layer-hovered		0.080.080.08	0.080.080.08
--bigbang-state-layer-focused		0.10.10.1	0.10.10.1
--bigbang-state-layer-pressed		0.10.10.1	0.10.10.1
--bigbang-radius-md		8px8px8px	8px8px8px
--bigbang-space-md		8px8px8px	8px8px8px
--bigbang-space-lg		12px12px12px	12px12px12px
--bigbang-space-xl		16px16px16px	16px16px16px
--bigbang-motion-hover-duration		0.11s0.11s0.11s	0.11s0.11s0.11s
--bigbang-motion-list-enter-duration		0.15s0.15s0.15s	0.15s0.15s0.15s
--bigbang-motion-list-stagger		0.03s0.03s0.03s	0.03s0.03s0.03s
--bigbang-motion-list-distance		4px4px4px	4px4px4px

Hareket ve etkileşim

Etkileşim	Hareket	Azaltılmış hareket
Üzerine gelme, basma, odak (render)	Katman opaklığı motion-hover-duration (110 ms) ile değişir (motion.stateLayer)	Aynı; yer değiştirme yok
Seçili olma	Yüzey rengi ve çubuk opaklığı 110 ms ile değişir (motion.hover)	Aynı
Giriş (animate)	Opaklık 0 → 1 ve 4 px yükselme, 150 ms, satır başına 30 ms gecikme, en fazla 8. satıra kadar (motion.listItem)	Yükselme 0 px; yalnızca kısa solma
Odak halkası	Hemen görünür (0 ms)	Aynı
Durağan satır	Hareket yok	Azaltılacak bir şey yok

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