Tabs

Durumlar

Durum	Görsel değişiklik	Token’lar
Varsayılan	Soluk etiket	color-fg-subtle
Üzerine gelme	Etiket koyulaşır, arka plan bir ton koyulaşır	color-fg-default, color-action-subtle-hovered
Basılı	Arka plan bir ton daha koyulaşır	color-action-subtle-pressed
Seçili (line)	Koyu etiket, altında birincil renkte 2 px gösterge	color-fg-default, color-action-primary-default, tab-indicator-thickness
Seçili (contained)	Koyu etiket, katman zemini üstünde yükseltilmiş dolgu	color-surface-layer-2, color-surface-raised, shadow-raised
Odak	2 px iç odak halkası (liste kaydığı için içe çizilir)	color-focus-ring, border-width-focus
Devre dışı	Soluk etiket, not-allowed imleci	color-fg-disabled

Ölçüler

Boyut	Yükseklik	Yatay iç boşluk	Metin	İkon
sm	32 px (tab-height-sm)	6 px (tab-padding-inline-sm)	text-label-md	icon-size-sm
md (varsayılan)	36 px, dokunmatikte 44 px (tab-height-md)	8 px (tab-padding-inline-md)	text-label-md	icon-size-md

Sekmeler arasında boşluk yoktur (line) ve line listede alt çizgi yoktur: seçili sekmeyi yalnız 2 px gösterge belirtir. contained görünümde zemin satır yüksekliğindedir (32 ya da 36 px), 2 px aralık ve 2 px iç boşluk vardır (space-xxs); içindeki sekmeler bu yüzden 4 px daha kısadır. Köşe yarıçapı tab-radius (10 px). Liste ile panel arasında space-md (8 px) boşluk vardır.

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-tab-height-sm		32px32px32px	32px32px32px
--bigbang-tab-height-md		36px36px36px	36px36px36px
--bigbang-tab-padding-inline-sm		6px6px6px	6px6px6px
--bigbang-tab-padding-inline-md		8px8px8px	8px8px8px
--bigbang-tab-radius		10px10px10px	10px10px10px
--bigbang-tab-indicator-thickness		2px2px2px	2px2px2px
--bigbang-color-line-selected
--bigbang-color-surface-sunken		#f5f5f5#f5f5f5#f5f5f5	#171717#171717#171717
--bigbang-color-surface-raised		#ffffff#ffffff#ffffff	#262626#262626#262626
--bigbang-color-focus-ring		#146d83#737373#737373	#77bacf#8c8c8c#8c8c8c

Hareket ve etkileşim

Etkileşim	Özellik	Süre token’ı	Easing token’ı	Hareketi azaltma
Gösterge seçili sekmeye kayar	translate, width (dikeyde height)	motion-indicator-duration (310 ms)	easing-spring-productive-base	Anında (1 ms) yer değiştirir.
Panel belirir	opacity 0 → 1	motion-skeleton-reveal-duration	easing-productive-enter	Kısa solma kalır; hareket yoktur.
Üzerine gelme ve basılı renk	color, background-color	motion-hover-duration (110 ms)	motion-hover-easing	Değişmez; yalnızca renk geçişidir.
Odak	Halka geçişsiz, anında belirir	Yok	Yok	Değişmez.

Göstergenin genişliği yalnızca mutlak konumlu olduğu için animasyonlanır (MOT-02 istisnası); sayfa düzeni kaymaz. Değerler için Hareket sayfasına bakın.