Skip to content

Commit

Permalink
docs: v11 color token updates for tooltip (#2363)
Browse files Browse the repository at this point in the history 
This PR updates the color tokens on the Style tab for the accordion component.
Converted classnames to elements

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
  • Loading branch information
@aagonzales @kodiakhq
aagonzales and kodiakhq[bot] authored Jun 3, 2021
1 parent 62b09c8 commit aa240c7
Showing 1 changed file with 32 additions and 33 deletions.
65 changes: 32 additions & 33 deletions src/pages/components/tooltip/style.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,10 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

| Class | Property | Color token |
| ----------------------- | ---------------- | ------------- |
| `.bx--tooltip__label` | text color | `$text-02` |
| `.bx--tooltip__trigger` | svg | `$icon-01` |
| `.bx--tooltip--shown` | background-color | `$inverse-02` |
| `.bx--tooltip__caret` | background-color | `$inverse-02` |
| `p` | text color | `$inverse-01` |
| Label | text color | `$text-secondary` |
| Trigger icon | svg | `$icon-primary` |
| Container | background-color | `$background-inverse` |
| Text | color | `$text-inverse` |

<div className="image--fixed">

Expand All @@ -30,27 +29,27 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

| Class | Property | Color token |
| --------------------------- | ---------------- | ------------- |
| `.bx--tooltip__trigger svg` | background-color | `$inverse-02` |
| `.bx--tooltip--icon` | background-color | `$inverse-02` |
| `p` | text color | `$inverse-01` |
| Trigger icon | background-color | `$icon-primary` |
| Container | background-color | `$background-inverse` |
| Text | color | `$text-inverse` |

### Definition tooltip

| Class | Property | Color token |
| -------------------------- | ---------------- | ----------------- |
| `.bx--tooltip__label` | text color | `$text-02` |
| `.bx--tooltip__trigger` | border-bottom | `$interactive-04` |
| `.bx--tooltip--definition` | background-color | `$inverse-02` |
| `p` | text color | `$inverse-01` |
| Label | color | `$text-secondary` |
| Dotted underline | border-bottom | `$interactive` |
| Container | background-color | `$background-inverse` |
| Text | color | `$text-inverse` |

## Typography

Tooltip labels and text should be set in sentence case.

| Property | Font-size (px/rem) | Font-weight | Type token |
| --------------------- | ------------------ | ------------- | ---------------- |
| `.bx--tooltip__label` | 12 / 0.75 | Regular / 400 | `$label-01` |
| `p` | 14 / 0.875 | Regular / 400 | `$body-short-01` |
| Label | 12 / 0.75 | Regular / 400 | `$label-01` |
| Body copy | 14 / 0.875 | Regular / 400 | `$body-short-01` |

## Structure

Expand All @@ -59,13 +58,13 @@ contain.

### Interactive tooltip

| Class | Property | px / rem | Spacing token |
| Element | Property | px / rem | Spacing token |
| --------------------------- | ------------- | -------- | ------------- |
| `.bx--tooltip` | max-width | 240 / 15 | – |
| `.bx--tooltip__trigger svg` | height, width | 16 / 1 | – |
| `.bx--tooltip__trigger` | margin-left | 8 / 0.5 | `$spacing-03` |
| `.bx--tooltip--shown` | padding | 16 / 1 | `$spacing-05` |
| `.bx--tooltip` | margin-top | 8 / 0.5 | `$spacing-03` |
| Container | max-width | 240 / 15 | – |
| | padding | 16 / 1 | `$spacing-05` |
| | margin-top | 8 / 0.5 | `$spacing-03` |
| Trigger icon | height, width | 16 / 1 | – |
| | margin-left | 8 / 0.5 | `$spacing-03` |

<div className="image--fixed">

Expand All @@ -79,13 +78,13 @@ contain.

### Definition tooltip

| Class | Property | px / rem | Spacing token |
| ------------------------------------------------------------------------ | --------------------------- | -------- | ------------- |
| `.bx--tooltip--definition__bottom` <br/> `.bx--tooltip--definition__top` | max-width | 176 / 11 | – |
| `.bx--tooltip--definition__bottom` <br/> `.bx--tooltip--definition__top` | padding-top, padding bottom | 8 / 0.5 | `$spacing-03` |
| `.bx--tooltip--definition__bottom` <br/> `.bx--tooltip--definition__top` | padding-left, padding-right | 16 / 1 | `$spacing-05` |
| `.bx--tooltip__trigger` | border-bottom | 1px | – |
| `.bx--tooltip__caret` | margin-top | 4px | `$spacing-02` |
| Class | Property | px / rem | Spacing token |
| ------------ | --------------------------- | -------- | ------------- |
| Container | max-width | 176 / 11 | – |
| | padding-top, padding bottom | 8 / 0.5 | `$spacing-03` |
| | padding-left, padding-right | 16 / 1 | `$spacing-05` |
| Underline | border-bottom | 1px | – |
| Caret | margin-top | 4px | `$spacing-02` |

<div className="image--fixed">

Expand All @@ -99,12 +98,12 @@ contain.

### Icon tooltip

| Class | Property | px / rem | Spacing token |
| -------------------------------------------------------------------------- | --------------------------- | --------- | ------------- |
| `.bx--tooltip--icon__top:before` <br/> `.bx--tooltip--icon__bottom:before` | max-width | 176 / 11 | – |
| `.bx--tooltip--icon__top:before` <br/> `.bx--tooltip--icon__bottom:before` | padding-left, padding-right | 16 / 1 | `$spacing-05` |
| `.bx--tooltip--icon__top:before` <br/> `.bx--tooltip--icon__bottom:before` | padding-top, padding-bottom | 2 / 0.125 | `$spacing-01` |
| `.bx--tooltip__caret` | margin-top | 8 / 0.5 | `$spacing-03` |
| Class | Property | px / rem | Spacing token |
| ---------- | --------------------------- | --------- | ------------- |
| Container | max-width | 176 / 11 | – |
| | padding-left, padding-right | 16 / 1 | `$spacing-05` |
| | padding-top, padding-bottom | 2 / 0.125 | `$spacing-01` |
| Caret | margin-top | 8 / 0.5 | `$spacing-03` |

<div className="image--fixed">

Expand Down

0 comments on commit aa240c7

Please sign in to comment.