Bileşenler

StatCard

Bir ölçünün değerini, önceki dönemle farkını ve isteğe bağlı eğilimini tek bir kutuda gösterir.

Durumlar

Durum	Destek	Görsel değişiklik	Token’lar
Varsayılan	Var	Card yüzeyi, değer ve değişim	`color-surface-raised`, `color-text-default`
Değişim, olumlu	Var	Değişim metni ve oku olumlu renkte	`color-data-positive`
Değişim, olumsuz	Var	Olumsuz renkte	`color-data-negative`
Değişim, nötr	Var	İkincil metin renginde	`color-text-subtle`
Yükleniyor	Var	Değer ve değişim yer tutucu; soldan sağa ışık geçer; kök `aria-busy`	`color-surface-sunken`, `radius-sm`
Veri yok	Var	Değer yerinde `—` ve ekran okuyucu gerekçesi	-
Gizli	Var	Değer `••••`	-
Üzerine gelme, basılı, odak	Yok	Durağan; etkileşimli parçası yoktur	-
Devre dışı	Yok	Devre dışı durumu yoktur	-
Hata	Kompozisyon	StatCard hata göstermez; kutuyu hata bileşeniyle değiştirin	-

Özellik	Değer	Token
Köşe yarıçapı	16 px	`radius-lg`
İç boşluk	16 px	`space-xl`
Etiket, değer ve alt satır arası	etiket-değer 6 px, değer-alt satır 4 px	`space-sm`, `space-xs`
Değer ile eğilim arası	en az 16 px	`space-xl`
Değişim, ok ile metin arası	2 px	`space-xxs`
Ok boyutu	12 px	`icon-size-xs`
Etiket stili	14 px / 20 px, orta kalınlık	`label-md`
Değer stili	24 px / 32 px, yarı kalın, tablo rakamlı	`heading-lg`
Değişim stili	14 px / 20 px, orta kalınlık, tablo rakamlı	`label-md`
Dönem ve bilgi stili	12 px / 16 px	`body-sm`
Yer tutucu, değer	96 × 32 px	-
Yer tutucu, değişim	64 × 20 px	-

Değerler seçili markaya göre gösterilir; markayı üst çubuktan değiştirebilirsiniz.

Token	Açık mod	Koyu mod
`--bigbang-color-surface-raised`	`#ffffff#ffffff#ffffff`	`#262626#262626#262626`
`--bigbang-color-surface-sunken`	`#f5f5f5#f5f5f5#f5f5f5`	`#171717#171717#171717`
`--bigbang-color-text-default`	`#171717#171717#171717`	`#fafafa#fafafa#fafafa`
`--bigbang-color-text-subtle`	`#404040#404040#404040`	`#d4d4d4#d4d4d4#d4d4d4`
`--bigbang-color-data-positive`	`#0e7644#0e7644#0e7644`	`#a5e2b9#a5e2b9#a5e2b9`
`--bigbang-color-data-negative`	`#a6383c#a6383c#a6383c`	`#ffbebb#ffbebb#ffbebb`
`--bigbang-radius-lg`	`10px10px10px`	`10px10px10px`
`--bigbang-radius-sm`	`6px6px6px`	`6px6px6px`
`--bigbang-space-xl`	`16px16px16px`	`16px16px16px`
`--bigbang-icon-size-xs`	`12px12px12px`	`12px12px12px`
`--bigbang-motion-skeleton-reveal-duration`	`0.11s0.11s0.11s`	`0.11s0.11s0.11s`
`--bigbang-period-shimmer`	`1.5s1.5s1.5s`	`1.5s1.5s1.5s`

Etkileşim	Hareket	Azaltılmış hareket
Değer değişir	Yeni değer `opacity` 0 → 1, `motion-skeleton-reveal-duration` (110 ms) (`motion.reveal`); sayı saymaz	Aynı kısa geçiş
Yükleniyor	Yer tutucuda ışık üç kez geçer, sonra durur (`period-shimmer`, `motion.skeleton`)	Işık durur; yer tutucu sabit kalır
Yer tutucudan değere	Değer 110 ms’de belirir	Aynı
Durağan kutu	Hareket yok	Azaltılacak bir şey yok

Değerler token’lardan gelir; ayrıntılar için Hareket sayfasına bakın.