Add alert icons that respond to theme colors

uswds · Mar 5, 2021 · 1048f9f · 1048f9f
1 parent 6513d44
commit 1048f9f
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 12 deletions.
diff --git a/src/stylesheets/components/_alerts.scss b/src/stylesheets/components/_alerts.scss
@@ -1,3 +1,31 @@
+$alert-icon-optical-factor: calc(#{units($theme-alert-icon-size)} / 5);
+$alert-icon-optical-padding: calc(
+  #{units($theme-alert-padding-x)} + #{units($theme-alert-bar-width)} - #{$alert-icon-optical-factor}
+);
+
+@mixin add-alert-icon($name, $color) {
+  $this-icon-object: map-merge(
+    $icon-object,
+    (
+      "name": "usa-icons/#{$name}",
+      "color": $color,
+      "height": $theme-alert-icon-size,
+    )
+  );
+  &:after {
+    @include add-color-icon($this-icon-object, "base-lightest");
+    // Position centered in the alert
+    bottom: 0;
+    content: "";
+    display: block;
+    // bar + padding - optical spacing value
+    left: $alert-icon-optical-padding;
+    position: absolute;
+    height: auto;
+    top: 0;
+  }
+}
+
 // Alert variables ---------- //
 
 $alert-icons: (
@@ -8,13 +36,24 @@ $alert-icons: (
   emergency: "error",
 );
 
-$alert-padding-left: units($theme-alert-padding-x) +
-  units($theme-alert-bar-width);
+$icon-object: (
+  "name": "usa-icons/ICON_NAME",
+  "svg-height": 40,
+  "svg-width": 40,
+  "height": $theme-icon-image-size,
+  "color": "ink",
+);
+
+$alert-padding-left: units($theme-alert-bar-width);
 
 .usa-alert {
   @include typeset($theme-alert-font-family);
   @include border-box-sizing;
-  background-color: color("base-lightest");
+  @include set-text-and-bg(
+    "base-lightest",
+    $theme-alert-text-color,
+    $theme-alert-text-reverse-color
+  );
   background-position: $alert-padding-left units($theme-alert-padding-x - 1);
   background-repeat: no-repeat;
   background-size: units($theme-alert-icon-size);
@@ -29,7 +68,7 @@ $alert-padding-left: units($theme-alert-padding-x) +
   }
 
   // TODO: why is this not simply a border?
-  &::before {
+  &:before {
     background-color: color("base-light");
     content: "";
     height: 100%;
@@ -106,3 +145,18 @@ $alert-padding-left: units($theme-alert-padding-x) +
     margin-top: units(2);
   }
 }
+
+.usa-alert--emergency {
+  &:after {
+    // this one has no bar
+    left: calc(
+      #{units($theme-alert-padding-x)} - #{$alert-icon-optical-factor}
+    );
+  }
+  .usa-alert__body {
+    padding-left: calc(
+      (2 * #{units($theme-alert-padding-x)}) + #{units($theme-alert-icon-size)} -
+        (2 * #{$alert-icon-optical-factor}) - #{units($theme-alert-bar-width)}
+    );
+  }
+}
diff --git a/src/stylesheets/core/mixins/_alert-status-styles.scss b/src/stylesheets/core/mixins/_alert-status-styles.scss
@@ -2,14 +2,12 @@
   $bgcolor: if($name != "emergency", "#{$name}-lighter", $name);
   $banner-text-color-token: get-color-token-from-bg(
     $bgcolor,
-    $context: "Alert text"
+    $theme-alert-text-reverse-color,
+    $theme-alert-text-color,
+    $context: "Alert (#{$name})"
   );
-  $icon-path: if(
-    $banner-text-color-token == "ink",
-    "usa-icons/#{$icon}",
-    "alerts/#{$icon}-white"
-  );
-  @include add-background-svg($icon-path);
+
+  @include add-alert-icon($icon, $banner-text-color-token);
   background-color: color($bgcolor);
   color: color($banner-text-color-token);
 
@@ -18,7 +16,11 @@
   }
 
   .usa-alert__body {
-    padding-left: units($theme-alert-icon-size) + units($theme-alert-padding-x);
+    padding-left: calc(
+      #{$alert-icon-optical-padding} - #{units($theme-alert-bar-width)} + #{units(
+          $theme-alert-icon-size
+        )} + #{units($theme-alert-padding-x)} - #{$alert-icon-optical-factor}
+    );
   }
 
   .usa-link {