fix(alert): app level action buttons hover and active colors (#1495)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] 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?
States `:hover` and `:click` background and text colors are wrong.
Regression is added with #1445

Issue Number: CDE-2211

## What is the new behavior?
App level action button states `:hover` and `:click` background and text
colors are using respective outline button colors.

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

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

@@ -1,6 +1,6 @@
 /*
  * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries. 
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -306,22 +306,42 @@
 
  &.alert-info {
  @include generateAlertType(app-info);
+
+ .alert-item .btn {
+ @extend .btn-info-outline;
+ }
  }
 
  &.alert-danger {
  @include generateAlertType(app-danger);
+
+ .alert-item .btn {
+ @extend .btn-danger-outline;
+ }
  }
 
  &.alert-neutral {
  @include generateAlertType(app-neutral);
+
+ .alert-item .btn {
+ @extend .btn-neutral-outline;
+ }
  }
 
  &.alert-warning {
  @include generateAlertType(app-warning);
+
+ .alert-item .btn {
+ @extend .btn-warning-outline;
+ }
  }
 
  &.alert-success {
  @include generateAlertType(app-success);
+
+ .alert-item .btn {
+ @extend .btn-success-outline;
+ }
  }
 
  .alert-items {

projects/angular/src/emphasis/alert/_variables.alert.scss

@@ -1,6 +1,6 @@
 /*
  * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries. 
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -517,10 +517,10 @@ $clr-app-alert-neutral: (
  icon-color: var(--clr-app-alert-neutral-icon-color),
  color: var(--clr-app-alert-neutral-font-color),
  border-color: var(--clr-app-alert-neutral-border-color),
- close-icon-color: var(--clr-app-alert-neutral-close-icon-color),
- action-color: var(--clr-app-alert-neutral-action-color),
- action-active-color: var(--clr-app-alert-neutral-action-active-color),
- close-icon-hover-color: var(--clr-app-alert-neutral-close-icon-hover-color),
+ close-icon: var(--clr-app-alert-neutral-close-icon-color),
+ action: var(--clr-app-alert-neutral-action-color),
+ action-active: var(--clr-app-alert-neutral-action-active-color),
+ close-icon-hover: var(--clr-app-alert-neutral-close-icon-hover-color),
 ) !default;
 
 @function lookupAppNeutralAlertColor($property: color) {