Command

Durumlar

Durum	Görsel değişiklik	Token’lar
Varsayılan	Yükseltilmiş yüzey, kenarlıksız; arama gömük zeminli bir alan	color-surface-raised, color-surface-sunken
Vurgulanan komut	Hafif zemin	color-action-subtle-hovered
Devre dışı komut	Soluk metin	color-text-disabled
Kısayol tuşu	Gömük zemin, ince kenarlık	color-surface-sunken, color-border-subtle
Pencere açık	1 px kaplama çizgisi ve shadow-overlay gölgesi; hafif karartılmış ve 4 px bulanık arka plan	color-border-overlay, shadow-overlay, color-surface-scrim, blur-surface-scrim

Ölçüler

Arama alanı kenarlardan 8 px içeride, 32 px yükseklikte, gömük zeminli ve 8 px köşelidir (command-search-height). Komutlar kenardan 8 px içeridedir; öğelerde 8 px yatay boşluk ve 8 px ikon aralığı vardır. Liste en fazla 448 px ya da ekranın yüzde 80’i kadar yükselir ve ince bir kaydırma çubuğuyla kayar. Pencere en fazla 560 px genişliktedir (command-width, dialog-width-md ile aynı), iki yanda 16 px boşluk bırakır ve ekranın üstünden %12 aşağıda açılır (command-offset-top). Köşe yarıçapı radius-lg’dir.

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-raised		#ffffff#ffffff#ffffff	#262626#262626#262626
--bigbang-color-surface-sunken		#f5f5f5#f5f5f5#f5f5f5	#171717#171717#171717
--bigbang-color-action-subtle-hovered		#f5f5f5#f5f5f5#f5f5f5	#303030#303030#303030
--bigbang-color-surface-scrim		rgba(0, 0, 0, 0.3215686274509804)rgba(0, 0, 0, 0.3215686274509804)rgba(0, 0, 0, 0.3215686274509804)	rgba(0, 0, 0, 0.47843137254901963)rgba(0, 0, 0, 0.47843137254901963)rgba(0, 0, 0, 0.47843137254901963)
--bigbang-color-border-subtle		#ededed#ededed#ededed	#303030#303030#303030
--bigbang-color-text-subtle		#404040#404040#404040	#d4d4d4#d4d4d4#d4d4d4
--bigbang-dialog-backdrop-blur		4px4px4px	4px4px4px
--bigbang-command-width		560px560px560px	560px560px560px
--bigbang-command-offset-top		12dvh12dvh12dvh	12dvh12dvh12dvh
--bigbang-command-search-height		32px32px32px	32px32px32px
--bigbang-radius-lg		10px10px10px	10px10px10px

Hareket ve etkileşim

Etkileşim	Özellik	Süre token’ı	Easing token’ı	Hareketi azaltma
Pencere açılışı	opacity, scale 0,96 → 1, 8 px yükselme (motion.dialog)	motion-dialog-enter-duration	motion-dialog-enter-easing	Ölçek ve kayma olmaz; pencere yalnızca belirir.
Pencere kapanışı	opacity, scale geri	motion-dialog-exit-duration	motion-dialog-exit-easing	Yalnızca solar.
Arka plan	opacity (motion.scrim)	Pencereyle aynı	Pencereyle aynı	Değişmez.
Vurgulanan komut	Arka plan rengi (motion.hover)	motion-hover-duration (110 ms)	motion-hover-easing	Değişmez.

Değerler için Hareket sayfasına bakın.