fix(alerts): app level links to use specification colors (#1632)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [x] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?
Links in app level alerts have default link colors.

Issue Number: CDE-2467

## What is the new behavior?
Links in app level alerts follow the alert color specification.

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

---------

Co-authored-by: GitHub <[email protected]>

.storybook/stories/alert/app-level-alert.stories.ts

@@ -79,7 +79,13 @@ const template = `
     (clrAlertClosedChange)="clrAlertClosedChange($event)"
   >
     <clr-alert-item *ngFor="let _ of createArray(itemCount); let i = index">
-      <span class="alert-text">{{ content }} {{ i + 1 }}</span>
+      <span class="alert-text">
+        {{ content }} {{ i + 1 }}
+        <a href="javascript://">
+          <cds-icon shape="user"></cds-icon>
+          Reset to green
+        </a>
+      </span>
       <div *ngIf="showActions" class="alert-actions">
         <button class="btn alert-action">Fix</button>
         <button class="btn alert-action">Ignore</button>
@@ -122,7 +128,7 @@ const PaginatedTemplate: StoryFn = args => ({
   template: `
     <clr-alerts [clrCurrentAlertIndex]="clrCurrentAlertIndex">
       <clr-alert
-        *ngFor="let alert of ALERT_TYPES"
+        *ngFor="let alert of ALERT_TYPES; let i = index"
         [clrAlertAppLevel]="true"
         [clrAlertClosable]="clrAlertClosable"
         [clrAlertIcon]="clrAlertIcon"
@@ -131,7 +137,17 @@ const PaginatedTemplate: StoryFn = args => ({
         (clrAlertClosedChange)="clrAlertClosedChange($event)"
       >
         <clr-alert-item>
-          <span class="alert-text">{{ content }} {{ alert }}</span>
+          <span class="alert-text">
+            {{ content }} {{ i + 1 }}
+            <a href="javascript://">
+              <cds-icon shape="user"></cds-icon>
+              Reset to green
+            </a>
+          </span>
+          <div *ngIf="showActions" class="alert-actions">
+            <button class="btn alert-action">Fix</button>
+            <button class="btn alert-action">Ignore</button>
+          </div>
         </clr-alert-item>
       </clr-alert>
     </clr-alerts>
@@ -160,6 +176,16 @@ export const Paginated: StoryObj = {
   },
 };
 
+export const PaginatedWithActions: StoryObj = {
+  render: PaginatedTemplate,
+  argTypes: paginatedArgTypes,
+  args: {
+    ...paginatedArgs,
+    clrAlertClosable: false,
+    showActions: true,
+  },
+};
+
 export const PaginatedClosable: StoryObj = {
   render: PaginatedTemplate,
   argTypes: paginatedArgTypes,

projects/angular/src/emphasis/alert/_alert.clarity.scss

@@ -19,8 +19,13 @@
   background: alert-variables.getAlertColor($alertType, bg-color);
   color: alert-variables.getAlertColor($alertType, color);
 
-  & a {
+  & .alert-items .alert-item a {
     color: alert-variables.getAlertColor($alertType, color);
+
+    cds-icon,
+    clr-icon {
+      fill: alert-variables.getAlertColor($alertType, color);
+    }
   }
 
   $border-prop: alert-variables.getAlertColor($alertType, border-color);
@@ -362,11 +367,6 @@
     .close {
       margin: var(--cds-global-space-4) 0;
     }
-
-    .alert-action,
-    .dropdown-toggle {
-      text-decoration: none;
-    }
   }
 
   .alert-sm {