diff --git a/src/pages/components/tag/style.mdx b/src/pages/components/tag/style.mdx index 569661e6ee1..64ad7acf6f9 100755 --- a/src/pages/components/tag/style.mdx +++ b/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` |