Tag

Durumlar

Durum	Destek	Görsel değişiklik	Token’lar
Varsayılan	Var	Nötr: saydam zemin, varsayılan kenarlık ve metin. Diğer tonlar: pastel zemin, kenarlık ve metin; violet, teal ve pink durum anlamı taşımayan kategori renkleridir	color-border-default, color-text-default, color-status-*-background, color-status-*-border, color-status-*-foreground, color-tag-*-background, color-tag-*-border, color-tag-*-foreground
Üzerine gelme	Seçilebilir ve kaldır düğmesi	Geçerli metin renginde %8 katman	state-layer-hovered
Basılı	Seçilebilir ve kaldır düğmesi	%97’ye küçülür, %10 katman	motion-press-scale, state-layer-pressed
Odak	Seçilebilir ve kaldır düğmesi	2 px halka, 2 px uzaklıkta	color-focus-ring, border-width-focus
Seçili	Seçilebilir	Marka zemini, kenarlığı ve metni; onay işareti	color-status-brand-background, color-status-brand-border, color-status-brand-foreground
Devre dışı	Var	Soluk kenarlık ve metin, not-allowed imleci	color-border-disabled, color-text-disabled

Ölçüler

Özellik	Değer	Token
Yükseklik, sm	24 px	tag-height-sm
Yükseklik, md	32 px	tag-height-md
Yatay iç boşluk, sm	8 px	tag-padding-inline-sm
Yatay iç boşluk, md	12 px	tag-padding-inline-md
Köşe yarıçapı	8 px	tag-radius
Kenarlık	1 px	border-width-default
Simge, sm / md	12 px / 16 px	icon-size-xs, icon-size-sm
Kaldır düğmesi	24 x 24 px (her iki boyutta)	tag-height-sm
Öğeler arası boşluk	4 px; gruptaki etiketler arası 8 px	space-xs, space-md
Metin stili	14 px / 20 px, yarı kalın	label-md

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-tag-height-sm		24px24px24px	24px24px24px
--bigbang-tag-height-md		32px32px32px	32px32px32px
--bigbang-tag-padding-inline-sm		8px8px8px	8px8px8px
--bigbang-tag-padding-inline-md		12px12px12px	12px12px12px
--bigbang-tag-radius		8px8px8px	8px8px8px
--bigbang-color-border-default		#e5e5e5#e5e5e5#e5e5e5	#404040#404040#404040
--bigbang-color-text-default		#171717#171717#171717	#fafafa#fafafa#fafafa
--bigbang-color-status-brand-background		#edf5f8#fcf1ec#f0f3ff	#092932#3c190a#1d2046
--bigbang-color-status-brand-border		#cfe6ee#fad9cc#d9dfff	#0e414f#5e2911#2f336e
--bigbang-color-status-brand-foreground		#125768#7b3717#3e4490	#a4d0df#f3b9a1#b9c4ff
--bigbang-color-focus-ring		#146d83#737373#737373	#77bacf#8c8c8c#8c8c8c
--bigbang-motion-press-scale		0.970.970.97	0.970.970.97

Hareket ve etkileşim

Etkileşim	Hareket	Azaltılmış hareket
Basma (seçilebilir, kaldır)	scale 1 → 0,97, motion-press-duration (70 ms); bırakınca 230 ms yaylı geri dönüş (motion.press)	Ölçek 1; hareket yok
Üzerine gelme	Katman opaklığı, motion-hover-duration (110 ms) (motion.stateLayer)	Aynı; yalnızca renk
Onay işareti	Opaklık 0 → 1 ve ölçek %60 → %100, motion-selection-duration (110 ms) (motion.selectionMark)	Yalnızca kısa solma
Gruba eklenme	Opaklık 0 → 1 ve 4 px yükselme, motion-list-enter-duration (150 ms) (motion.listItem)	Yalnızca kısa solma
Kaldırma	Anında; çıkış animasyonu yok	Aynı
Odak	Halka hemen görünür (0 ms)	Aynı

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