Popconfirm

States

State	Visual change	Tokens
Open	The shared popup surface: raised fill, hairline edge, popup shadow, 10 px corners	color-surface-raised, color-border-overlay, shadow-popup, popover-radius
Danger	The confirm button in the danger tone	color-action-danger-default
Loading	Loading on the confirm button, cancel disabled	As in Button

Measurements

Property	Value	Token
Width	240 px	popover-width-sm
Padding	10 px	popover-padding
Buttons	32 px, 6 px apart	button-height-sm, space-sm

Tokens

Token	Sample	Light mode	Dark mode
--bigbang-color-surface-raised		#ffffff#ffffff#ffffff	#262626#262626#262626
--bigbang-color-border-overlay		#ededed#ededed#ededed	rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549)
--bigbang-shadow-popup		0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549)0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549)0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549)	0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804)0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804)0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804)
--bigbang-popover-radius		10px10px10px	10px10px10px
--bigbang-popover-width-sm		240px240px240px	240px240px240px
--bigbang-popover-padding		10px10px10px	10px10px10px
--bigbang-popover-gap		10px10px10px	10px10px10px
--bigbang-button-height-sm		32px32px32px	32px32px32px
--bigbang-space-sm		6px6px6px	6px6px6px

Motion and interaction

The panel grows from the trigger with motion.popover and closes faster. The buttons use motion.press.