Progress bar
Color
| Element | Property | Color token |
|---|---|---|
| Track | background-color | $layer |
| Bar | background-color | $interactive |
| Label | text color | $text-primary |
| Helper text | text color | $text-secondary |
Typography
| Element | Font-size (px / rem) | Font weight | Type token |
|---|---|---|---|
| Label | 14 / 0.875 | 400 | $body-short-01 |
| Helper text | 12 / 0.75 | 400 | $helper-text-01 |
Structure
| Element | Property | px / rem | Spacing token |
|---|---|---|---|
| Label | margin-bottom | 8 / 0.5 | $spacing-03 |
| Track | height | 8 / 0.5 | $spacing-03 |
| Bar | height | 8 / 0.5 | $spacing-03 |
| Helper text | margin-top | 4 / 0.25 | $spacing-02 |