Bileşenler
Toggle
Basılı kalan iki durumlu buton; bir ayarı açar ya da kapatır.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Varsayılan | tertiary: dolgu ve kenarlık yok; secondary: kenarlık |
color-border-default |
| Üzerine gelme | Arka plan bir ton koyulaşır | color-action-subtle-hovered |
| Basılı tutma | Arka plan bir ton daha koyulaşır, kutu 0,97’ye küçülür | color-action-subtle-pressed, motion-press-scale |
Basılı (data-pressed) |
Seçili dolgu ve seçili kenarlık birlikte | color-surface-selected, color-border-selected |
| Odak | 2 px dış odak halkası, 2 px aralıkla | color-focus-ring, border-width-focus |
| Devre dışı | Soluk metin, not-allowed imleci |
color-text-disabled |
Ölçüler
Bölüm başlığı “Ölçüler”| Boyut | Yükseklik ve en az genişlik | Yatay iç boşluk | İkon |
|---|---|---|---|
sm |
32 px (button-height-sm) |
button-padding-inline-sm; yalnızca ikonla 0 |
16 px |
md |
36 px (button-height-md) |
button-padding-inline-md; yalnızca ikonla 0 |
16 px |
lg |
40 px (button-height-lg) |
button-padding-inline-lg; yalnızca ikonla 0 |
20 px |
Köşe yarıçapı button-radius (10 px); ikon ile metin arası space-sm (6 px).
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-selected | #edf5f8#ededed#ededed | #092932#404040#404040 | |
--bigbang-color-border-selected | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 | |
--bigbang-color-border-default | #e5e5e5#e5e5e5#e5e5e5 | #404040#404040#404040 | |
--bigbang-color-action-subtle-hovered | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 | |
--bigbang-color-action-subtle-pressed | #ededed#ededed#ededed | #404040#404040#404040 | |
--bigbang-color-text-disabled | #a1a1a1#a1a1a1#a1a1a1 | #525252#525252#525252 | |
--bigbang-button-height-md | 36px36px36px | 36px36px36px | |
--bigbang-button-radius | 10px10px10px | 10px10px10px | |
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
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 (motion.press) |
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; yalnızca renk değişir. |
| Üzerine gelme, basılı duruma geçiş | background-color, border-color, color |
motion-hover-duration (110 ms) |
motion-hover-easing |
Değişmez; yalnızca renk geçişidir. |
| Odak | Odak halkası geçişsiz, anında belirir | Yok | Yok | Değişmez. |
Değerler için Hareket sayfasına bakın.