| State |
Support |
Visual change |
Tokens |
| Default |
Yes |
Transparent body and header; a darker 1 px rule under the header and 1 px row dividers; a sticky header on the raised fill |
table-header-background, table-header-foreground, table-header-border, table-border, color-surface-raised |
| Striped |
striped |
Every second body row is tinted |
table-row-background-striped |
| Hover |
hoverable (on by default) |
The body row is tinted; no lift. A row with an expanded disclosure (aria-expanded="true" inside it) keeps the tint |
table-row-background-hovered |
| Selected |
selected row |
Selected background, data-selected |
table-row-background-selected |
| Focus |
Scroll region |
2 px ring, inside the region |
color-focus-ring, border-width-focus |
| Pressed, disabled |
No |
Table is not interactive |
- |
| Property |
Value |
Token |
| Cell inline padding |
8 px; 0 at the end of a checkbox cell |
table-cell-padding-inline |
Cell block padding, compact |
4 px (rows at least 32 px) |
table-cell-padding-block-compact |
Cell block padding, standard (default) |
8 px (rows at least 40 px) |
table-cell-padding-block-standard |
Cell block padding, comfortable |
12 px (rows at least 48 px) |
table-cell-padding-block-comfortable |
Header row height, standard |
40 px |
table-header-height |
| Row divider |
1 px; none under the last body row, a rule above the footer instead |
table-border, border-width-default |
| Header style |
12 px / 16 px, medium, secondary text, not upper-cased |
label-sm |
| Cell style |
14 px / 20 px |
body-md |
| Caption style |
16 px / 24 px, semibold |
heading-sm |
| Space under the caption |
8 px |
space-md |
Values follow the selected brand; switch the brand in the top bar. The Table tokens refer to semantic tokens, so they change with the mode.
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-table-header-background | | rgba(0, 0, 0, 0)rgba(0, 0, 0, 0)rgba(0, 0, 0, 0) | rgba(0, 0, 0, 0)rgba(0, 0, 0, 0)rgba(0, 0, 0, 0) |
--bigbang-table-header-foreground | | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 |
--bigbang-table-row-background-hovered | | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 |
--bigbang-table-row-background-selected | | #edf5f8#ededed#ededed | #092932#404040#404040 |
--bigbang-table-row-background-striped | | #f5f5f5#f5f5f5#f5f5f5 | #171717#171717#171717 |
--bigbang-table-border | | #ededed#ededed#ededed | #303030#303030#303030 |
--bigbang-table-cell-padding-inline | | 8px8px8px | 8px8px8px |
--bigbang-table-cell-padding-block-compact | | 4px4px4px | 4px4px4px |
--bigbang-table-cell-padding-block-standard | | 8px8px8px | 8px8px8px |
--bigbang-table-header-height | | 40px40px40px | 40px40px40px |
--bigbang-table-cell-padding-block-comfortable | | 12px12px12px | 12px12px12px |
--bigbang-color-text-default | | #171717#171717#171717 | #fafafa#fafafa#fafafa |
--bigbang-color-focus-ring | | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
| Interaction |
Motion |
Reduced motion |
Row hover (hoverable) |
Background colour, motion-hover-duration (110 ms), motion-hover-easing (motion.hover); the row never lifts |
Same; colour only |
| Selected row |
The background colour changes at the same pace |
Same |
| Focus |
The ring appears at once (0 ms) |
Same |
| Scrolling, sticky header |
Browser scrolling; no extra animation |
Same |
Values come from tokens; see Motion for details.