diff --git a/CHANGELOG.md b/CHANGELOG.md
index 92fcf02f..f3fe1857 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## Unreleased
+
+### Improvements
+
+- Update styling for Alert component for increased contrast and consistency with U.S. Web Design System. ([#439](https://github.com/18F/identity-design-system/pull/439))
+
## 9.1.0
### New Features
diff --git a/src/img/alerts/info.svg b/src/img/alerts/info.svg
deleted file mode 100644
index 1e5440a5..00000000
--- a/src/img/alerts/info.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/img/alerts/warning.svg b/src/img/alerts/warning.svg
deleted file mode 100644
index ebd1efd0..00000000
--- a/src/img/alerts/warning.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/scss/packages/_uswds-core.scss b/src/scss/packages/_uswds-core.scss
index e0fab91f..4241dfa7 100644
--- a/src/scss/packages/_uswds-core.scss
+++ b/src/scss/packages/_uswds-core.scss
@@ -142,7 +142,6 @@ $site-palette: (
$theme-accordion-border-width: '1px' !default,
$theme-accordion-border-color: 'primary-light' !default,
// Alert
- $theme-alert-bar-width: 0 !default,
$theme-alert-icon-size: 2 !default,
$theme-alert-padding-x: 2 !default,
$theme-alert-padding-y: 1.5 !default,
diff --git a/src/scss/packages/usa-alert/src/_overrides.scss b/src/scss/packages/usa-alert/src/_overrides.scss
index e5b04475..eaa58d10 100644
--- a/src/scss/packages/usa-alert/src/_overrides.scss
+++ b/src/scss/packages/usa-alert/src/_overrides.scss
@@ -10,27 +10,22 @@ $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
-
- &::before {
- background-color: transparent;
- background-position: center;
- mask: none;
- }
+ padding-left: units($theme-alert-icon-size) + (1.5 * $alert-icon-optical-padding);
}
}
@each $name in $alerts {
- .usa-alert--#{$name} .usa-alert__body {
- &::before {
- @include add-background-svg('alerts/#{$name}');
- left: $alert-icon-optical-padding;
- top: units($theme-alert-padding-y) + units(0.5);
- }
-
- padding-left: units($theme-alert-icon-size) + (1.5 * $alert-icon-optical-padding);
+ .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__body {
+ padding-left: units($theme-alert-padding-x);
+ }
}