From aa240c7dde145675c8a8522fe877f51db86fdfae Mon Sep 17 00:00:00 2001
From: Anna Gonzales <anna.gonzales3@gmail.com>
Date: Wed, 2 Jun 2021 19:39:34 -0500
Subject: [PATCH] docs: v11 color token updates for tooltip (#2363)

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>
---
 src/pages/components/tooltip/style.mdx | 65 +++++++++++++-------------
 1 file changed, 32 insertions(+), 33 deletions(-)

diff --git a/src/pages/components/tooltip/style.mdx b/src/pages/components/tooltip/style.mdx
index bf0a329964e..e5dc01cff77 100755
--- a/src/pages/components/tooltip/style.mdx
+++ b/src/pages/components/tooltip/style.mdx
@@ -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">
 
@@ -30,18 +29,18 @@ 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
 
@@ -49,8 +48,8 @@ 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
 
@@ -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">
 
@@ -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">
 
@@ -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">