States
Section titled “States”| State | Look | Attribute |
|---|---|---|
| Masked | A run of dots and the visible ends; eye icon | — |
| Revealed | The full value; crossed-out eye icon | data-revealed |
Measurements
Section titled “Measurements”| Property | Value | Token |
|---|---|---|
| Show toggle | 32 px | input-action-size-md |
| Icon | 16 px | icon-size-sm |
| Between parts | 2 px | space-xxs |
Tokens
Section titled “Tokens”Values are shown for the selected brand; switch brands from the top bar.
| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-input-action-size-md | 28px28px28px | 28px28px28px | |
--bigbang-icon-size-sm | 16px16px16px | 16px16px16px | |
--bigbang-color-text-default | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-color-text-subtle | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 | |
--bigbang-space-xxs | 2px2px2px | 2px2px2px | |
--bigbang-motion-skeleton-reveal-duration | 0.11s0.11s0.11s | 0.11s0.11s0.11s | |
--bigbang-motion-feedback-duration | 0.24s0.24s0.24s | 0.24s0.24s0.24s |
Motion and interaction
Section titled “Motion and interaction”| Interaction | Property | Duration token | Easing token | Reduced motion |
|---|---|---|---|---|
| Reveal and hide | The text redraws and fades in (motion.reveal) |
motion-skeleton-reveal-duration |
easing-productive-enter |
Same; opacity only. |
| Icon change | The new icon grows from 60% (motion.success) |
motion-feedback-duration |
motion-feedback-easing |
It only appears. |
| Press | The toggle shrinks slightly (motion.press) |
motion-press-duration |
motion-press-easing |
No shrink. |