Updating hex and remapping variables

The $gray-800 hex value now matches GitLab UI, and instances
of $gray-800 have been remapped to use $gray-700.

app/assets/javascripts/notes/components/note_header.vue

@@ -191,7 +191,7 @@ export default {
         name="eye-slash"
         :size="14"
         :title="s__('Notes|Private comments are accessible by internal staff only')"
-        class="gl-ml-1 gl-text-gray-800 align-middle"
+        class="gl-ml-1 gl-text-gray-700 align-middle"
       />
       <slot name="extra-controls"></slot>
       <i

app/assets/stylesheets/components/avatar.scss

@@ -125,7 +125,7 @@ $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $i
 .identicon {
   text-align: center;
   vertical-align: top;
-  color: $gray-800;
+  color: $gray-700;
   background-color: $gray-darker;
 
   // Sizes

app/assets/stylesheets/components/rich_content_editor.scss

@@ -28,7 +28,7 @@
     }
 
     button {
-      @include gl-text-gray-800;
+      @include gl-text-gray-700;
     }
   }
 

app/assets/stylesheets/framework/badges.scss

 .badge.badge-pill:not(.gl-badge) {
   font-weight: $gl-font-weight-normal;
   background-color: $badge-bg;
-  color: $gray-800;
+  color: $gray-700;
   vertical-align: baseline;
 
   // Do not use this!

app/assets/stylesheets/framework/broadcast_messages.scss

@@ -38,7 +38,7 @@
   }
 
   .broadcast-message-dismiss {
-    color: $gray-800;
+    color: $gray-700;
   }
 }
 

app/assets/stylesheets/framework/gitlab_theme.scss

@@ -297,7 +297,7 @@ body {
       $gray-200,
       $gray-300,
       $gray-500,
-      $gray-800,
+      $gray-700,
       $gray-900,
       $white
     );
@@ -306,7 +306,7 @@ body {
   &.ui-light {
     @include gitlab-theme(
       $gray-500,
-      $gray-800,
+      $gray-700,
       $gray-500,
       $gray-500,
       $gray-50,

app/assets/stylesheets/framework/selects.scss

@@ -285,7 +285,7 @@
 .select2-highlighted {
   .group-result {
     .group-path {
-      color: $gray-800;
+      color: $gray-700;
     }
   }
 }

app/assets/stylesheets/framework/variables.scss

@@ -170,7 +170,7 @@ $gray-400: #868686 !default;
 $gray-500: #666 !default;
 $gray-600: #5e5e5e !default;
 $gray-700: #525252 !default;
-$gray-800: #4f4f4f !default;
+$gray-800: #404040 !default;
 $gray-900: #303030 !default;
 $gray-950: #1f1f1f !default;
 

app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss

@@ -38,7 +38,7 @@
   }
 
   .badge.badge-pill {
-    color: var(--ide-text-color, $gray-800);
+    color: var(--ide-text-color, $gray-700);
     background-color: var(--ide-background, $badge-bg);
   }
 

app/assets/stylesheets/pages/graph.scss

@@ -49,7 +49,7 @@
     text {
       font-weight: bold;
       font-size: 12px;
-      fill: $gray-800;
+      fill: $gray-700;
     }
   }
 }

app/assets/stylesheets/pages/labels.scss

@@ -336,11 +336,11 @@
   }
 
   .label-action {
-    color: $gray-800;
+    color: $gray-700;
     cursor: pointer;
 
     svg {
-      fill: $gray-800;
+      fill: $gray-700;
     }
 
     &:hover {

app/assets/stylesheets/pages/pipelines.scss

@@ -796,7 +796,7 @@
   &.ci-status-icon-disabled,
   &.ci-status-icon-not-found,
   &.ci-status-icon-manual {
-    @include mini-pipeline-graph-color($white, $gray-500, $gray-800, $gray-900, $gray-950, $black);
+    @include mini-pipeline-graph-color($white, $gray-500, $gray-700, $gray-900, $gray-950, $black);
   }
 
   &.ci-status-icon-created,

ee/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_policy_violation.vue

@@ -19,7 +19,7 @@ export default {
       </gl-button>
     </div>
     <div class="media-body">
-      <strong class="gl-font-weight-bold gl-text-gray-800 gl-pl-2">
+      <strong class="gl-font-weight-bold gl-text-gray-700 gl-pl-2">
         {{ s__('mrWidget|You can merge after removing denied licenses') }}
       </strong>
     </div>

ee/changelogs/unreleased/224123-replace-gray-800-value-replace-usages-with-gray-700.yml

+---
+title: Replace -800 hex value, replace usages with -700
+merge_request: 39734
+author:
+type: other