| Durum |
Görsel değişiklik |
Token’lar |
| Varsayılan |
Kesikli kenarlık |
color-border-strong |
| Üzerine gelme |
Birincil kenarlık |
color-action-primary-default |
| Sürükleme |
Düz birincil kenarlık, seçili yüzey, %101 ölçek |
color-surface-selected |
| Klavye odağı |
“Dosya seçin” düğmesinde 2 px dış odak çizgisi |
color-focus-ring |
| Geçersiz |
Tehlike kenarlığı ve mesaj |
color-border-danger, color-text-danger |
| Devre dışı |
Soluk yüzey |
color-surface-disabled |
| Özellik |
Değer |
Token |
| İç boşluk |
16 px |
space-xl |
| Kenarlık |
2 px kesikli |
— |
| Köşe yarıçapı |
8 px |
radius-lg |
| Simge dairesi |
16 px simge, 8 px boşluk |
space-md |
| Liste satırı |
32 px düğmeyle |
button-height-sm |
| Yükleme ilerlemesi |
Etiketsiz ProgressBar, dosya adının altında |
space-xs |
| Yüklenemeyen dosya |
Satır, geçersiz alan gibi tehlike kenarlığı alır (3:1); ileti dosya adının altında |
color-border-danger, color-text-danger |
Değerler seçili markaya göre gösterilir; markayı üst çubuktan değiştirebilirsiniz.
| Token | Örnek | Açık mod | Koyu mod |
|---|
--bigbang-radius-lg | | 10px10px10px | 10px10px10px |
--bigbang-radius-md | | 8px8px8px | 8px8px8px |
--bigbang-space-xl | | 16px16px16px | 16px16px16px |
--bigbang-color-border-strong | | #8c8c8c#8c8c8c#8c8c8c | #8c8c8c#8c8c8c#8c8c8c |
--bigbang-color-action-primary-default | | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 |
--bigbang-color-surface-selected | | #edf5f8#ededed#ededed | #092932#404040#404040 |
--bigbang-color-surface-sunken | | #f5f5f5#f5f5f5#f5f5f5 | #171717#171717#171717 |
--bigbang-color-border-danger | | #c14347#c14347#c14347 | #ff9a97#ff9a97#ff9a97 |
--bigbang-color-focus-ring | | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
| Etkileşim |
Özellik |
Süre token’ı |
Easing token’ı |
Hareketi azaltma |
| Sürükleme başlar |
Kenarlık ve yüzey rengi; scale 1,01 |
motion-hover-duration, motion-release-duration |
motion-hover-easing, easing-spring-productive-fast |
Ölçek 1 kalır. |
| Sürükleme başlar |
Simge 4 px yukarı |
motion-release-duration |
easing-spring-productive-fast |
Simge yerinde kalır. |
| Dosya eklenir |
Satır kayarak belirir (motion.listItem) |
motion-list-enter-duration |
easing-productive-enter |
Yalnızca solar. |
| Hata |
Mesaj solarak belirir (motion.fieldMessage) |
motion-list-enter-duration |
easing-productive-enter |
Yalnızca solar. |