Calendar

Durumlar

Durum	Görsel değişiklik	Token’lar
Bugün	1 px iç halka, kalın rakam	color-border-focus
Seçili	Birincil dolgu	color-action-primary-default, color-action-on-primary-default
Üzerine gelme	Hafif dolgu	color-action-subtle-hovered
Seçilemez	Soluk ve üstü çizili	color-text-disabled
Durum noktası	4 px nokta	color-status-*-emphasis
Odak	2 px halka	color-focus-ring

Ölçüler

Özellik	Değer	Token
Gün hücresi	40 px	calendar-cell-size
Ay düğmeleri	32 px	button-height-sm
Başlık ile ızgara arası	6 px	space-sm
Gün adları	12 px / 16 px, normal kalınlık, ikincil renk	body-sm, color-text-subtle
Ay genişliği	7 × 40 = 280 px	calendar-cell-size

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-calendar-cell-size		40px40px40px	40px40px40px
--bigbang-color-action-primary-default		#146d83#171717#171717	#77bacf#e5e5e5#e5e5e5
--bigbang-color-action-on-primary-default		#ffffff#fafafa#fafafa	#0a0a0a#171717#171717
--bigbang-color-action-subtle-hovered		#f5f5f5#f5f5f5#f5f5f5	#303030#303030#303030
--bigbang-color-surface-selected		#edf5f8#ededed#ededed	#092932#404040#404040
--bigbang-color-border-focus		#146d83#171717#171717	#77bacf#e5e5e5#e5e5e5
--bigbang-color-text-disabled		#a1a1a1#a1a1a1#a1a1a1	#525252#525252#525252
--bigbang-color-focus-ring		#146d83#737373#737373	#77bacf#8c8c8c#8c8c8c

Hareket ve etkileşim

Etkileşim	Özellik	Süre token’ı	Easing token’ı	Hareketi azaltma
Ay değişir	Yeni ay gidiş yönünde 4 px kayarak belirir	motion-list-enter-duration	easing-productive-enter	Mesafe 0; yalnızca solar.
Güne basma	scale 0,97 (motion.press)	motion-press-duration, motion-release-duration	motion-press-easing, easing-spring-productive-fast	Ölçek 1 kalır.
Gün üzerine gelme ve seçim	background-color	motion-hover-duration	motion-hover-easing	Değişmez.

Değerler için Hareket sayfasına bakın.