Bileşenler
CodeBlock
Kodu eşaralıklı yazıyla, isteğe bağlı başlık, satır numaraları ve kopyala düğmesiyle gösterir.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Varsayılan | 1. katman yüzeyi, ince kenarlık | color-surface-layer-1, color-border-subtle |
| Vurgulu satır | Seçili yüzey rengi | color-surface-selected |
| Bölge odakta | Kenarın içine çizilen 2 px odak çizgisi | color-focus-ring, border-width-focus |
| Kopyalandı | Kopyala düğmesinde onay işareti | Copy ile aynı |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
| Yazı stili | 14/20 eşaralıklı | text.code-md |
| Satır yatay iç boşluğu | 12 px | space-lg |
| Dikey iç boşluk | 8 px | space-md |
| Numara ile kod arası | 12 px | space-lg |
| Köşe yarıçapı | 10 px | radius-lg |
| Kopyala düğmesi | 32 px | button-height-sm |
Token’lar
Bölüm başlığı “Token’lar”| Token | Örnek | Açık mod | Koyu mod |
|---|---|---|---|
--bigbang-color-surface-layer-1 | #f5f5f5#f5f5f5#f5f5f5 | #262626#262626#262626 | |
--bigbang-color-border-subtle | #ededed#ededed#ededed | #303030#303030#303030 | |
--bigbang-color-surface-selected | #edf5f8#ededed#ededed | #092932#404040#404040 | |
--bigbang-color-text-default | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-color-text-subtle | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 | |
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c | |
--bigbang-radius-lg | 10px10px10px | 10px10px10px | |
--bigbang-space-lg | 12px12px12px | 12px12px12px | |
--bigbang-space-md | 8px8px8px | 8px8px8px |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”CodeBlock’un kendisi hareket etmez. Kopyala düğmesi Copy’nin onay geçişini kullanır.