States
Section titled “States”| State | Look | Attribute |
|---|---|---|
Not read (requireScroll) |
Checkbox disabled, hint shown, bottom fade shown | — |
| Read | Checkbox enabled, no fade, bar full | data-read |
| Error | Danger border and message on the checkbox | aria-invalid |
Measurements
Section titled “Measurements”| Property | Value | Token |
|---|---|---|
| Text region at most | 240 px | consent-block-max-height |
| Text region padding | 16 / 12 px | space-xl, space-lg |
| Reading bar | 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-consent-block-max-height | 240px240px240px | 240px240px240px | |
--bigbang-color-surface-sunken | #f5f5f5#f5f5f5#f5f5f5 | #171717#171717#171717 | |
--bigbang-color-border-subtle | #ededed#ededed#ededed | #303030#303030#303030 | |
--bigbang-color-action-primary-default | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 | |
--bigbang-color-text-danger | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb | |
--bigbang-space-xl | 16px16px16px | 16px16px16px | |
--bigbang-space-lg | 12px12px12px | 12px12px12px | |
--bigbang-motion-progress-duration | 0.15s0.15s0.15s | 0.15s0.15s0.15s |
Motion and interaction
Section titled “Motion and interaction”| Interaction | Property | Duration token | Easing token | Reduced motion |
|---|---|---|---|---|
| Reading bar | Fills as you scroll (motion.progress) |
motion-progress-duration |
easing-productive |
Same. |
| Bottom fade | Goes away at the end | motion-hover-duration |
motion-hover-easing |
Same; opacity only. |
| Check mark | Grows in (motion.selectionMark) |
motion-selection-duration |
motion-selection-easing |
It only appears. |