Bileşenler
NativeSelect
Tarayıcının kendi seçim listesi; Select ile aynı görünen kapalı alan.
- 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ş yüzeyde giriş kenarlığı ve alan gölgesi | color-border-input, color-surface-raised, input-shadow |
| Odak | Kenarlık odak rengine geçer; 2 px odak çizgisi kutunun 2 px dışına çizilir | color-border-focus, color-focus-ring, border-width-focus, focus-offset |
| Hata | Tehlike kenarlığı ve çevresinde 2 px tehlike halesi | color-border-danger, color-status-danger-background |
| Devre dışı | Devre dışı yüzey, kenarlık ve metin | color-surface-disabled, color-text-disabled |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | sm |
md (varsayılan) |
lg |
Token |
|---|---|---|---|---|
| Yükseklik | 32 px | 36 px | 40 px | input-height-sm, input-height-md, input-height-lg |
| Başlangıç iç boşluğu | 12 px | 12 px | 12 px | input-padding-inline |
| Ok ikonu | 16 px, sondan 8 px | 16 px, sondan 8 px | 16 px, sondan 8 px | icon-size-sm, space-md |
| Köşe yarıçapı | 10 px | 10 px | 10 px | input-radius (radius-lg) |
sm, md ve lg boyları TextInput ve Button’ın aynı adlı boylarıyla aynı yüksekliktedir.
Token’lar
Bölüm başlığı “Token’lar”| Token | Örnek | Açık mod | Koyu mod |
|---|---|---|---|
--bigbang-color-border-input | #8c8c8c#8c8c8c#8c8c8c | #737373#737373#737373 | |
--bigbang-color-surface-raised | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--bigbang-input-shadow | 0px 1px 2px 0px rgba(0, 0, 0, 0.050980392156862744)0px 1px 2px 0px rgba(0, 0, 0, 0.050980392156862744)0px 1px 2px 0px rgba(0, 0, 0, 0.050980392156862744) | 0px 0px 0px 0px rgba(0, 0, 0, 0)0px 0px 0px 0px rgba(0, 0, 0, 0)0px 0px 0px 0px rgba(0, 0, 0, 0) | |
--bigbang-color-border-focus | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 | |
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c | |
--bigbang-color-border-danger | #c14347#c14347#c14347 | #ff9a97#ff9a97#ff9a97 | |
--bigbang-color-status-danger-background | #ffe8e7#ffe8e7#ffe8e7 | #4c1d1d#4c1d1d#4c1d1d | |
--bigbang-color-surface-disabled | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 | |
--bigbang-input-height-sm | 32px32px32px | 32px32px32px | |
--bigbang-input-height-md | 36px36px36px | 36px36px36px | |
--bigbang-input-height-lg | 40px40px40px | 40px40px40px | |
--bigbang-input-radius | 10px10px10px | 10px10px10px | |
--bigbang-input-padding-inline | 12px12px12px | 12px12px12px |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”Kenarlık ve dolgu odakta ve hatada motion.field ile geçer; odak çizgisi hemen görünür. Liste tarayıcının hareketiyle açılır.