Bileşenler
Anchor
Uzun bir sayfanın bölümlerine bağlantı veren ve okunan bölümü işaretleyen sayfa içi gezinme.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Varsayılan | Soluk metin | color-text-subtle |
| Üzerine gelme | Varsayılan metin | color-text-default |
| Geçerli | Seçili kenarlık, kalın varsayılan metin | color-border-selected, color-text-default |
| Odak | Bağlantının içine çizilen 2 px odak çizgisi, komşu bağlantıların üstüne taşmaz | color-focus-ring, border-width-focus |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
| Bağlantı başı boşluğu | 16 px | space-lg |
| Alt bağlantı başı boşluğu | 24 px | space-2xl |
| Bağlantı dikey boşluğu | 4 px | space-xs |
Token’lar
Bölüm başlığı “Token’lar”| Token | Örnek | Açık mod | Koyu mod |
|---|---|---|---|
--bigbang-color-text-subtle | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 | |
--bigbang-color-text-default | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-color-border-subtle | #ededed#ededed#ededed | #303030#303030#303030 | |
--bigbang-color-border-selected | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 | |
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c | |
--bigbang-border-width-focus | 2px2px2px | 2px2px2px | |
--bigbang-space-lg | 12px12px12px | 12px12px12px | |
--bigbang-space-2xl | 20px20px20px | 20px20px20px | |
--bigbang-space-xs | 4px4px4px | 4px4px4px |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”Renk değişimi motion.hover ile yumuşar; geçerli işaret anında taşınır.