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); + } }