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

[coreyvickery]

Describe the bug

Updates to the existing component.

Figma file

---

Details

Neutral

Inline

Toast

Info

Inline

Toast

Success

Inline

Toast

Warning

Inline

Toast

Caution

Inline

Toast

Danger

Inline

Toast

---

Global values

Border

Alert variant	Border width	Border position
Inline	--rh-border-width-md (2px)	Top only
Inline	--rh-border-width-md (2px)	All sides
Toast	--rh-border-width-md (2px)	Top only

Typography - title text

Font family	Font weight	Font size	Line height
--rh-font-family-body-text (Red Hat Text)	--rh-font-weight-body-text-medium (Medium)	--rh-font-size-body-text-sm (14px)	--rh-line-height-body-text (1.5)

Typography - body text

Font family	Font weight	Font size	Line height
--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)

---

Color values

Status	Background	Border and icon	Title and body text
Neutral	gray-10	gray-60	gray-95
Info	purple-10	purple-50	gray-95
Success	green-10	green-60	gray-95
Warning	yellow-10	yellow-40	gray-95
Caution	orange-10	orange-50	gray-95
Danger	red-orange-10	red-orange-60	gray-95

Icon values

Referencing this page for names.

Status	Icon name
Neutral	minus-circle-fill
Info	information-fill
Success	check-circle-fill
Warning	warning-fill
Caution	error-fill
Danger	ban-fill
Close	close

Drop shadow values

Alert variant	Value
Inline	None
Toast	--rh-box-shadow-xl

Spacing values

Screenshots

No response

Steps to reproduce

1. Go to the Demos page
2. Look at the colors and styles

Expected behaviour

Styles are expected to match what's in Figma.

Element HTML

No response

Operating System (OS)

iOS, macOS, Linux, Windows

Browser

No response

Additional browser or assistive technology info

No response

[bennypowers]

@coreyvickery please clarify: does this mean rh-alert should not use the DPO status tokens?