.Synthesized

user-interviews · Nov 27, 2023 · 4470f34 · 4470f34
1 parent 5235434
commit 4470f34
Showing 1 changed file with 184 additions and 14 deletions.
diff --git a/src/Alert/Alert.scss b/src/Alert/Alert.scss
@@ -27,6 +27,169 @@
   }
 }
 
+.Synthesized {
+  .Alert {
+    display: grid;
+    grid-template-columns: 2rem auto auto 2rem;
+    grid-template-rows: auto auto;
+    grid-template-areas:
+      'icon content content close'
+      'icon action action close'
+      ;
+
+    @media (min-width: 450px) {
+      grid-template-areas:
+      'icon content action close'
+      'icon content action close'
+      ;
+    }
+
+    background-color: $synth-alert-bg-neutral;
+    border-radius: $ux-border-radius;
+    color: $synth-text-neutral;
+    margin-bottom: $ux-spacing-40;
+    padding: $ux-spacing-40;
+    position: relative;
+
+    &__icon {
+      grid-area: icon;
+    }
+
+    &__content {
+      grid-area: content;
+      margin-right: $ux-spacing-40;
+    }
+
+    &__action {
+      grid-area: action;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+
+      @media (min-width: 450px) {
+        justify-content: flex-end;
+      }
+    }
+
+    &__close {
+      grid-area: close;
+      display: flex;
+      align-items: flex-start;
+      justify-content: flex-end;
+    }
+
+    &__title {
+      @include synth-font-type-30--bold;
+      margin-bottom: 0.25rem;
+    }
+
+    &__message {
+      @include synth-font-type-30;
+      margin-bottom: 0;
+    }
+  }
+
+  .Alert-success {
+    border-left: 0.5rem solid $synth-accent-green;
+
+    .close {
+      @include close-action;
+    }
+
+    .primary-action {
+      @include primary-action;
+    }
+
+    .Alert__icon {
+      color: $synth-accent-green;
+
+      .fa-check {
+        color: $ux-gray-100;
+      }
+    }
+  }
+
+  .Alert-info {
+    border-left: 0.5rem solid $synth-hyperlink-color;
+
+    .close {
+      @include close-action;
+    }
+
+    .primary-action {
+      @include primary-action;
+    }
+
+    .Alert__icon {
+      color: $ux-blue-300;
+
+      .fa-info {
+        color: $ux-blue-600;
+      }
+    }
+  }
+
+  .Alert-announcement {
+    border-left: 0.5rem solid $synth-hyperlink-color;
+
+    .close {
+      @include close-action;
+    }
+
+    .primary-action {
+      @include primary-action;
+    }
+  }
+
+  .Alert-feature {
+    border: 2px solid $ux-teal-600;
+
+    .close {
+      @include close-action;
+    }
+
+    .primary-action {
+      @include primary-action;
+    }
+
+    .Alert__icon {
+      color: $ux-teal-600;
+    }
+  }
+
+  .Alert-warning {
+    border-left: 0.5rem solid $synth-warning-amber-alternate;
+
+    .close {
+      @include close-action;
+    }
+
+    .primary-action {
+      @include primary-action;
+    }
+
+    .Alert__icon {
+      color: $synth-warning-amber-alternate;
+    }
+  }
+
+  .Alert-error {
+    border-left: 0.5rem solid $ux-red-400;
+
+    .close {
+      @include close-action;
+    }
+
+    .primary-action {
+      @include primary-action;
+    }
+
+    .Alert__icon {
+      color: $ux-red;
+    }
+  }
+}
+
 .Alert {
   display: grid;
   grid-template-columns: 2rem auto auto 2rem;
@@ -43,9 +206,8 @@
     ;
   }
 
-  background-color: $synth-alert-bg-neutral;
+  font-weight: 500;
   border-radius: $ux-border-radius;
-  color: $synth-text-neutral;
   margin-bottom: $ux-spacing-40;
   padding: $ux-spacing-40;
   position: relative;
@@ -89,7 +251,9 @@
 }
 
 .Alert-success {
-  border-left: 0.5rem solid $synth-accent-green;
+  background-color: $ux-green-100;
+  color: $ux-green-800;
+  border-left: 0.5rem solid $ux-green-400;
 
   .close {
     @include close-action;
@@ -100,19 +264,21 @@
   }
 
   .Alert__icon {
-    color: $synth-accent-green;
+    color: $ux-green-400;
 
     .fa-check {
-      color: $ux-gray-100;
+      color: $ux-green-800;
     }
   }
 }
 
 .Alert-info {
-  border-left: 0.5rem solid $synth-hyperlink-color;
+  background-color: $ux-blue-100;
+  color: $ux-blue-800;
+  border-left: 0.5rem solid $ux-blue-300;
 
   .close {
-    @include close-action;
+    @include close-action($ux-blue-600, $ux-blue-800)
   }
 
   .primary-action {
@@ -129,7 +295,9 @@
 }
 
 .Alert-announcement {
-  border-left: 0.5rem solid $synth-hyperlink-color;
+  background-color: $ux-blue-100;
+  color: $ux-blue-700;
+  border-left: 0.5rem solid $ux-blue-300;
 
   .close {
     @include close-action;
@@ -141,6 +309,8 @@
 }
 
 .Alert-feature {
+  background-color: $ux-teal-100;
+  color: $ux-teal-800;
   border: 2px solid $ux-teal-600;
 
   .close {
@@ -150,14 +320,12 @@
   .primary-action {
     @include primary-action;
   }
-
-  .Alert__icon {
-    color: $ux-teal-600;
-  }
 }
 
 .Alert-warning {
-  border-left: 0.5rem solid $synth-warning-amber-alternate;
+  background-color: $ux-yellow-100;
+  color: $ux-yellow-900;
+  border-left: 0.5rem solid $ux-yellow-600;
 
   .close {
     @include close-action;
@@ -168,11 +336,13 @@
   }
 
   .Alert__icon {
-    color: $synth-warning-amber-alternate;
+    color: $ux-yellow-700;
   }
 }
 
 .Alert-error {
+  background-color: $ux-red-100;
+  color: $ux-red-800;
   border-left: 0.5rem solid $ux-red-400;
 
   .close {