Tabs: style
The following page documents visual specifications, including colour, typography, structure and size.
| Element | Property | Colour reference | Colour token |
|---|---|---|---|
| Label | text colour |
Action text 03
|
$nav-underline-label |
| Link container | border colour |
Transparent
|
$nav-underline-link-border |
| Items container | border colour |
UI border 02
|
$nav-underline-items-border |
Interactive state colour
| State | Element | Property | Colour reference | Colour token |
|---|---|---|---|---|
| Hover | Label | text colour |
Action text 05
|
$nav-underline-label-hover |
| Link container | border colour |
Action 06
|
$nav-underline-link-border-hover | |
| background colour |
Action 05
|
$nav-underline-link-background-hover | ||
| Active | Label | text colour |
Action text 01
|
$nav-underline-label-active |
| Link container | border colour |
Action 01
|
$nav-underline-link-border-active | |
| Disabled | Label | text colour |
Disabled overlay 03
|
$nav-underline-label-disabled |
