Skip to content

Commit

Permalink
docs: v11 color token updates for progress indicator component (#2329)
Browse files Browse the repository at this point in the history 
* docs: v11 color token updates for progress indicator component

This PR updates the color tokens on the style tab for the progress indicator component.

* Update style.mdx

Co-authored-by: Anna Gonzales <anna.gonzales3@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
  • Loading branch information
@johnbister @aagonzales @kodiakhq
3 people authored May 21, 2021
1 parent e28c974 commit bccd612
Showing 1 changed file with 13 additions and 13 deletions.
26 changes: 13 additions & 13 deletions src/pages/components/progress-indicator/style.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,22 +14,22 @@ checkmark. The current step the user is on is indicated by a filled circle.
Steps the user has not encountered yet, or future steps, are indicated by an
outlined circle.

| Class | Property | Color token |
| ----------------------------------------------------------- | ---------------- | ----------------- |
| `.bx--progress-step--complete svg` | fill | `$interactive-04` |
| `.bx--progress-step--incomplete svg` | fill | `$interactive-04` |
| `.bx--progress-step--current` <br/> `.bx--progress-line` | background-color | `$interactive-04` |
| `.bx--progress-step--incomplete` <br/> `.bx--progress-line` | background-color | `$ui-03` |
| `.bx--progress-label` | text color | `$text-01` |
| `.bx--progress-optional` | text color | `$text-02` |
| Class | Property | Color token |
| ----------------------------------------------------------- | ---------------- | --------------------- |
| `.bx--progress-step--complete svg` | fill | `$interactive` |
| `.bx--progress-step--incomplete svg` | fill | `$interactive` |
| `.bx--progress-step--current` <br/> `.bx--progress-line` | background-color | `$border-interactive` |
| `.bx--progress-step--incomplete` <br/> `.bx--progress-line` | background-color | `$border-subtle` |
| `.bx--progress-label` | text color | `$text-primary` |
| `.bx--progress-optional` | text color | `$text-secondary` |

### Interactive states

| Class | Property | Color token |
| --------------------------- | ---------- | ------------- |
| `.bx--progress-step:focus` | border | `$focus` |
| `.bx--progress-label:hover` | text color | `$link-01` |
| `.bx--progress__warning` | fill | `$support-01` |
| Class | Property | Color token |
| --------------------------- | ---------- | ---------------- |
| `.bx--progress-step:focus` | border | `$focus` |
| `.bx--progress-label:hover` | text color | `$link-primary` |
| `.bx--progress__warning` | fill | `$support-error` |

<div className="image--fixed">

Expand Down

0 comments on commit bccd612

Please sign in to comment.