UDS-1916: fix gray color alignment with brand

.gitignore

@@ -122,3 +122,4 @@ tests/__image_snapshots__/__diff_output__
 !.yarn/versions
 *.env.*
 !.env.yarn.example
+.last-run.json

packages/component-header-footer/src/footer/index.styles.js

@@ -16,11 +16,11 @@ const StyledFooter = styled.footer`
   // Variables
   --color-divider-darker: #1e1e1e;
   --color-base-white: #ffffff;
-  --color-base-grey-2: #e8e8e8;
+  --color-base-gray-6: #e8e8e8;
   --color-base-gold: #ffc627;
   --color-divider-lighter: #393939;
-  --color-base-grey-7: #191919;
-  --color-base-grey-4: #bfbfbf;
+  --color-base-gray-1: #191919;
+  --color-base-gray-4: #bfbfbf;
 
   // Base Styles
   * {
@@ -33,7 +33,7 @@ const StyledFooter = styled.footer`
     button:focus {
       outline: none;
       box-shadow: 0 0 0 2px var(--color-base-white),
-        0 0 0 4px var(--color-base-grey-7) !important;
+        0 0 0 4px var(--color-base-gray-1) !important;
       -webkit-tap-highlight-color: transparent;
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     }
@@ -81,7 +81,7 @@ const StyledFooter = styled.footer`
 
   #wrapper-endorsed-footer {
     a {
-      color: var(--color-base-grey-2);
+      color: var(--color-base-gray-6);
     }
 
     & + #wrapper-footer-columns {
@@ -94,15 +94,15 @@ const StyledFooter = styled.footer`
   }
 
   #wrapper-footer-colophon {
-    background-color: var(--color-base-grey-2);
+    background-color: var(--color-base-gray-6);
   }
 
   #wrapper-footer-innovation,
   #wrapper-footer-colophon {
     a {
       margin-right: 1.5rem;
       text-decoration: none;
-      color: var(--color-base-grey-7);
+      color: var(--color-base-gray-1);
     }
   }
 
@@ -158,7 +158,7 @@ const StyledFooter = styled.footer`
       .nav-link {
         padding: 0.75rem 1rem 0.5rem 1rem;
         font-size: 2rem;
-        color: var(--color-base-grey-4);
+        color: var(--color-base-gray-4);
         line-height: 1;
         padding-top: 7px;
 
@@ -184,7 +184,7 @@ const StyledFooter = styled.footer`
         margin-bottom: 1.5rem;
 
         a {
-          color: var(--color-base-grey-2);
+          color: var(--color-base-gray-6);
           line-height: 1.5rem;
           text-decoration: underline;
 
@@ -224,7 +224,7 @@ const StyledFooter = styled.footer`
 
         a,
         .accordion-button {
-          color: var(--color-base-grey-2);
+          color: var(--color-base-gray-6);
           padding: 1.5rem 0;
           text-decoration: none;
           background: none;
@@ -282,7 +282,7 @@ const StyledFooter = styled.footer`
         }
 
         .nav-link {
-          color: var(--color-base-grey-2);
+          color: var(--color-base-gray-6);
           padding: 0 0 1rem;
           line-height: 1.5rem;
           text-decoration: none;

packages/unity-bootstrap-theme/UPGRADE.md

@@ -70,7 +70,7 @@ Regex of tag attribute changes:
 * change `mr-\d` to `me-$1`
 * change `ml-\d` to `ms-$1`
 * change `sr-only` to `visually-hidden` to visually hide an element while still allowing it to be exposed to assistive technologies. If you need an element to appear when focused, use `visually-hidden-focusable`.
-* change `badge-gray-2` to `text-bg-gray-2` (may be other variations)
+* change `badge-grayscale-6` to `text-bg-grayscale-6` (may be other variations)
 
 New class pattern .text-bg-{color} used in badges
 

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

@@ -44,13 +44,13 @@ $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
+$uds-color-base-grayscale-7: #fafafa;
+$uds-color-base-grayscale-6: #e8e8e8;
+$uds-color-base-grayscale-5: #d0d0d0;
+$uds-color-base-grayscale-4: #bfbfbf;
+$uds-color-base-grayscale-3: #747474;
+$uds-color-base-grayscale-2: #484848;
+$uds-color-base-grayscale-1: #191919; // Base font color and default black level
 
 $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 +61,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: $uds-color-base-grayscale-6; // Background - Gray
+$uds-color-background-dark: $uds-color-base-grayscale-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: $uds-color-base-grayscale-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: $uds-color-base-grayscale-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/src/scss/extends/_alerts.scss

@@ -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: $uds-color-base-grayscale-5;
 }
 
 // Media Queries

packages/unity-bootstrap-theme/src/scss/extends/_alt_styling.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: $uds-color-base-grayscale-1;
+$ws2-gray-darker: $uds-color-base-grayscale-2;
+$ws2-gray-dark: $uds-color-base-grayscale-3;
+$ws2-gray: $uds-color-base-grayscale-4;
+$ws2-gray-light: $uds-color-base-grayscale-5;
+$ws2-gray-lighter: $uds-color-base-grayscale-6;
+$ws2-gray-lightest: $uds-color-base-grayscale-7;
 
 // Custom variables (semantic renaming, mapping, etc.)
 $the-base: 16px;

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

@@ -1,6 +1,6 @@
 .uds-anchor-menu {
   background-color: white;
-  border-bottom: 1px solid $uds-color-base-gray-3;
+  border-bottom: 1px solid $uds-color-base-grayscale-5;
   z-index: 100;
 
   &-wrapper {
@@ -47,14 +47,14 @@
   }
 
   .nav-link {
-    color: $uds-color-base-gray-7;
+    color: $uds-color-base-grayscale-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 $uds-color-base-grayscale-5;
     }
 
     &:hover,
@@ -64,11 +64,11 @@
     }
 
     &:visited {
-      color: $uds-color-base-gray-7;
+      color: $uds-color-base-grayscale-1;
     }
 
     &:focus {
-      box-shadow: 0px 0px 0px 2px $uds-color-base-gray-7 !important;
+      box-shadow: 0px 0px 0px 2px $uds-color-base-grayscale-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 $uds-color-base-grayscale-5;
 
   .uds-anchor-menu-wrapper {
     flex-direction: row;

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

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

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

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

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

@@ -52,7 +52,7 @@ blockquote:before {
 
   svg {
     grid-column: 1;
-    fill: $uds-color-base-gray-7;
+    fill: $uds-color-base-grayscale-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: $uds-color-base-grayscale-1;
       height: $uds-size-spacing-half;
       width: $uds-size-spacing-9;
       margin: $uds-size-spacing-2 0;

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

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

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

@@ -31,27 +31,27 @@
     padding: $uds-component-button-padding-y-small
       $uds-component-button-padding-x-small;
     margin-top: 8px;
-    background: $gray-2;
+    background: $grayscale-6;
     &.btn-tag-alt-white {
-      background: $gray-2;
+      background: $grayscale-6;
       color: $body-color;
     }
     &.btn-tag-alt-gray {
-      background: $gray-3;
+      background: $grayscale-5;
       color: $body-color;
     }
     &.btn-tag-alt-black {
-      background: $gray-4;
+      background: $grayscale-4;
       color: $body-color;
     }
   }
   &.btn-circle {
     padding: $uds-size-spacing-half $uds-size-spacing-half;
     width: $uds-size-spacing-4 !important;
     height: $uds-size-spacing-4;
-    border: solid 1px $gray-3;
+    border: solid 1px $grayscale-5;
     &.btn-circle-alt-white {
-      background: $gray-2;
+      background: $grayscale-6;
       color: $body-color;
     }
     &.btn-circle-alt-gray {
@@ -60,7 +60,7 @@
     }
     &.btn-circle-alt-black {
       background: $white;
-      color: $gray-7;
+      color: $grayscale-1;
     }
     &.btn-circle-large {
       width: $uds-size-spacing-8 !important;
@@ -81,7 +81,7 @@
   }
 }
 .bg-light-gray {
-  background-color: $gray-1;
+  background-color: $grayscale-7;
 }
 
 
@@ -114,7 +114,7 @@
 
 
 a {
-  &.text-gold, .bg-gray-7 & {
+  &.text-gold, .bg-grayscale-1 & {
     &:link,
     &:hover,
     &:focus {