Merge pull request #1587 from ASU/uds-1916

Uds 1916

Author: davidornelas11

packages/unity-bootstrap-theme/public/img/font-awesome-svg/search-gray-dark.svg

@@ -44,13 +44,22 @@ $uds-color-base-blue: #00a3e0; // ASU Blue
 $uds-color-base-bluefocus: #00baff; // A11y Focus Blue - used for highlighting the page element with current focus
 $uds-color-base-darkgold: #7f6227; // Visited state of ASU Gold
 $uds-color-base-darkmaroon: #440e22; // Visited state of ASU Maroon
-$uds-color-base-gray-1: #fafafa;
-$uds-color-base-gray-2: #e8e8e8;
-$uds-color-base-gray-3: #d0d0d0;
-$uds-color-base-gray-4: #bfbfbf;
-$uds-color-base-gray-5: #747474;
-$uds-color-base-gray-6: #484848;
-$uds-color-base-gray-7: #191919; // Base font color and default black level
+// Deprecated-start
+$uds-color-base-gray-1: #fafafa; // Deprecated use $asu-gray-7 instead.
+$uds-color-base-gray-2: #e8e8e8; // Deprecated use $asu-gray-6 instead.
+$uds-color-base-gray-3: #d0d0d0; // Deprecated use $asu-gray-5 instead.
+$uds-color-base-gray-4: #bfbfbf; // Deprecated use $asu-gray-4 instead.
+$uds-color-base-gray-5: #747474; // Deprecated use $asu-gray-3 instead.
+$uds-color-base-gray-6: #484848; // Deprecated use $asu-gray-2 instead.
+$uds-color-base-gray-7: #191919; // Deprecated use $asu-gray-1 instead.
+// Deprecated-end
+$asu-gray-1: #191919; // Brand guideline ASU Gray 1 - Base font color and default black level
+$asu-gray-2: #484848; // Brand guideline ASU Gray 2
+$asu-gray-3: #747474; // Brand guideline ASU Gray 3
+$asu-gray-4: #bfbfbf; // Brand guideline ASU Gray 4
+$asu-gray-5: #d0d0d0; // Brand guideline ASU Gray 5
+$asu-gray-6: #e8e8e8; // Brand guideline ASU Gray 6
+$asu-gray-7: #fafafa; // Brand guideline ASU Gray 7
 
 $uds-color-brand-gold: $uds-color-base-gold; // ASU Gold brand color
 $uds-color-brand-maroon: $uds-color-base-maroon; // ASU Maroon brand color
@@ -61,17 +70,17 @@ $uds-color-alerts-info: $uds-color-base-blue; // Information
 $uds-color-alerts-success: $uds-color-base-green; // Success
 
 $uds-color-background-white: $uds-color-base-white; // Background - White
-$uds-color-background-gray: $uds-color-base-gray-2; // Background - Gray
-$uds-color-background-dark: $uds-color-base-gray-7; // Background - Dark
+$uds-color-background-gray: $asu-gray-6; // Background - Gray
+$uds-color-background-dark: $asu-gray-1; // Background - Dark
 $uds-color-background-success: #e9f5db; // Background - Success
 $uds-color-background-error: #f7dddd; // Background - Error
 $uds-color-background-warning: #ffeade; // Background - Warning
 $uds-color-background-info: #d6f0fa; // Background - Information
 
-$uds-color-font-dark-base: $uds-color-base-gray-7; // Default text color on light background
+$uds-color-font-dark-base: $asu-gray-1; // Default text color on light background
 $uds-color-font-dark-error: #FF7B7D; // Error text on dark background
 $uds-color-font-dark-success: #446d12; // Success text on dark background
-$uds-color-font-light-base: $uds-color-base-gray-1; // Default text on dark background
+$uds-color-font-light-base: $asu-gray-7; // Default text on dark background
 $uds-color-font-light-link: $uds-color-base-gold; // Link text on dark background
 $uds-color-font-light-visited: $uds-color-base-darkgold; // Visited link text on dark background
 $uds-color-font-light-info: #00b0f3; // Information text on dark background

packages/unity-bootstrap-theme/public/img/font-awesome-svg/search-gray-darker.svg

@@ -58,7 +58,7 @@
 div[class='alert alert-block'] {
   /* Catch-all for default alert class */
   background-color: $uds-color-background-gray;
-  border-color: $uds-color-base-gray-3;
+  border-color: $asu-gray-5;
 }
 
 // Media Queries

packages/unity-bootstrap-theme/src/scss/_custom-asu-variables.scss

@@ -4,13 +4,13 @@
  */
 
 // Mapping for Design Tokens
-$ws2-gray-darkest: $uds-color-base-gray-7;
-$ws2-gray-darker: $uds-color-base-gray-6;
-$ws2-gray-dark: $uds-color-base-gray-5;
-$ws2-gray: $uds-color-base-gray-4;
-$ws2-gray-light: $uds-color-base-gray-3;
-$ws2-gray-lighter: $uds-color-base-gray-2;
-$ws2-gray-lightest: $uds-color-base-gray-1;
+$ws2-gray-darkest: $asu-gray-1;
+$ws2-gray-darker: $asu-gray-2;
+$ws2-gray-dark: $asu-gray-3;
+$ws2-gray: $asu-gray-4;
+$ws2-gray-light: $asu-gray-5;
+$ws2-gray-lighter: $asu-gray-6;
+$ws2-gray-lightest: $asu-gray-7;
 
 // Custom variables (semantic renaming, mapping, etc.)
 $the-base: 16px;

packages/unity-bootstrap-theme/src/scss/extends/_alerts.scss

@@ -1,6 +1,6 @@
 .uds-anchor-menu {
   background-color: white;
-  border-bottom: 1px solid $uds-color-base-gray-3;
+  border-bottom: 1px solid $asu-gray-5;
   z-index: 100;
 
   &-wrapper {
@@ -47,14 +47,14 @@
   }
 
   .nav-link {
-    color: $uds-color-base-gray-7;
+    color: $asu-gray-1;
     padding: $uds-size-spacing-3 0;
     padding-left: 0.5rem;
     text-align: start;
     font-weight: 400;
 
     &:not(:last-child) {
-      border-bottom: 1px solid $uds-color-base-gray-3;
+      border-bottom: 1px solid $asu-gray-5;
     }
 
     &:hover,
@@ -64,11 +64,11 @@
     }
 
     &:visited {
-      color: $uds-color-base-gray-7;
+      color: $asu-gray-1;
     }
 
     &:focus {
-      box-shadow: 0px 0px 0px 2px $uds-color-base-gray-7 !important;
+      box-shadow: 0px 0px 0px 2px $asu-gray-1 !important;
     }
 
     svg {
@@ -80,7 +80,7 @@
 }
 
 @mixin uds-anchor-menu-expanded {
-  border-bottom: 1px solid $uds-color-base-gray-3;
+  border-bottom: 1px solid $asu-gray-5;
 
   .uds-anchor-menu-wrapper {
     flex-direction: row;

packages/unity-bootstrap-theme/src/scss/extends/_alt_styling.scss

@@ -1,6 +1,6 @@
 .uds-back-to-top-button {
   align-items: center;
-  background-color: $uds-color-base-gray-5;
+  background-color: $asu-gray-3;
   border: none;
   bottom: 50%;
   color: $uds-color-base-white;

packages/unity-bootstrap-theme/src/scss/extends/_anchor-menu.scss

@@ -2,21 +2,36 @@
   height: 322px;
 }
 
-.gray-7-bg {
-  background: $uds-color-base-gray-7;
+.gray-7-bg, .gray-dark-bg {
+  background: $asu-gray-1;
 }
 
-.gray-2-bg {
-  background: $uds-color-base-gray-2;
+.text-gray-dark-bg {
+  background-color: $asu-gray-1;
+  color: $asu-gray-7;
 }
 
-.gray-1-bg {
-  background: $uds-color-base-gray-1;
+.gray-2-bg, .gray-light-bg {
+  background: $asu-gray-6;
+}
+
+.text-gray-light-bg {
+  background-color: $asu-gray-6;
+  color: $asu-gray-1;
+}
+
+.gray-1-bg, .gray-faint-bg {
+  background: $asu-gray-7;
+}
+
+.text-gray-faint-bg {
+  background-color: $asu-gray-7;
+  color: $asu-gray-1;
 }
 
 .white-bg {
   background: $uds-color-base-white;
-  border: 1px solid $uds-color-base-gray-3;
+  border: 1px solid $asu-gray-5;
 }
 
 .image-bg {
@@ -45,9 +60,9 @@
 }
 
 .content-description-container {
-  background-color: $uds-color-base-gray-1;
+  background-color: $asu-gray-7;
   width: 100%;
-  border: 1px solid $uds-color-base-gray-3;
+  border: 1px solid $asu-gray-5;
   margin-top: 16px;
 }
 
@@ -56,11 +71,11 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  border: 1px dashed $uds-color-base-gray-5;
+  border: 1px dashed $asu-gray-3;
   height: 251px;
   margin: 20px 0 100px 0;
   font-size: 50px;
-  color: $uds-color-base-gray-3;
+  color: $asu-gray-5;
 }
 
 .bg {

packages/unity-bootstrap-theme/src/scss/extends/_back-to-top-buttton.scss

@@ -52,7 +52,7 @@ blockquote:before {
 
   svg {
     grid-column: 1;
-    fill: $uds-color-base-gray-7;
+    fill: $asu-gray-1;
     width: $uds-size-spacing-5;
     height: auto;
   }
@@ -251,7 +251,7 @@ blockquote:before {
     &:before {
       content: '';
       display: block;
-      background-color: $uds-color-base-gray-7;
+      background-color: $asu-gray-1;
       height: $uds-size-spacing-half;
       width: $uds-size-spacing-9;
       margin: $uds-size-spacing-2 0;

packages/unity-bootstrap-theme/src/scss/extends/_backgrounds.scss

@@ -2,13 +2,13 @@
   & {
     padding-left: 0;
   }
-  &.bg-gray-7 {
+  &.bg-gray-7, &.gray-dark-bg {
     a {
       color: $uds-color-base-gold;
     }
     li.active {
       &, a {
-        color: $uds-color-base-gray-1;
+        color: $asu-gray-7;
       }
     }
   }