Updating hex and remapping variables

Updating $gray-600 hex value and replacing instances with
$gray-400 since it is a closer match after the hex update.

app/assets/javascripts/design_management/components/design_sidebar.vue

@@ -94,7 +94,7 @@ export default {
       {{ issue.title }}
     </h2>
     <a
-      class="gl-text-gray-600 gl-text-decoration-none gl-mb-6 gl-display-block"
+      class="gl-text-gray-400 gl-text-decoration-none gl-mb-6 gl-display-block"
       :href="issue.webUrl"
       >{{ issue.webPath }}</a
     >

app/assets/javascripts/design_management_legacy/components/design_sidebar.vue

@@ -94,7 +94,7 @@ export default {
       {{ issue.title }}
     </h2>
     <a
-      class="gl-text-gray-600 gl-text-decoration-none gl-mb-6 gl-display-block"
+      class="gl-text-gray-400 gl-text-decoration-none gl-mb-6 gl-display-block"
       :href="issue.webUrl"
       >{{ issue.webPath }}</a
     >

app/assets/javascripts/packages/list/coming_soon/packages_coming_soon.vue

@@ -133,12 +133,12 @@ export default {
           </div>
 
           <div class="table-section section-100 gl-white-space-normal mt-md-3">
-            <div class="gl-display-flex gl-text-gray-600">
+            <div class="gl-display-flex gl-text-gray-400">
               <gl-icon name="issues" class="gl-mr-2" />
               <gl-link
                 data-testid="issue-id-link"
                 :href="issue.webUrl"
-                class="gl-text-gray-600 gl-mr-5"
+                class="gl-text-gray-400 gl-mr-5"
                 @click="onIssueLinkClick(issue.iid, issue.title)"
                 >#{{ issue.iid }}</gl-link
               >

app/assets/javascripts/ref/components/ref_results_section.vue

@@ -111,7 +111,7 @@ export default {
 
           <div class="gl-flex-grow-1 gl-display-flex gl-flex-direction-column">
             <span class="gl-font-monospace">{{ item.name }}</span>
-            <span class="gl-text-gray-600">{{ item.subtitle }}</span>
+            <span class="gl-text-gray-400">{{ item.subtitle }}</span>
           </div>
 
           <gl-badge v-if="item.default" size="sm" variant="info">{{

app/assets/javascripts/ref/components/ref_selector.vue

@@ -109,7 +109,7 @@ export default {
 <template>
   <gl-new-dropdown v-bind="$attrs" class="ref-selector" @shown="focusSearchBox">
     <template slot="button-content">
-      <span class="gl-flex-grow-1 gl-ml-2 gl-text-gray-600" data-testid="button-content">
+      <span class="gl-flex-grow-1 gl-ml-2 gl-text-gray-400" data-testid="button-content">
         <span v-if="selectedRef" class="gl-font-monospace">{{ selectedRef }}</span>
         <span v-else>{{ i18n.noRefSelected }}</span>
       </span>

app/assets/javascripts/releases/components/release_block_assets.vue

@@ -138,7 +138,7 @@ export default {
                     :aria-label="$options.externalLinkTooltipText"
                     :title="$options.externalLinkTooltipText"
                     data-testid="external-link-indicator"
-                    class="gl-ml-2 gl-flex-shrink-0 gl-flex-grow-0 gl-text-gray-600"
+                    class="gl-ml-2 gl-flex-shrink-0 gl-flex-grow-0 gl-text-gray-400"
                   />
                 </gl-link>
               </li>

app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue

@@ -38,7 +38,7 @@ export default {
   <div class="inline">
     <label
       v-tooltip
-      :class="{ 'gl-text-gray-600': isDisabled }"
+      :class="{ 'gl-text-gray-400': isDisabled }"
       data-testid="squashLabel"
       :data-title="tooltipTitle"
     >

app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue

@@ -74,16 +74,16 @@ export default {
           </div>
           <div class="gl-text-gray-700">
             <div v-if="user.bio" class="gl-display-flex gl-mb-2">
-              <icon name="profile" class="gl-text-gray-600 gl-flex-shrink-0" />
+              <icon name="profile" class="gl-text-gray-400 gl-flex-shrink-0" />
               <span ref="bio" class="gl-ml-2" v-html="user.bioHtml"></span>
             </div>
             <div v-if="user.workInformation" class="gl-display-flex gl-mb-2">
-              <icon name="work" class="gl-text-gray-600 gl-flex-shrink-0" />
+              <icon name="work" class="gl-text-gray-400 gl-flex-shrink-0" />
               <span ref="workInformation" class="gl-ml-2">{{ user.workInformation }}</span>
             </div>
           </div>
           <div v-if="user.location" class="js-location gl-text-gray-700 gl-display-flex">
-            <icon name="location" class="gl-text-gray-600 flex-shrink-0" />
+            <icon name="location" class="gl-text-gray-400 flex-shrink-0" />
             <span class="gl-ml-2">{{ user.location }}</span>
           </div>
           <div v-if="statusHtml" class="js-user-status gl-mt-3">

app/assets/stylesheets/framework/common.scss

@@ -509,7 +509,7 @@ img.emoji {
   }
 
   &.is-dragging {
-    background-color: $gray-600;
+    background-color: $gray-400;
   }
 }
 

app/assets/stylesheets/framework/files.scss

@@ -209,7 +209,7 @@
       }
 
       .doc-versions {
-        color: $gray-600;
+        color: $gray-400;
 
         &:hover {
           color: $gray-900;

app/assets/stylesheets/framework/forms.scss

@@ -227,7 +227,7 @@ label {
   right: 0.8em;
   top: 50%;
   transform: translateY(-50%);
-  color: $gray-600;
+  color: $gray-400;
 }
 
 .input-md {

app/assets/stylesheets/framework/mixins.scss

@@ -326,8 +326,8 @@
   line-height: 1;
   padding: 0;
   min-width: 16px;
-  color: $gray-600;
-  fill: $gray-600;
+  color: $gray-400;
+  fill: $gray-400;
 
   .fa {
     position: relative;

app/assets/stylesheets/framework/variables.scss

@@ -168,7 +168,7 @@ $gray-200: #bfbfbf !default;
 $gray-300: #999 !default;
 $gray-400: #868686 !default;
 $gray-500: #666 !default;
-$gray-600: #919191 !default;
+$gray-600: #5e5e5e !default;
 $gray-700: #707070 !default;
 $gray-800: #4f4f4f !default;
 $gray-900: #303030 !default;
@@ -351,11 +351,11 @@ $gl-font-weight-normal: 400;
 $gl-font-weight-bold: 600;
 $gl-text-color: $gray-900;
 $gl-text-color-secondary: $gray-700;
-$gl-text-color-tertiary: $gray-600;
+$gl-text-color-tertiary: $gray-400;
 $gl-text-color-quaternary: #d6d6d6;
 $gl-text-color-inverted: $white;
 $gl-text-color-secondary-inverted: rgba($white, 0.85);
-$gl-text-color-disabled: $gray-600;
+$gl-text-color-disabled: $gray-400;
 $gl-grayish-blue: #7f8fa4;
 $gl-gray-dark: #313236;
 $gl-gray-light: #5c5c5c;

app/assets/stylesheets/pages/clusters.scss

@@ -166,6 +166,6 @@
 
 .cluster-status-indicator {
   &.disabled {
-    background-color: $gray-600;
+    background-color: $gray-400;
   }
 }

app/assets/stylesheets/pages/incident_management_list.scss

@@ -26,7 +26,7 @@
       th {
         @include gl-bg-transparent;
         @include gl-font-weight-bold;
-        @include gl-text-gray-600;
+        @include gl-text-gray-400;
 
         &[aria-sort='none']:hover {
           background-image: url('data:image/svg+xml, %3csvg   xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="4 0 8 16"%3e   %3cpath style="fill: %23BABABA;" fill-rule="evenodd" d="M11.707085,11.7071   L7.999975,15.4142 L4.292875,11.7071 C3.902375,11.3166 3.902375,   10.6834 4.292875,10.2929 C4.683375,9.90237   5.316575,9.90237 5.707075,10.2929 L6.999975,   11.5858 L6.999975,2 C6.999975,1.44771   7.447695,1 7.999975,1 C8.552255,1 8.999975,1.44771   8.999975,2 L8.999975,11.5858 L10.292865,10.2929 C10.683395   ,9.90237 11.316555,9.90237 11.707085,10.2929   C12.097605,10.6834 12.097605,11.3166 11.707085,11.7071 Z"/%3e   %3c/svg%3e');

app/assets/stylesheets/pages/notes.scss

@@ -727,7 +727,7 @@ $note-form-margin-left: 72px;
   display: inline-flex;
   align-items: center;
   margin-left: 10px;
-  color: $gray-600;
+  color: $gray-400;
 
   @include notes-media('max', map-get($grid-breakpoints, sm) - 1) {
     float: none;

app/assets/stylesheets/pages/pipelines.scss

@@ -809,7 +809,7 @@
 
   &.ci-status-icon-created,
   &.ci-status-icon-skipped {
-    @include mini-pipeline-graph-color($white, $gray-100, $gray-200, $gray-300, $gray-600, $gray-700);
+    @include mini-pipeline-graph-color($white, $gray-100, $gray-200, $gray-300, $gray-400, $gray-700);
   }
 }
 

app/assets/stylesheets/pages/prometheus.scss

@@ -56,7 +56,7 @@
 
     .draggable-remove-link {
       cursor: pointer;
-      color: $gray-600;
+      color: $gray-400;
       background-color: $white;
     }
   }
@@ -117,7 +117,7 @@
 
 .prometheus-graph-cursor {
   position: absolute;
-  background: $gray-600;
+  background: $gray-400;
   width: 1px;
 }
 
@@ -290,7 +290,7 @@
       }
 
       > text {
-        fill: $gray-600;
+        fill: $gray-400;
         font-size: 10px;
       }
     }

app/assets/stylesheets/pages/status.scss

@@ -38,7 +38,7 @@
   }
 
   &.ci-preparing {
-    @include status-color($gray-100, $gray-300, $gray-600);
+    @include status-color($gray-100, $gray-300, $gray-400);
   }
 
   &.ci-pending,

app/views/admin/services/index.html.haml

@@ -18,7 +18,7 @@
             = link_to edit_admin_application_settings_integration_path(service.to_param), class: 'gl-text-blue-300!' do
               %strong.has-tooltip{ title: s_('AdminSettings|Moved to integrations'), data: { container: 'body' } }
                 = service.title
-          %td.gl-cursor-default.gl-text-gray-600
+          %td.gl-cursor-default.gl-text-gray-400
             = service.description
           %td
       - else