From ef73d25e468e1bca0585614fa7635c253e849c0b Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew.duthie@gsa.gov>
Date: Thu, 6 Jun 2024 15:24:41 -0400
Subject: [PATCH] Update default alert styles to replace "Other" variant

---
 CHANGELOG.md                                   |  5 +++++
 docs/_components/alerts.md                     |  4 ++--
 .../packages/usa-alert/src/_overrides.scss     | 18 ++++++------------
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3e24ab9d..8fee95f9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
 ## Unreleased
 
+### Improvements
+
+- Update styling for Default (previously "Other") Alert component variant, for greater distinction from other variants and consistency with U.S. Web Design System. ([#449](https://github.com/18F/identity-design-system/pull/449))
+  - It is no longer necessary to assign the `usa-alert--other` class to use these styles, and it can be safely removed. Existing code assigning `usa-alert--other` should continue to display the updated default styles as expected.
+
 ### Bug Fixes
 
 - Improve compatibility of badge icon styling for inner Icon component. ([#445](https://github.com/18F/identity-design-system/pull/445))
diff --git a/docs/_components/alerts.md b/docs/_components/alerts.md
index 4cbad420..630b165f 100644
--- a/docs/_components/alerts.md
+++ b/docs/_components/alerts.md
@@ -63,10 +63,10 @@ Visit the [USWDS Alerts component](https://designsystem.digital.gov/components/a
 {% endcapture %}
 {% include helpers/code-example.html code=example %}
 
-### Other
+### Default
 
 {% capture example %}
-<div class="usa-alert usa-alert--other">
+<div class="usa-alert">
   <div class="usa-alert__body">
     <p class="usa-alert__text">Banner text</p>
   </div>
diff --git a/src/scss/packages/usa-alert/src/_overrides.scss b/src/scss/packages/usa-alert/src/_overrides.scss
index eaa58d10..e04c29d4 100644
--- a/src/scss/packages/usa-alert/src/_overrides.scss
+++ b/src/scss/packages/usa-alert/src/_overrides.scss
@@ -10,22 +10,16 @@ $alerts: 'success', 'warning', 'error', 'info', 'emergency';
 
   .usa-alert__body {
     @include u-padding-x($theme-alert-padding-x); // See: https://github.com/uswds/uswds/issues/5252
-    padding-left: units($theme-alert-icon-size) + (1.5 * $alert-icon-optical-padding);
   }
 }
 
 @each $name in $alerts {
-  .usa-alert--#{$name} .usa-alert__body::before {
-    left: $alert-icon-optical-padding;
-    top: units($theme-alert-padding-y) + units(0.5);
-  }
-}
-
-.usa-alert--other {
-  background-color: color('primary-lighter');
-  border-left-color: color('primary-light');
+  .usa-alert--#{$name} .usa-alert__body {
+    padding-left: units($theme-alert-icon-size) + (1.5 * $alert-icon-optical-padding);
 
-  .usa-alert__body {
-    padding-left: units($theme-alert-padding-x);
+    &::before {
+      left: $alert-icon-optical-padding;
+      top: units($theme-alert-padding-y) + units(0.5);
+    }
   }
 }