Components

PasswordInput

A password field with an eye button, and an optional rule list, strength bar and Caps Lock warning.

Storybook: Storybook
Source: Source

States

State	Visual change	Tokens
Hidden	Value as dots, eye icon	`color-text-subtle`
Shown	Plain text, the crossed eye grows in	`color-text-default`
Rule met	Green text and check icon	`color-text-success`
Strength	1, 2 or 3 segments fill	`color-status-danger-emphasis`, `color-status-warning-emphasis`, `color-status-success-emphasis`
Caps Lock	Warning icon and text	`color-text-warning`
Invalid	Danger border, error text	`color-border-danger`, `color-text-danger`
Disabled	Faded box and button	`color-surface-disabled`, `color-text-disabled`

Measurements

Property	Value	Token
Height	32 / 36 / 40 px	`input-height-sm`, `input-height-md`, `input-height-lg`
Eye button	24 / 28 / 32 px	`input-action-size-sm`, `input-action-size-md`, `input-action-size-lg`
Rule icon	16 px	`icon-size-sm`
Strength bar	4 px high, 2 px gap	`space-xs`, `space-xxs`

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-input-action-size-md`		`28px28px28px`	`28px28px28px`
`--bigbang-input-action-size-lg`		`32px32px32px`	`32px32px32px`
`--bigbang-color-border-input`		`#8c8c8c#8c8c8c#8c8c8c`	`#737373#737373#737373`
`--bigbang-color-text-success`		`#0e7644#0e7644#0e7644`	`#a5e2b9#a5e2b9#a5e2b9`
`--bigbang-color-text-warning`		`#8a5600#8a5600#8a5600`	`#f7c790#f7c790#f7c790`
`--bigbang-color-status-danger-emphasis`		`#e1595b#e1595b#e1595b`	`#ff9a97#ff9a97#ff9a97`
`--bigbang-color-status-warning-emphasis`		`#c17a00#c17a00#c17a00`	`#ecac5f#ecac5f#ecac5f`
`--bigbang-color-status-success-emphasis`		`#2da264#2da264#2da264`	`#7dd09b#7dd09b#7dd09b`
`--bigbang-color-focus-ring`		`#146d83#737373#737373`	`#77bacf#8c8c8c#8c8c8c`

Motion and interaction

Interaction	Property	Duration token	Easing token	Reduced motion
Pressing the eye button	`scale` (`motion.press`)	`motion-press-duration`, `motion-release-duration`	`motion-press-easing`, `easing-spring-productive-fast`	Scale stays 1.
Icon change	The new icon grows from 60 % (`motion.success`)	`motion-feedback-duration`	`motion-feedback-easing`	Scale 1; it only fades.
Rule met	Colour change and icon growth	`motion-hover-duration`, `motion-feedback-duration`	`motion-hover-easing`, `motion-feedback-easing`	Only colour changes.
Strength bar	`background-color`	`motion-progress-duration`	`easing-productive`	Unchanged.
Caps Lock warning	Fades in and drops 4 px (`motion.fieldMessage`)	`motion-collapsible-duration`	`motion-collapsible-easing`	It only fades.

See Motion for values.