Bileşenler

Form

Gönderirken alanları denetleyen, sorunları bağlantılı bir özetle gösteren ve odağı özete taşıyan form.

Storybook: Storybook
Kaynak kod: Kaynak kod

Durumlar

Durum	Görsel değişiklik	Token’lar
Sorunsuz	Özet yok	—
Durdurulmuş gönderim	Tehlike arka planlı özet	`color-status-danger-background`, `color-status-danger-border`
Özet odakta	2 px halka	`color-focus-ring`

Ölçüler

Özellik	Değer	Token
Alanlar arası	16 px	`space-xl`
Özet iç boşluğu	12 px	`space-lg`
Özet köşe yarıçapı	8 px	`radius-lg`

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-danger-background`		`#ffe8e7#ffe8e7#ffe8e7`	`#4c1d1d#4c1d1d#4c1d1d`
`--bigbang-color-status-danger-border`		`#ffd6d4#ffd6d4#ffd6d4`	`#822b2e#822b2e#822b2e`
`--bigbang-color-text-danger`		`#a6383c#a6383c#a6383c`	`#ffbebb#ffbebb#ffbebb`
`--bigbang-radius-lg`		`10px10px10px`	`10px10px10px`
`--bigbang-space-lg`		`12px12px12px`	`12px12px12px`
`--bigbang-space-xl`		`16px16px16px`	`16px16px16px`
`--bigbang-color-focus-ring`		`#146d83#737373#737373`	`#77bacf#8c8c8c#8c8c8c`

Hareket ve etkileşim

Etkileşim	Özellik	Süre token’ı	Easing token’ı	Hareketi azaltma
Özet belirir	Solar ve 4 px kayar (`motion.fieldMessage`)	`motion-list-enter-duration`	`easing-productive-enter`	Yalnızca solar.
Bağlantıya tıklama	Alan yumuşakça ortaya kaydırılır	Tarayıcı	Tarayıcı	Anında kaydırılır.