Bileşenler

Kbd

Bir klavye tuşunu ya da kısayolunu gösteren öğe.

Storybook: Storybook
Kaynak kod: Kaynak kod

Durumlar

Kbd etkileşimli değildir; tek durumu vardır.

Durum	Görsel değişiklik	Token’lar
Varsayılan	Katman zemininde, 1 px ince halka ve küçük gölgeyle tuş, ikincil metin	`color-surface-layer-1`, `color-border-subtle`, `shadow-xs`, `color-text-subtle`
İpucu içinde	İpucu metin renginin açık tonu, ters metin; halka ve gölge yok	`color-text-inverse`

Ölçüler

Özellik	`sm` (varsayılan)	`md`	Token
En küçük yükseklik ve genişlik	20 px	24 px	`kbd-size-sm`, `kbd-size-md`
Yazı stili	`label-sm`	`label-md`	`text.label-sm`, `text.label-md`
Yatay iç boşluk	4 px	4 px	`space-xs`
Tuşlar arası	2 px	2 px	`space-xxs`
Köşe yarıçapı	6 px	6 px	`kbd-radius` (`radius-sm`)

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-surface-layer-2`		`#ededed#ededed#ededed`	`#303030#303030#303030`
`--bigbang-color-text-subtle`		`#404040#404040#404040`	`#d4d4d4#d4d4d4#d4d4d4`
`--bigbang-color-text-subtlest`		`#525252#525252#525252`	`#a1a1a1#a1a1a1#a1a1a1`
`--bigbang-color-text-inverse`		`#ffffff#ffffff#ffffff`	`#171717#171717#171717`
`--bigbang-kbd-radius`		`6px6px6px`	`6px6px6px`
`--bigbang-space-xs`		`4px4px4px`	`4px4px4px`
`--bigbang-space-xxs`		`2px2px2px`	`2px2px2px`
`--bigbang-kbd-size-sm`		`20px20px20px`	`20px20px20px`
`--bigbang-kbd-size-md`		`24px24px24px`	`24px24px24px`

Hareket ve etkileşim

Kbd hareket etmez: etkileşimli değildir ve durumu değişmez.