SearchInput

Durumlar

Durum	Görsel değişiklik	Token’lar
Boş	Yer tutucu, arama ikonu	color-text-placeholder, color-text-subtle
Değerli	Temizleme düğmesi büyüyerek belirir	color-text-subtle
Yükleniyor	İkon yerine dönen halka	period-spinner
Odak	Odak kenarlığı ve 2 px halka	color-border-focus, color-focus-ring
Devre dışı	Soluk kutu; temizleme düğmesi gizli	color-surface-disabled, color-text-disabled

Ölçüler

Özellik	Değer	Token
Yükseklik	32 / 36 / 40 px	input-height-sm, input-height-md, input-height-lg
Arama ikonu	16 px	icon-size-sm
Temizleme düğmesi	24 / 28 / 32 px	input-action-size-sm, input-action-size-md, input-action-size-lg
İkon ile metin arası	6 px	space-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-input-height-md		36px36px36px	36px36px36px
--bigbang-input-height-lg		40px40px40px	40px40px40px
--bigbang-input-action-size-md		28px28px28px	28px28px28px
--bigbang-input-action-size-lg		32px32px32px	32px32px32px
--bigbang-icon-size-sm		16px16px16px	16px16px16px
--bigbang-color-text-subtle		#404040#404040#404040	#d4d4d4#d4d4d4#d4d4d4
--bigbang-color-border-input		#8c8c8c#8c8c8c#8c8c8c	#737373#737373#737373
--bigbang-color-focus-ring		#146d83#737373#737373	#77bacf#8c8c8c#8c8c8c

Hareket ve etkileşim

Etkileşim	Özellik	Süre token’ı	Easing token’ı	Hareketi azaltma
Temizleme düğmesi belirir	%60’tan büyür ve solar (motion.success)	motion-feedback-duration	motion-feedback-easing	Ölçek 1; yalnızca solar.
Temizleme düğmesine basma	scale (motion.press)	motion-press-duration	motion-press-easing	Ölçek 1 kalır.
İkon ile halka geçişi	Çapraz solma (motion.reveal)	motion-skeleton-reveal-duration	easing-productive-enter	Değişmez; kısa solma.
Yükleniyor	Halka döner	period-spinner	Doğrusal	Dönüş durur; durum metinle duyurulur.

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