ScrollArea

States

State	Visual change	Tokens
Rest	Scrollbars hidden; an edge with hidden content fades	space-xl (fade size)
Hover or scrolling	Scrollbars appear	color-line-strong (thumb)
Thumb hover	Thumb darkens	color-fg-subtle
Focus	2 px inner focus ring	color-focus-ring, border-width-focus
No overflow	No scrollbar, no fade	None

Measurements

Part	Size	Token
Scrollbar track	10 px wide, 1 px padding	scroll-area-track-size, border-width-default
Thumb	8 px, inside the track, fully round; color-line-strong so it keeps 3:1 against the surface	radius-full, color-line-strong
Edge fade	24 px	space-xl

The area size is yours: the root fills the height and width you give it. The corner radius comes from the container.

Tokens

Values are shown for the selected brand; change the brand from the top bar.

Token	Sample	Light mode	Dark mode
--bigbang-color-line-strong
--bigbang-color-fg-subtle
--bigbang-color-focus-ring		#146d83#737373#737373	#77bacf#8c8c8c#8c8c8c
--bigbang-space-xl		16px16px16px	16px16px16px
--bigbang-scroll-area-track-size		10px10px10px	10px10px10px
--bigbang-border-width-default		1px1px1px	1px1px1px

Motion and interaction

Interaction	Property	Duration token	Easing token	Reduced motion
Scrollbars appear and hide	opacity	motion-hover-duration (110 ms); at once while scrolling	motion-hover-easing	Unchanged; opacity only.
Thumb colour	background-color	motion-hover-duration	motion-hover-easing	Unchanged.
Scrolling	The browser’s native scrolling	None	None	Follows the browser setting.

The edge fade is drawn with a mask and does not shift the layout. See Motion for the values.