| State |
Visual change |
Tokens |
| Default |
Layer 1 surface, thin border |
color-surface-layer-1, color-border-subtle |
| Highlighted line |
Selected surface colour |
color-surface-selected |
| Region focused |
2 px focus outline drawn inside the edge |
color-focus-ring, border-width-focus |
| Copied |
A check mark on the copy button |
As in Copy |
| Property |
Value |
Token |
| Type style |
14/20 mono |
text.code-md |
| Line inline padding |
12 px |
space-lg |
| Block padding |
8 px |
space-md |
| Number to code |
12 px |
space-lg |
| Corner radius |
10 px |
radius-lg |
| Copy button |
32 px |
button-height-sm |
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-color-surface-layer-1 | | #f5f5f5#f5f5f5#f5f5f5 | #262626#262626#262626 |
--bigbang-color-border-subtle | | #ededed#ededed#ededed | #303030#303030#303030 |
--bigbang-color-surface-selected | | #edf5f8#ededed#ededed | #092932#404040#404040 |
--bigbang-color-text-default | | #171717#171717#171717 | #fafafa#fafafa#fafafa |
--bigbang-color-text-subtle | | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 |
--bigbang-color-focus-ring | | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
--bigbang-radius-lg | | 10px10px10px | 10px10px10px |
--bigbang-space-lg | | 12px12px12px | 12px12px12px |
--bigbang-space-md | | 8px8px8px | 8px8px8px |
CodeBlock itself does not move. The copy button uses the Copy confirmation transition.