States
Section titled “States”| State | Visual change | Tokens |
|---|---|---|
| Default | The Select trigger: input border and the field shadow | color-border-input, color-surface-raised, input-shadow |
| Open | Focus border on the trigger; the grid opens on the shared popup surface: a hairline edge and the popup shadow | color-border-focus, color-border-overlay, shadow-popup |
| Cell focused | 2 px focus outline 2 px outside the cell | color-focus-ring, border-width-focus, focus-offset |
| Cell hover | Light fill | color-action-subtle-hovered |
| Chosen cell | Primary fill | color-action-primary-default, color-action-on-primary-default |
| Current cell | Bold text, 1 px inner outline | color-border-focus |
| Unavailable cell | Disabled text | color-text-disabled |
| Error | Danger border with a 2 px danger halo around it | color-border-danger, color-status-danger-background |
Measurements
Section titled “Measurements”| Property | Value | Token |
|---|---|---|
| Trigger height | 32 / 36 / 40 px (sm / md / lg) |
input-height-sm, input-height-md, input-height-lg |
| Grid width | 240 px | popover-width-sm |
| Cell height | 36 px | button-height-md |
| Cell corner radius | 6 px | menu-item-radius |
| Between cells | 4 px | space-xxs |
| Grid padding | 8 px | space-md |
Tokens
Section titled “Tokens”| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-color-border-input | #8c8c8c#8c8c8c#8c8c8c | #737373#737373#737373 | |
--bigbang-color-surface-raised | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--bigbang-color-action-subtle-hovered | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 | |
--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-border-focus | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 | |
--bigbang-color-text-disabled | #a1a1a1#a1a1a1#a1a1a1 | #525252#525252#525252 | |
--bigbang-color-border-overlay | #ededed#ededed#ededed | rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549) | |
--bigbang-shadow-popup | 0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549)0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549)0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549) | 0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804)0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804)0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804) | |
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c | |
--bigbang-popover-width-sm | 240px240px240px | 240px240px240px | |
--bigbang-button-height-md | 36px36px36px | 36px36px36px | |
--bigbang-menu-item-radius | 6px6px6px | 6px6px6px | |
--bigbang-input-height-sm | 32px32px32px | 32px32px32px | |
--bigbang-input-height-md | 36px36px36px | 36px36px36px | |
--bigbang-input-height-lg | 40px40px40px | 40px40px40px |
Motion and interaction
Section titled “Motion and interaction”The grid grows from the trigger with motion.popover; cells shrink while pressed with motion.press. With reduced motion only the opacity changes.