Skip to content

Commit

Permalink
Docs: v11 color token updates for button component (#2314)
Browse files Browse the repository at this point in the history
* Update style.mdx

* token corrections (#2321)

Co-authored-by: Anna Gonzales <anna.gonzales3@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
  • Loading branch information
3 people authored May 20, 2021
1 parent 236db31 commit cd319a6
Showing 1 changed file with 73 additions and 73 deletions.
146 changes: 73 additions & 73 deletions src/pages/components/button/style.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,16 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

| Class | Property | Color token |
| ------------------- | ---------------- | ----------------- |
| `.bx--btn--primary` | text color | `$text-04` |
| `.bx--btn__icon` | svg | `$icon-03` |
| `.bx--btn--primary` | background-color | `$interactive-01` |
| `:hover` | background-color | `$hover-primary` |
| `:active` | background-color | `$active-primary` |
| `.bx--btn--primary` | text color | `$text-on-color` |
| `.bx--btn__icon` | svg | `$icon-on-color` |
| `.bx--btn--primary` | background-color | `$button-primary` |
| `:hover` | background-color | `$button-primary-hover` |
| `:active` | background-color | `$button-primary-active` |
| `:focus` | border | `$focus` |
| `:focus` | inset | `$ui-background` |
| `:disabled` | background-color | `$disabled-02` |
| `:disabled` | text color | `$disabled-03` |
| `:disabled` | svg | `$disabled-03` |
| `:focus` | inset | `$focus-inset` |
| `:disabled` | background-color | `$button-disabled`|
| `:disabled` | text color | `$text-on-color-disabled`|
| `:disabled` | svg | `$icon-on-color-disabled`|

<Row>
<Column colLg={8}>
Expand All @@ -35,17 +35,17 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

| Class | Property | Color token |
| --------------------- | ---------------- | ------------------- |
| `.bx--btn--secondary` | text color | `$text-04` |
| `.bx--btn__icon` | svg | `$icon-03` |
| `.bx--btn--secondary` | background-color | `$interactive-02` |
| `.bx--btn--secondary` | border | `$interactive-02` |
| `:hover` | background-color | `$hover-secondary` |
| `:active` | background-color | `$active-secondary` |
| `.bx--btn--secondary` | text color | `$text-on-color` |
| `.bx--btn__icon` | svg | `$icon-on-color` |
| `.bx--btn--secondary` | background-color | `$button-secondary` |
| `.bx--btn--secondary` | border | `$button-secondary` |
| `:hover` | background-color | `$button-secondary-hover` |
| `:active` | background-color | `$button-secondary-active` |
| `:focus` | border | `$focus` |
| `:focus` | inset | `$ui-background` |
| `:disabled` | background-color | `$disabled-02` |
| `:disabled` | text color | `$disabled-03` |
| `:disabled` | svg | `$disabled-03` |
| `:focus` | inset | `$focus-inset` |
| `:disabled` | background-color | `$button-disabled` |
| `:disabled` | text color | `$text-on-color-disabled` |
| `:disabled` | svg | `$icon-on-color-disabled` |

<Row>
<Column colLg={8}>
Expand All @@ -59,21 +59,21 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

| Class | Property | Color token |
| -------------------- | ---------------- | ------------------ |
| `.bx--btn--tertiary` | text color | `$interactive-03` |
| `.bx--btn__icon` | svg | `$interactive-03` |
| `.bx--btn--tertiary` | text color | `$button-tertiary` |
| `.bx--btn__icon` | svg | `$button-tertiary` |
| `.bx--btn--tertiary` | background-color | `transparent` |
| `.bx--btn--tertiary` | border | `$interactive-03` |
| `:hover` | text color | `$inverse-01` |
| `:hover` | svg | `$icon-03` |
| `:hover` | background-color | `$hover-tertiary` |
| `:active` | background-color | `$active-tertiary` |
| `:focus` | background-color | `$interactive-03` |
| `.bx--btn--tertiary` | border | `$button-tertiary` |
| `:hover` | text color | `$text-on-color` |
| `:hover` | svg | `$icon-on-color` |
| `:hover` | background-color | `$button-tertiary-hover` |
| `:active` | background-color | `$button-tertiary-active` |
| `:focus` | background-color | `$button-tertiary-hover` |
| `:focus` | border | `$focus` |
| `:focus` | inset | `$ui-background` |
| `:focus` | inset | `$focus-inset` |
| `:disabled` | background | `transparent` |
| `:disabled` | border | `$disabled-02` |
| `:disabled` | text color | `$disabled-03` |
| `:disabled` | svg | `$disabled-02` |
| `:disabled` | border | `$button-disabled` |
| `:disabled` | text color | `$text-on-color-disabled` |
| `:disabled` | svg | `$icon-on-color-disabled` |

<Row>
<Column colLg={8}>
Expand All @@ -87,16 +87,16 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

| Class | Property | Color token |
| ----------------- | ---------------- | --------------------- |
| `.bx--btn--ghost` | text color | `$link-01` |
| `.bx--btn__icon` | svg | `$link-01` |
| `.bx--btn--ghost` | text color | `$link-primary` |
| `.bx--btn__icon` | svg | `$link-primary` |
| `.bx--btn--ghost` | background-color ||
| `:hover` | text color | `$hover-primary-text` |
| `:hover` | svg | `$hover-primary-text` |
| `:hover` | background-color | `$hover-ui` |
| `:active` | background-color | `$active-ui` |
| `:hover` | text color | `$link-primary-hover` |
| `:hover` | svg | `$link-primary-hover` |
| `:hover` | background-color | `$background-hover` |
| `:active` | background-color | `$background-active` |
| `:focus` | border | `$focus` |
| `:disabled` | text color | `$disabled-03` |
| `:disabled` | svg | `$disabled-02` |
| `:disabled` | text color | `$text-disabled` |
| `:disabled` | svg | `$icon-disabled` |

<Row>
<Column colLg={8}>
Expand All @@ -110,16 +110,16 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

| Class | Property | Color token |
| --------------------------- | ---------------- | ---------------- |
| `.bx--btn--danger--primary` | text color | `$text-04` |
| `.bx--btn__icon` | svg | `$icon-03` |
| `.bx--btn--danger--primary` | background-color | `$danger-01` |
| `:hover` | background-color | `$hover-danger` |
| `:active` | background-color | `$active-danger` |
| `.bx--btn--danger--primary` | text color | `$text-on-color` |
| `.bx--btn__icon` | svg | `$icon-on-color` |
| `.bx--btn--danger--primary` | background-color | `$button-danger-primary` |
| `:hover` | background-color | `$button-danger-hover` |
| `:active` | background-color | `$button-danger-active` |
| `:focus` | border | `$focus` |
| `:focus` | inset | `$ui-background` |
| `:disabled` | background-color | `$disabled-02` |
| `:disabled` | text color | `$disabled-03` |
| `:disabled` | svg | `$disabled-03` |
| `:focus` | inset | `$focus-inset` |
| `:disabled` | background-color | `$button-disabled` |
| `:disabled` | text color | `$text-on-color-disabled` |
| `:disabled` | svg | `$icon-on-color-disabled` |

<Row>
<Column colLg={8}>
Expand All @@ -133,20 +133,20 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

| Class | Property | Color token |
| ---------------------------- | ---------------- | ---------------- |
| `.bx--btn--danger--tertiary` | text color | `$danger-02` |
| `.bx--btn__icon` | svg | `$danger-02` |
| `.bx--btn--danger--tertiary` | border | `$danger-02` |
| `:hover` | background-color | `$hover-danger` |
| `:hover` | text color | `$text-04` |
| `:hover` | svg | `$icon-03` |
| `:active` | background-color | `$active-danger` |
| `:active` | text color | `$text-04` |
| `:active` | svg | `$icon-03` |
| `.bx--btn--danger--tertiary` | text color | `$button-danger-secondary` |
| `.bx--btn__icon` | svg | `$button-danger-secondary` |
| `.bx--btn--danger--tertiary` | border | `$button-danger-secondary` |
| `:hover` | background-color | `$button-danger-hover` |
| `:hover` | text color | `$text-on-color` |
| `:hover` | svg | `$icon-on-color` |
| `:active` | background-color | `$button-danger-active` |
| `:active` | text color | `$text-on-color` |
| `:active` | svg | `$icon-on-color` |
| `:focus` | border | `$focus` |
| `:focus` | inset | `$ui-background` |
| `:disabled` | background-color | `$disabled-02` |
| `:disabled` | text color | `$disabled-03` |
| `:disabled` | svg | `$disabled-03` |
| `:focus` | inset | `$focus-inset` |
| `:disabled` | background-color | `$button-disabled` |
| `:disabled` | text color | `$text-on-color-disabled` |
| `:disabled` | svg | `$icon-on-color-disabled` |

<Row>
<Column colLg={8}>
Expand All @@ -160,19 +160,19 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

| Class | Property | Color token |
| ------------------------- | ---------------- | ---------------- |
| `.bx--btn--danger--ghost` | text color | `$danger-02` |
| `.bx--btn__icon` | svg | `$danger-02` |
| `:hover` | background-color | `$hover-danger` |
| `:hover` | text color | `$text-04` |
| `:hover` | svg | `$icon-03` |
| `:active` | background-color | `$active-danger` |
| `:active` | text color | `$text-04` |
| `:active` | svg | `$icon-03` |
| `.bx--btn--danger--ghost` | text color | `$button-danger-secondary` |
| `.bx--btn__icon` | svg | `$button-danger-secondary` |
| `:hover` | background-color | `$button-danger-hover` |
| `:hover` | text color | `$text-on-color` |
| `:hover` | svg | `$icon-on-color` |
| `:active` | background-color | `$button-danger-active` |
| `:active` | text color | `$text-on-color` |
| `:active` | svg | `$icon-on-color` |
| `:focus` | border | `$focus` |
| `:focus` | inset | `$ui-background` |
| `:disabled` | background-color | `$disabled-02` |
| `:disabled` | text color | `$disabled-03` |
| `:disabled` | svg | `$disabled-03` |
| `:focus` | inset | `$focus-inset` |
| `:disabled` | background-color | `$button-disabled` |
| `:disabled` | text color | `$text-on-color-disabled` |
| `:disabled` | svg | `$icon-on-color-disabled` |

<Row>
<Column colLg={8}>
Expand Down

0 comments on commit cd319a6

Please sign in to comment.