[fix] `<rh-tag>` color updates

[coreyvickery]

Description

This looks like a lot, but these are hopefully quick updates to the existing <rh-tag> component.

Figma file

---

Details

• There are 2 themes: Light and Dark

• There are 3 styles: Filled, Outlined, and Desaturated

• There are 2 sizes: Default and Compact

• There are 9 colors: Red, Red orange, Orange, Yellow, Green, Teal, Blue, Purple, Gray

• Every style, size, and color may include a decorative icon (sizes below)

• Every style, size, and color may have non-linked or linked text

---

Global values

Border

Border radius	Border width	Border width - hover
--rh-border-radius-pill	--rh-border-width-sm (1px)	--rh-border-width-md (2px)

Typography - Default size

Font family	Font weight	Font size	Line height	Text decoration - linked	Border radius	Border width - default	Border width - hover
--rh-font-family-body-text (Red Hat Text)	--rh-font-weight-body-text-regular (Regular)	--rh-font-size-body-text-sm (14px)	--rh-line-height-body-text (1.5)	Underlined	--rh-border-radius-pill	--rh-border-width-sm (1px)	--rh-border-width-md (2px)

Typography - Compact size

The only difference is a slightly smaller font size.

Font size
--rh-font-size-body-text-xs (12px)

Decorative icon size

Decorative icon size
--rh-size-icon-01 (16px)

Padding

Tag size	Left and right	Top and bottom	In between decorative icon and text
Default	--rh-space-md (8px)	--rh-space-xs (4px)	--rh-space-xs (4px)
Compact	--rh-space-md (8px)	0	--rh-space-xs (4px)

---

Color values

Light theme

Colors - Filled style

Light theme Filled style tags adhere to the following system.

For example, for the Red tag, the fill is red-10, the border is red-30, the decorative icon is red-50, and the text is red-70.

Tag color	Fill	Border	Decorative icon	Text
(color)	(color)-10	(color)-30	(color)-50	(color)-70

Colors - Outlined style

Light theme Outlined style tags adhere to the following system.

For example, for the Red tag, the fill is white, the border is gray-30, the decorative icon is red-50, and the text is red-60.

Tag color	Fill	Border	Decorative icon	Text
(color)	white	gray-30	(color)-50	(color)-60

Colors - Desaturated style

All light theme Desaturated style tags are the same.

For example, for all tag sizes and colors, there is no fill and the border, decorative icon, and text are all gray-95.

Tag color	Fill	Border	Decorative icon	Text
(color)	None	gray-95	gray-95	gray-95

Dark theme

Colors - Filled style

Dark theme Filled style tags adhere to the following system.

For example, for the Red tag, the fill is red-70, the border is red-50, the decorative icon is red-30, and the text is red-10.

Tag color	Fill	Border	Decorative icon	Text
(color)	(color)-70	(color)-50	(color)-30	(color)-10

Colors - Outlined style

Dark theme Outlined style tags adhere to the following system.

For example, for the Red tag, the fill is gray-95, the border is gray-50, the decorative icon is red-20, and the text is red-30.

Tag color	Fill	Border	Decorative icon	Text
(color)	gray-95	gray-50	(color)-20	(color)-30

Colors - Desaturated style

All dark theme Desaturated style tags are the same.

For example, for all tag sizes and colors, there is no fill and the border, decorative icon, and text are all white.

Tag color	Fill	Border	Decorative icon	Text
(color)	None	white	white	white

Acceptance Criteria

• [X] Design done
• [ ] Development done

Images

No response

Design file

https://www.figma.com/design/j7Rjo2W6PLloxOSXQOpll0/Red-Hat-Design-System-library?m=auto&node-id=66-869&t=i9ZSqa4sY7sIePqr-1

Other resources

No response

[bennypowers]

This will be a nice follow-on to #1792

[bennypowers]

are we deprecating the cyan colour and replacing it with teal? that's a breaking change

[coreyvickery]

@bennypowers Yes, the Brand team does not use it anymore either.

[bennypowers]

OK. I have some code for this on the elements theming branch. We'll deal with the deprecation by translating CYAN to teal