From 6e1688a714ea9e4a838250a488119ec4d8e32293 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Tue, 26 Nov 2024 15:48:32 -0500
Subject: [PATCH] fix(kalert): slotted links default styling [KHCP-14152]

---
 sandbox/pages/SandboxAlert.vue   | 44 ++++++++++++++++++++++++++------
 src/components/KAlert/KAlert.vue | 16 ++++++++++--
 2 files changed, 50 insertions(+), 10 deletions(-)

diff --git a/sandbox/pages/SandboxAlert.vue b/sandbox/pages/SandboxAlert.vue
index 38a00cb5a2..606150761a 100644
--- a/sandbox/pages/SandboxAlert.vue
+++ b/sandbox/pages/SandboxAlert.vue
@@ -18,24 +18,52 @@
       <SandboxSectionComponent title="appearance">
         <KAlert
           appearance="info"
-          message="This is info alert."
           title="Info"
-        />
+        >
+          This is info alert.
+          <a
+            href="https://kongponents.konghq.com/components/alert.html"
+            target="_blank"
+          >
+            Link
+          </a>
+        </KAlert>
         <KAlert
           appearance="success"
-          message="This is success alert."
           title="Success"
-        />
+        >
+          This is success alert.
+          <a
+            href="https://kongponents.konghq.com/components/alert.html"
+            target="_blank"
+          >
+            Link
+          </a>
+        </KAlert>
         <KAlert
           appearance="warning"
-          message="This is warning alert."
           title="Warning"
-        />
+        >
+          This is warning alert.
+          <a
+            href="https://kongponents.konghq.com/components/alert.html"
+            target="_blank"
+          >
+            Link
+          </a>
+        </KAlert>
         <KAlert
           appearance="danger"
-          message="This is danger alert."
           title="Danger"
-        />
+        >
+          This is danger alert.
+          <a
+            href="https://kongponents.konghq.com/components/alert.html"
+            target="_blank"
+          >
+            Link
+          </a>
+        </KAlert>
       </SandboxSectionComponent>
       <SandboxSectionComponent title="showIcon">
         <KAlert
diff --git a/src/components/KAlert/KAlert.vue b/src/components/KAlert/KAlert.vue
index 1278a26b12..524849d043 100644
--- a/src/components/KAlert/KAlert.vue
+++ b/src/components/KAlert/KAlert.vue
@@ -105,14 +105,26 @@ const getAlertIcon = computed((): AlertIcon => {
 @mixin kAlertAppearance(
   $backgroundColor: var(--kui-color-background-primary-weakest, $kui-color-background-primary-weakest),
   $textColor: var(--kui-color-text-primary, $kui-color-text-primary),
-  $dismissIconHoverColor: var(--kui-color-text-primary-strong, $kui-color-text-primary-strong)) {
+  $hoverColor: var(--kui-color-text-primary-strong, $kui-color-text-primary-strong)) {
   background-color: $backgroundColor;
   color: $textColor;
 
   .alert-dismiss-icon {
     &:hover,
     &:focus {
-      color: $dismissIconHoverColor !important;
+      color: $hoverColor !important;
+    }
+  }
+
+  .alert-content {
+    .alert-message {
+      :slotted(a) {
+        color: $textColor;
+
+        &:hover {
+          color: $hoverColor;
+        }
+      }
     }
   }
 }