Bileşenler
Field
Her form denetimi için etiket, denetim, yardım metni, hata ve sayacı kimliklerle bağlayan kap.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Varsayılan | Denetim kenarlığı | color-border-input |
| Odak | Kenarlık odak rengine geçer; 2 px dış odak çizgisi, 2 px aralıkla | color-border-focus, color-focus-ring |
| Geçersiz | Tehlike kenarlığı, çevresinde 2 px tehlike halesi ve hata metni | color-border-danger, color-status-danger-background, color-text-danger |
| Devre dışı | Soluk zemin ve metin | color-surface-disabled, color-border-disabled, color-text-disabled |
| Sayaç sınıra yakın (%80) | Sayaç uyarı rengi | color-text-warning |
| Sayaç sınırı aştı | Sayaç tehlike rengi | color-text-danger |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
| Parçalar arası boşluk | 4 px | space-xs |
| Denetim yüksekliği | 36 px | input-height-md |
| Denetim iç boşluğu | input-padding-inline |
input-padding-inline |
| Etiket stili | label-md (14 px) |
text.label-md |
| Yardım, hata, sayaç stili | body-sm (12 px) |
text.body-sm |
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-text-default | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-color-text-subtle | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 | |
--bigbang-color-text-danger | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb | |
--bigbang-color-text-warning | #8a5600#8a5600#8a5600 | #f7c790#f7c790#f7c790 | |
--bigbang-color-border-input | #8c8c8c#8c8c8c#8c8c8c | #737373#737373#737373 | |
--bigbang-color-border-focus | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 | |
--bigbang-color-border-danger | #c14347#c14347#c14347 | #ff9a97#ff9a97#ff9a97 | |
--bigbang-input-height-md | 36px36px36px | 36px36px36px | |
--bigbang-input-radius | 10px10px10px | 10px10px10px | |
--bigbang-space-xs | 4px4px4px | 4px4px4px |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”| Etkileşim | Özellik | Süre token’ı | Easing token’ı | Hareketi azaltma |
|---|---|---|---|---|
| Odak ve hata kenarlığı | border-color, background-color (motion.field) |
motion-focus-duration (110 ms) |
motion-focus-easing |
Değişmez; yalnızca renk geçişidir. |
| Hata metninin belirmesi | opacity 0 → 1 ve 4 px aşağı (motion.fieldMessage) |
motion-collapsible-duration (150 ms) |
motion-collapsible-easing |
Mesafe 0 olur; metin yalnızca belirir. |
| Odak halkası | Geçişsiz, anında | Yok | Yok | Değişmez. |
Değerler için Hareket sayfasına bakın.