| Durum |
Görsel değişiklik |
Token’lar |
| Varsayılan |
İnce kenarlık |
color-border-subtle |
| Üzerine gelme |
Daha koyu kenarlık |
color-border-strong |
| Seçili |
2 px birincil kenarlık, seçili yüzey, dolu daire |
color-action-primary-default, color-surface-selected |
| Klavye odağı |
2 px dış halka |
color-focus-ring |
| Geçersiz |
Tehlike kenarlığı |
color-border-danger |
| Devre dışı |
Soluk yüzey ve metin |
color-surface-disabled, color-text-disabled |
| Özellik |
Değer |
Token |
| İç boşluk |
12 px |
space-lg |
| Öğeler arası |
8 px |
space-md |
| Köşe yarıçapı |
8 px |
radius-lg |
| En küçük genişlik (yatay) |
224 px |
— |
| Radyo dairesi |
16 px |
radio-size |
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-space-lg | | 12px12px12px | 12px12px12px |
--bigbang-radio-size | | 16px16px16px | 16px16px16px |
--bigbang-color-border-subtle | | #ededed#ededed#ededed | #303030#303030#303030 |
--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-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 |
| Üzerine gelme |
Kenarlık rengi |
motion-hover-duration |
motion-hover-easing |
Değişmez. |
| Seçim |
Kenarlık, yüzey ve simge rengi |
motion-hover-duration |
motion-hover-easing |
Değişmez. |
| Seçim noktası |
Nokta ölçeklenerek belirir (motion.selectionMark) |
motion-selection-duration |
motion-selection-easing |
Ölçek 1; yalnızca belirir. |