Components

TimeField

A 24-hour time field typed into hour and minute (and optional second) segments.

Storybook: Storybook
Source: Source

States

State	Visual change	Tokens
Empty	Placeholder segments (`HH`, `MM`)	`color-text-placeholder`
Focused segment	Primary fill	`color-action-primary-default`, `color-action-on-primary-default`
Invalid	Danger border and message	`color-border-danger`, `color-text-danger`
Read-only	The value does not change	—
Disabled	Faded box and icon	`color-surface-disabled`, `color-text-disabled`

Measurements

Property	Value	Token
Height	32 / 36 / 40 px	`input-height-sm`, `input-height-md`, `input-height-lg`
Icon	16 px	`icon-size-sm`
Icon to segments	8 px	`space-md`

Tokens

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

Token	Sample	Light mode	Dark mode
`--bigbang-input-height-md`		`36px36px36px`	`36px36px36px`
`--bigbang-input-height-lg`		`40px40px40px`	`40px40px40px`
`--bigbang-icon-size-sm`		`16px16px16px`	`16px16px16px`
`--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-text-placeholder`		`#737373#737373#737373`	`#a1a1a1#a1a1a1#a1a1a1`
`--bigbang-color-focus-ring`		`#146d83#737373#737373`	`#77bacf#8c8c8c#8c8c8c`

Motion and interaction

Interaction	Property	Duration token	Easing token	Reduced motion
Segment focus	Fill and text colour	`motion-hover-duration`	`motion-hover-easing`	Unchanged.
Field focus	Border and focus ring (`motion.field`)	`motion-hover-duration`	`motion-hover-easing`	Unchanged.
Error message	Fades in, moving 4 px (`motion.fieldMessage`)	`motion-list-enter-duration`	`easing-productive-enter`	It only fades.

See Motion for values.