| Durum |
Görsel değişiklik |
Token’lar |
| Tamamlandı |
Birincil dolgu ve onay |
color-action-primary-default |
| Geçerli |
Birincil halka, kalın ad |
color-action-primary-default |
| Sonraki |
Soluk halka ve numara |
color-border-strong, color-text-subtle |
| Dikkat |
Tehlike dolgusu ve uyarı simgesi |
color-status-danger-emphasis |
| Üzerine gelme (düğme) |
Koyu dolgu, altı çizili ad |
color-action-primary-hovered |
| Özellik |
Değer |
Token |
| İşaret |
24 px |
stepper-marker-size |
| Çizgi kalınlığı |
2 px; boş kısmı katman zemininde |
stepper-track-thickness, color-surface-layer-2 |
| Yatay adımlar arası |
8 px |
space-md |
| Dikey adımlar arası |
16 px |
space-xl |
| Sıkışık düzen eşiği |
640 px |
— |
Değerler seçili markaya göre gösterilir; markayı üst çubuktan değiştirebilirsiniz.
| Token | Örnek | Açık mod | Koyu mod |
|---|
--bigbang-stepper-marker-size | | 24px24px24px | 24px24px24px |
--bigbang-stepper-track-thickness | | 2px2px2px | 2px2px2px |
--bigbang-color-action-primary-default | | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 |
--bigbang-color-action-on-primary-default | | #ffffff#fafafa#fafafa | #0a0a0a#171717#171717 |
--bigbang-color-border-strong | | #8c8c8c#8c8c8c#8c8c8c | #8c8c8c#8c8c8c#8c8c8c |
--bigbang-color-border-subtle | | #ededed#ededed#ededed | #303030#303030#303030 |
--bigbang-color-status-danger-emphasis | | #e1595b#e1595b#e1595b | #ff9a97#ff9a97#ff9a97 |
--bigbang-space-md | | 8px8px8px | 8px8px8px |
--bigbang-space-xl | | 16px16px16px | 16px16px16px |
--bigbang-color-focus-ring | | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
| Etkileşim |
Özellik |
Süre token’ı |
Easing token’ı |
Hareketi azaltma |
| Adım tamamlanır |
Çizgi dolar (motion.progress) |
motion-progress-duration |
easing-productive |
Süre kısalır. |
| Adım tamamlanır |
Onay %60’tan büyür (motion.success) |
motion-feedback-duration |
motion-feedback-easing |
Ölçek 1; yalnızca belirir. |
| Adım sayısı değişir |
Yeni sayı solarak gelir (motion.reveal) |
motion-skeleton-reveal-duration |
easing-productive-enter |
Değişmez. |
| İleri’nin üzerine gelme |
Ok 2 px ileri kayar |
motion-release-duration |
easing-spring-productive-fast |
Ok yerinde kalır. |