Bileşenler
Toolbar
Tek sekme durağı olan, ok tuşlarıyla gezilen ilgili denetimler satırı.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Varsayılan | Yükseltilmiş kap, saydam düğmeler | color-surface-raised, color-border-subtle |
| Üzerine gelme | Düğmede hafif dolgu | color-action-subtle-hovered |
| Basılı (an) | Düğme 0,97’ye küçülür | motion-press-scale |
Açık (pressed) |
Seçili zemin ve koyu metin | color-surface-selected, color-text-default |
| Odak | 2 px dış odak halkası | color-focus-ring, border-width-focus |
| Devre dışı | Soluk düğme, not-allowed imleci |
color-action-disabled-default |
Ölçüler
Bölüm başlığı “Ölçüler”| Boyut | Kap yüksekliği | Düğme yüksekliği |
|---|---|---|
sm |
32 px (button-height-sm) |
26 px |
md |
36 px (button-height-md) |
30 px |
Kabın iç boşluğu ve düğmeler arası aralık 2 px’tir (space-xxs); kenarlık 1 px, köşe yarıçapı radius-lg (10 px). Kap, aynı boydaki bir girdi ya da butonla aynı yüksekliktedir; içindeki düğmeler kabın iç boşluğu ve kenarlığı kadar kısalır. Ayırıcı 1 px kalınlıktadır. Yalnızca ikonlu düğmeler karedir.
Token’lar
Bölüm başlığı “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-color-surface-raised | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--bigbang-color-border-subtle | #ededed#ededed#ededed | #303030#303030#303030 | |
--bigbang-color-surface-selected | #edf5f8#ededed#ededed | #092932#404040#404040 | |
--bigbang-color-action-subtle-hovered | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 | |
--bigbang-color-text-default | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c | |
--bigbang-button-height-sm | 32px32px32px | 32px32px32px | |
--bigbang-button-height-md | 36px36px36px | 36px36px36px | |
--bigbang-button-radius | 10px10px10px | 10px10px10px | |
--bigbang-radius-md | 8px8px8px | 8px8px8px |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”| Etkileşim | Özellik | Süre token’ı | Easing token’ı | Hareketi azaltma |
|---|---|---|---|---|
| Basma | scale 1 → 0,97 |
Basınca motion-press-duration (70 ms), bırakınca motion-release-duration (230 ms) |
motion-press-easing; bırakırken easing-spring-productive-fast |
Ölçek 1 kalır. |
| Açma-kapama ve üzerine gelme | background-color, color |
motion-hover-duration (110 ms) |
motion-hover-easing |
Değişmez; renk geçişidir. |
Değerler için Hareket sayfasına bakın.