Components

CountdownTimer

Time left until a moment, as a clock with an optional draining ring, a warning colour and spoken milestones.

Storybook: Storybook
Source: Source

States

State	Colour	Attribute
Running	`color-text-default`	—
Warning	`color-text-warning`	`data-warning`
Done	`color-text-subtle`	`data-done`

Measurements

Property	Value	Token
Ring	40 px	`countdown-timer-ring-size`
Ring stroke	3 / 40	—
Ring to clock	8 px	`space-sm`
Text	`sm` body, `md` label, `lg` heading	`type-body-sm`, `type-label-md`, `type-heading-md`

Tokens

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

Token	Sample	Light mode	Dark mode
`--bigbang-countdown-timer-ring-size`		`40px40px40px`	`40px40px40px`
`--bigbang-color-text-default`		`#171717#171717#171717`	`#fafafa#fafafa#fafafa`
`--bigbang-color-text-warning`		`#8a5600#8a5600#8a5600`	`#f7c790#f7c790#f7c790`
`--bigbang-color-text-subtle`		`#404040#404040#404040`	`#d4d4d4#d4d4d4#d4d4d4`
`--bigbang-color-border-subtle`		`#ededed#ededed#ededed`	`#303030#303030#303030`
`--bigbang-motion-hover-duration`		`0.11s0.11s0.11s`	`0.11s0.11s0.11s`

Motion and interaction

Interaction	Property	Duration token	Easing token	Reduced motion
Ring	Drains linearly every second	1 s	linear	It steps.
Warning and done	Colour change	`motion-hover-duration`	`motion-hover-easing`	Same; colour only.