Bileşenler
InlineAlert
İçeriğin içinde bir bölüm, form ya da sayfa hakkında bilgi, başarı, uyarı ya da hata mesajı.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Bilgi / başarı / uyarı / hata | Tonun pastel zemini, kenarlığı ve ikonu | color-status-*-background, color-status-*-border, color-icon-* |
| Kapanıyor | Söner | motion-collapsible-duration |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
| İç boşluk | 12 px | space-lg |
| İkon ile metin arası | 8 px | space-md |
| İkon | 16 px, ilk satırla ortalı | icon-size-sm |
| Başlık ile mesaj arası | 2 px | space-xxs |
| Köşe yarıçapı | 8 px | radius-md |
| Başlık / mesaj | label-md / body-md, mesaj text-subtle renginde |
text.label-md, text.body-md, color-text-subtle |
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-status-info-background | #e1f1ff#e1f1ff#e1f1ff | #0d304b#0d304b#0d304b | |
--bigbang-color-status-success-background | #def6e5#def6e5#def6e5 | #103620#103620#103620 | |
--bigbang-color-status-warning-background | #ffebd5#ffebd5#ffebd5 | #422702#422702#422702 | |
--bigbang-color-status-danger-background | #ffe8e7#ffe8e7#ffe8e7 | #4c1d1d#4c1d1d#4c1d1d | |
--bigbang-color-border-subtle | #ededed#ededed#ededed | #303030#303030#303030 | |
--bigbang-color-text-subtle | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 | |
--bigbang-icon-size-sm | 16px16px16px | 16px16px16px | |
--bigbang-color-icon-info | #007ac1#007ac1#007ac1 | #79c2ff#79c2ff#79c2ff | |
--bigbang-color-icon-success | #138a50#138a50#138a50 | #7dd09b#7dd09b#7dd09b | |
--bigbang-color-icon-warning | #a16600#a16600#a16600 | #ecac5f#ecac5f#ecac5f | |
--bigbang-color-icon-danger | #c14347#c14347#c14347 | #ff9a97#ff9a97#ff9a97 | |
--bigbang-motion-collapsible-duration | 0.15s0.15s0.15s | 0.15s0.15s0.15s | |
--bigbang-motion-collapsible-distance | 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 |
|---|---|---|---|---|
Belirme (motion.collapsible) |
opacity, translate 4 px aşağı |
motion-collapsible-duration |
motion-collapsible-easing |
Mesafe 0; yalnızca belirir. |
| Kapatma | opacity, ardından kaldırılır |
motion-collapsible-duration |
motion-collapsible-easing |
Kısa sürer. |
Kapat butonu (motion.press) |
scale |
motion-press-duration |
motion-press-easing |
Ölçek 1. |
Değerler için Hareket sayfasına bakın.