Toast

Durumlar

Durum	Görsel değişiklik	Token’lar
Nötr	İkon yok	color-surface-raised
Başarı / bilgi / uyarı / hata	Durum renginde ikon	color-icon-success, color-icon-info, color-icon-warning, color-icon-danger
Yükleniyor	Döner simge	period-spinner
Yığılmış	Arkadakiler 12 px görünür ve %5 küçülür	toast-peek
Açık yığın	Bildirimler 8 px arayla dizilir	toast-gap

Ölçüler

Özellik	Değer	Token
Genişlik	360 px; 640 px altında ekran eksi kenar boşluğu	toast-width
Kenar boşluğu	24 px	toast-margin
İç boşluk	16 px	space-lg
Köşe yarıçapı	14 px	toast-radius
Başlık / açıklama	label-md / body-sm	text.label-md, text.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-toast-width		360px360px360px	360px360px360px
--bigbang-toast-gap		8px8px8px	8px8px8px
--bigbang-toast-peek		8px8px8px	8px8px8px
--bigbang-toast-margin		16px16px16px	16px16px16px
--bigbang-color-surface-raised		#ffffff#ffffff#ffffff	#262626#262626#262626
--bigbang-color-border-overlay		#ededed#ededed#ededed	rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549)
--bigbang-shadow-overlay		0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)	0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)
--bigbang-toast-radius		14px14px14px	14px14px14px
--bigbang-color-icon-success		#138a50#138a50#138a50	#7dd09b#7dd09b#7dd09b
--bigbang-color-icon-info		#007ac1#007ac1#007ac1	#79c2ff#79c2ff#79c2ff
--bigbang-color-icon-warning		#a16600#a16600#a16600	#ecac5f#ecac5f#ecac5f
--bigbang-color-icon-danger		#c14347#c14347#c14347	#ff9a97#ff9a97#ff9a97
--bigbang-motion-toast-enter-duration		0.24s0.24s0.24s	0.24s0.24s0.24s
--bigbang-motion-toast-exit-duration		0.15s0.15s0.15s	0.15s0.15s0.15s
--bigbang-motion-toast-distance		8px8px8px	8px8px8px
--bigbang-motion-list-move-duration		0.31s0.31s0.31s	0.31s0.31s0.31s

Hareket ve etkileşim

Etkileşim	Özellik	Süre token’ı	Easing token’ı	Hareketi azaltma
Giriş (motion.toastStack)	opacity, translate 8 px yukarı	motion-toast-enter-duration	motion-toast-enter-easing	Mesafe 0; yalnızca belirir.
Çıkış	opacity	motion-toast-exit-duration	motion-toast-exit-easing	Değişmez.
Yığılma ve açılma	translate, scale	motion-list-move-duration	easing-spring-productive-base	Kısa sürer.
Kaydırma	translate parmağı izler, bırakınca kenara çıkar	Yok (geçiş kapalı)	Yok	Değişmez.
Başarı ikonu (motion.success)	opacity, scale	motion-feedback-duration	motion-feedback-easing	Yalnızca belirir.

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