From c395549f1f88299bde658310ba9430987850f950 Mon Sep 17 00:00:00 2001
From: marionnegp <mapatel@redhat.com>
Date: Thu, 11 Apr 2024 11:35:37 -0400
Subject: [PATCH 1/4] feat: define color of body copy

---
 elements/rh-alert/rh-alert.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/elements/rh-alert/rh-alert.css b/elements/rh-alert/rh-alert.css
index 296e667758..6cab4d35bd 100644
--- a/elements/rh-alert/rh-alert.css
+++ b/elements/rh-alert/rh-alert.css
@@ -93,6 +93,7 @@ header ::slotted(:is(h1,h2,h3,h4,h5,h6)) {
 
 #description {
   font-size: var(--rh-font-size-body-text-sm, 0.875rem);
+  color: var(--rh-color-text-primary-on-light, #151515);
 }
 
 #description > ::slotted(*) {

From 61f7caa1f2bfd26eb95cadec53e87535c7d7a4a6 Mon Sep 17 00:00:00 2001
From: marionnegp <mapatel@redhat.com>
Date: Thu, 11 Apr 2024 13:48:10 -0400
Subject: [PATCH 2/4] feat: use rh-surface to wrap alert

---
 elements/rh-alert/rh-alert.css | 1 -
 elements/rh-alert/rh-alert.ts  | 7 ++++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/elements/rh-alert/rh-alert.css b/elements/rh-alert/rh-alert.css
index 6cab4d35bd..296e667758 100644
--- a/elements/rh-alert/rh-alert.css
+++ b/elements/rh-alert/rh-alert.css
@@ -93,7 +93,6 @@ header ::slotted(:is(h1,h2,h3,h4,h5,h6)) {
 
 #description {
   font-size: var(--rh-font-size-body-text-sm, 0.875rem);
-  color: var(--rh-color-text-primary-on-light, #151515);
 }
 
 #description > ::slotted(*) {
diff --git a/elements/rh-alert/rh-alert.ts b/elements/rh-alert/rh-alert.ts
index 8707351fbf..cf4ccda493 100644
--- a/elements/rh-alert/rh-alert.ts
+++ b/elements/rh-alert/rh-alert.ts
@@ -117,10 +117,11 @@ export class RhAlert extends LitElement {
     const hasActions = this.#slots.hasSlotted('actions');
     const hasBody = this.#slots.hasSlotted(SlotController.anonymous as unknown as string);
     return html`
-      <div id="container"
+      <rh-surface id="container"
            class="${classMap({ hasBody })}"
            role="alert"
-           aria-hidden="false">
+           aria-hidden="false"
+           color-palette="lightest">
         <div id="left-column">
           <div id="icon">${this.icon}</div>
         </div>
@@ -143,7 +144,7 @@ export class RhAlert extends LitElement {
             <slot name="actions"></slot>
           </footer>
         </div>
-      </div>
+      </rh-surface>
     `;
   }
 }

From 997e77303b7e993f4c04fd956c69ae68c06c7246 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benny=20Powers=20-=20=D7=A2=D7=9D=20=D7=99=D7=A9=D7=A8?=
 =?UTF-8?q?=D7=90=D7=9C=20=D7=97=D7=99!?=
 <bennypowers@users.noreply.github.com>
Date: Thu, 18 Apr 2024 16:06:00 +0300
Subject: [PATCH 3/4] docs: add changeset

---
 .changeset/new-grapes-hope.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/new-grapes-hope.md

diff --git a/.changeset/new-grapes-hope.md b/.changeset/new-grapes-hope.md
new file mode 100644
index 0000000000..0cf7a21052
--- /dev/null
+++ b/.changeset/new-grapes-hope.md
@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-alert>`: make sure alerts always have to correct (lightest) colour palette

From 832684e5c75a4f4f21ee36394228d10d5dbde282 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Thu, 18 Apr 2024 17:43:14 +0300
Subject: [PATCH 4/4] fix(alert): make sure surface is available

---
 elements/rh-alert/rh-alert.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/elements/rh-alert/rh-alert.ts b/elements/rh-alert/rh-alert.ts
index 708bf5be7c..07d193881e 100644
--- a/elements/rh-alert/rh-alert.ts
+++ b/elements/rh-alert/rh-alert.ts
@@ -5,6 +5,8 @@ import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
 
+import '@rhds/elements/rh-surface/rh-surface.js';
+
 import styles from './rh-alert.css';
 
 // TODO: replace with rh-icon