fix(notification): change box-shadow to border for toast

carbon-design-system · Oct 11, 2019 · 672d7cd · 672d7cd
1 parent 65f1dad
commit 672d7cd
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 9 deletions.
diff --git a/packages/components/src/components/notification/_inline-notification.scss b/packages/components/src/components/notification/_inline-notification.scss
@@ -55,10 +55,14 @@
     &::before {
       content: '';
       position: absolute;
+      top: 0;
+      left: 0;
       width: 100%;
       height: 100%;
       box-sizing: border-box;
       filter: opacity(0.4);
+      border-style: solid;
+      border-width: 1px 1px 1px 0;
     }
   }
 
@@ -73,8 +77,7 @@
     );
 
     &:before {
-      border: solid $support-01 1px;
-      border-left-width: 0;
+      border-color: $support-01;
     }
   }
 
@@ -89,8 +92,7 @@
     );
 
     &:before {
-      border: solid $support-02 1px;
-      border-left-width: 0;
+      border-color: $support-02;
     }
   }
 
@@ -105,8 +107,7 @@
     );
 
     &:before {
-      border: solid $support-04 1px;
-      border-left-width: 0;
+      border-color: $support-04;
     }
   }
 
@@ -125,8 +126,7 @@
     );
 
     &:before {
-      border: solid $support-03 1px;
-      border-left-width: 0;
+      border-color: $support-03;
     }
   }
 

diff --git a/packages/components/src/components/notification/_toast-notification.scss b/packages/components/src/components/notification/_toast-notification.scss
@@ -33,6 +33,7 @@
     margin-bottom: $carbon--spacing-03;
     margin-right: $carbon--spacing-05;
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
+    position: relative;
 
     &:first-child {
       margin-top: $carbon--spacing-05;
@@ -44,7 +45,22 @@
   }
 
   .#{$prefix}--toast-notification--low-contrast {
-    color: $text-01;
+    // Stop-gap to ensure color contrast (vs. fixed background color) until we have component-specific theme tokens
+    color: map-get($carbon--theme--white, 'text-01');
+    box-shadow: none;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      filter: opacity(0.4);
+      border-style: solid;
+      border-width: 1px 1px 1px 0;
+    }
   }
 
   .#{$prefix}--toast-notification--error {
@@ -56,6 +72,10 @@
       $support-01,
       $notification-error-background-color
     );
+
+    &:before {
+      border-color: $support-01;
+    }
   }
 
   .#{$prefix}--toast-notification--success {
@@ -67,6 +87,10 @@
       $support-02,
       $notification-success-background-color
     );
+
+    &:before {
+      border-color: $support-02;
+    }
   }
 
   .#{$prefix}--toast-notification--info {
@@ -78,6 +102,10 @@
       $support-04,
       $notification-info-background-color
     );
+
+    &:before {
+      border-color: $support-04;
+    }
   }
 
   .#{$prefix}--toast-notification--warning {
@@ -89,6 +117,10 @@
       $support-03,
       $notification-warning-background-color
     );
+
+    &:before {
+      border-color: $support-03;
+    }
   }
 
   .#{$prefix}--toast-notification--warning