Merge pull request #335 from MITLibraries/use-319

USE-319: Styling global alert towards our Banner component

Author: djanelle-mit

app/assets/stylesheets/partials/_global_alerts.scss

@@ -1,9 +1,23 @@
 .wrap-notices {
-  background-color: $blue-bright;
-  text-align: center;
+  background-color: $color-bg-information;
 
-  .title {
-    font-size: $fs-xlarge;
+  h1.title {
+    background-color: $color-bg-information;
+    color: $color-cyan-50;
+    font-size: $fs-large;
+    font-weight: $fw-semibold;
+    letter-spacing: 0.02em;
     line-height: 1.4;
+    text-shadow: none;
+
+    a {
+      color: $color-text-oncolor;
+      text-decoration-color: $color-cyan-500;
+      text-underline-offset: 0.5rem;  
+
+      &:hover {
+        text-decoration-color: $color-cyan-200;
+      }
+    }
   }
 }

app/assets/stylesheets/partials/_variables.scss

@@ -26,8 +26,13 @@ $color-red-600: #e50000;
 $color-yellow-500: #FFD700;
 
 // CYAN
+$color-cyan-25: #F0FCFF;
+$color-cyan-50: #E5F9FF;
+$color-cyan-200: #99E9FF;
 $color-cyan-500: #00C8FF;
 $color-cyan-700: #00A0CC;
+$color-cyan-800: #007899;
+$color-cyan-975: #00141A;
 
 // BLUE
 $color-blue-25: #F0F0FF;
@@ -57,6 +62,9 @@ $color-icon-primary: $color-gray-950;
 $color-icon-success: $color-green-800;
 $color-icon-danger: $color-red-500;
 
+// BACKGROUNDS
+$color-bg-information: $color-cyan-800;
+
 // BORDERS
 $color-border-default: $color-gray-400;
 
@@ -82,6 +90,7 @@ $heading-font: neue-haas-grotesk-display, "Helvetica Neue", Helvetica, Arial, sa
 // Font sizes, weights, and line heights
 // 1 rem is 10 px...
 $fs-base:      1.6rem; // Pentagram originally specified 1.4
+$fs-large:     1.8rem;
 $fs-xlarge:    2.4rem;
 $fs-xxlarge:   3.2rem;
 $fs-xxxlarge:  4.2rem; // unused by default