From 3b5b4ebf991d5a85a419e5dfd02e3d9a3ff8d9bb Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Thu, 25 Apr 2024 13:36:49 -0400 Subject: [PATCH 1/2] Update alert styling to improve contrast --- CHANGELOG.md | 6 ++++++ src/img/alerts/info.svg | 1 - src/img/alerts/warning.svg | 1 - src/scss/packages/_uswds-core.scss | 1 - .../packages/usa-alert/src/_overrides.scss | 19 +++++-------------- 5 files changed, 11 insertions(+), 17 deletions(-) delete mode 100644 src/img/alerts/info.svg delete mode 100644 src/img/alerts/warning.svg 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..ff17c85f 100644 --- a/src/scss/packages/usa-alert/src/_overrides.scss +++ b/src/scss/packages/usa-alert/src/_overrides.scss @@ -10,27 +10,18 @@ $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'); } From 37a3caa7521dc2bb2c2865a58a9cc1b5570410c5 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Thu, 25 Apr 2024 13:40:35 -0400 Subject: [PATCH 2/2] Remove padding for other alert variant --- src/scss/packages/usa-alert/src/_overrides.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/scss/packages/usa-alert/src/_overrides.scss b/src/scss/packages/usa-alert/src/_overrides.scss index ff17c85f..eaa58d10 100644 --- a/src/scss/packages/usa-alert/src/_overrides.scss +++ b/src/scss/packages/usa-alert/src/_overrides.scss @@ -24,4 +24,8 @@ $alerts: 'success', 'warning', 'error', 'info', 'emergency'; .usa-alert--other { background-color: color('primary-lighter'); border-left-color: color('primary-light'); + + .usa-alert__body { + padding-left: units($theme-alert-padding-x); + } }