docs: v11 color token updates for tag (carbon-design-system#2346)

- This PR updates the color tokens on the Style tab for the tag component.
- Add tag component level tokens 
- Converted `classnames` to normal element names.

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

src/pages/components/tag/style.mdx

@@ -12,27 +12,54 @@ Using the IBM Design Language
 [color palette](https://www.ibm.com/design/language/elements/color), the tag
 text color should be 5 steps away from the tag background color
 
+| Tag color  | Color token          | 
+| ---------- | -------------------- | 
+| Default        | `$tag-background-gray` |
+|            | `$tag-color-gray`      |
+| Red        | `$tag-background-red` |
+|            | `$tag-color-red`      |
+| Magenta        | `$tag-background-magenta` |
+|            | `$tag-color-magenta`      |
+| Purple        | `$tag-background-purple` |
+|            | `$tag-color-purple`      |
+| Blue        | `$tag-background-blue` |
+|            | `$tag-color-blue`      |
+| Cyan        | `$tag-background-cyan` |
+|            | `$tag-color-cyan`      |
+| Teal        | `$tag-background-teal` |
+|            | `$tag-color-teal`      |
+| Green        | `$tag-background-green` |
+|            | `$tag-color-green`      |
+| Gray        | `$tag-background-gray` |
+|            | `$tag-color-gray`      |
+| Cool gray        | `$tag-background-cool-gray` |
+|            | `$tag-color-cool-gray`      |
+| Warm gray        | `$tag-background-warm-gray` |
+|            | `$tag-color-warm-gray`      |
+| High contrast        | `$background-inverse` |
+|            | `$text-inverse`      |
+
 ## Typography
 
 Tag text should be set in sentence case, and should only have one word. However,
 if more than one is necessary, then connect the words using a hyphen with no
 spaces.
 
-| Property   | Font-size (px/rem) | Font-weight   | Type token  |
+| Element    | Font-size (px/rem) | Font-weight   | Type token  |
 | ---------- | ------------------ | ------------- | ----------- |
-| `.bx--tag` | 12 / 0.75          | Regular / 400 | `$label-01` |
+| Label      | 12 / 0.75          | Regular / 400 | `$label-01` |
 
 ## Structure
 
 All tags have the same height. However, the width of tags varies based on the
 amount of content. All four corners of a tag are rounded with a 24px radius.
 
-| Class      | Property                    | px / rem | Spacing token |
+| Element    | Property                    | px / rem | Spacing token |
 | ---------- | --------------------------- | -------- | ------------- |
-| `.bx--tag` | height                      | 24 / 1.5 | –             |
-| `.bx--tag` | radius                      | 24px     | –             |
-| `.bx--tag` | margin                      | 8 / 0.5  | `$spacing-03` |
-| `.bx--tag` | padding-left, padding-right | 8 / 0.5  | `$spacing-03` |
+| Tag        | height                      | 24 / 1.5 | –             |
+|            | radius                      | 24px     | –             |
+|            | margin                      | 8 / 0.5  | `$spacing-03` |
+|            | padding-left, padding-right | 8 / 0.5  | `$spacing-03` |
 
 <div className="image--fixed">