Merge branch '224122-replace-gray-700-value-replace-usages-with-gray-500' into 'master'

Replace $gray-700 hex value and replace with $gray-500

Closes #224122

See merge request gitlab-org/gitlab!38793

app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue

@@ -273,7 +273,7 @@ export default {
 
       <gl-loading-icon v-if="isUpdating" :inline="true" />
       <p v-else-if="!isDropdownShowing" class="value gl-m-0" :class="{ 'no-value': !userName }">
-        <span v-if="userName" class="gl-text-gray-700" data-testid="assigned-users">{{
+        <span v-if="userName" class="gl-text-gray-500" data-testid="assigned-users">{{
           assignedUser
         }}</span>
         <span v-else class="gl-display-flex gl-align-items-center">

app/assets/javascripts/alert_management/components/sidebar/sidebar_status.vue

@@ -107,7 +107,7 @@ export default {
       >
         <span
           v-if="$options.statuses[alert.status]"
-          class="gl-text-gray-700"
+          class="gl-text-gray-500"
           data-testid="status"
           >{{ $options.statuses[alert.status] }}</span
         >

app/assets/javascripts/boards/components/board_list_header.vue

@@ -241,7 +241,7 @@ export default {
         v-if="isSwimlanesHeader && !list.isExpanded"
         ref="collapsedInfo"
         aria-hidden="true"
-        class="board-header-collapsed-info-icon gl-mt-2 gl-cursor-pointer gl-text-gray-700"
+        class="board-header-collapsed-info-icon gl-mt-2 gl-cursor-pointer gl-text-gray-500"
       >
         <gl-icon name="information" />
       </span>

app/assets/javascripts/design_management/components/design_notes/design_discussion.vue

@@ -230,10 +230,10 @@ export default {
           </button>
         </template>
         <template v-if="discussion.resolved" #resolvedStatus>
-          <p class="gl-text-gray-700 gl-font-sm gl-m-0 gl-mt-5" data-testid="resolved-message">
+          <p class="gl-text-gray-500 gl-font-sm gl-m-0 gl-mt-5" data-testid="resolved-message">
             {{ __('Resolved by') }}
             <gl-link
-              class="gl-text-gray-700 gl-text-decoration-none gl-font-sm link-inherit-color"
+              class="gl-text-gray-500 gl-text-decoration-none gl-font-sm link-inherit-color"
               :href="discussion.resolvedBy.webUrl"
               target="_blank"
               >{{ discussion.resolvedBy.name }}</gl-link

app/assets/javascripts/design_management/components/design_notes/toggle_replies_widget.vue

@@ -52,7 +52,7 @@ export default {
       {{ toggleText }}
     </gl-button>
     <template v-if="collapsed">
-      <span class="gl-text-gray-700">{{ __('Last reply by') }}</span>
+      <span class="gl-text-gray-500">{{ __('Last reply by') }}</span>
       <gl-link
         :href="lastReply.author.webUrl"
         target="_blank"
@@ -63,7 +63,7 @@ export default {
       <time-ago-tooltip
         :time="lastReply.createdAt"
         tooltip-placement="bottom"
-        class="gl-text-gray-700"
+        class="gl-text-gray-500"
       />
     </template>
   </li>

app/assets/javascripts/design_management/components/upload/design_dropzone.vue

@@ -36,7 +36,7 @@ export default {
     iconStyles() {
       return {
         size: this.hasDesigns ? 24 : 16,
-        class: this.hasDesigns ? 'gl-mb-2' : 'gl-mr-3 gl-text-gray-700',
+        class: this.hasDesigns ? 'gl-mb-2' : 'gl-mr-3 gl-text-gray-500',
       };
     },
   },

app/assets/javascripts/design_management_legacy/components/design_notes/design_discussion.vue

@@ -230,10 +230,10 @@ export default {
           </button>
         </template>
         <template v-if="discussion.resolved" #resolvedStatus>
-          <p class="gl-text-gray-700 gl-font-sm gl-m-0 gl-mt-5" data-testid="resolved-message">
+          <p class="gl-text-gray-500 gl-font-sm gl-m-0 gl-mt-5" data-testid="resolved-message">
             {{ __('Resolved by') }}
             <gl-link
-              class="gl-text-gray-700 gl-text-decoration-none gl-font-sm link-inherit-color"
+              class="gl-text-gray-500 gl-text-decoration-none gl-font-sm link-inherit-color"
               :href="discussion.resolvedBy.webUrl"
               target="_blank"
               >{{ discussion.resolvedBy.name }}</gl-link

app/assets/javascripts/design_management_legacy/components/design_notes/toggle_replies_widget.vue

@@ -52,7 +52,7 @@ export default {
       {{ toggleText }}
     </gl-button>
     <template v-if="collapsed">
-      <span class="gl-text-gray-700">{{ __('Last reply by') }}</span>
+      <span class="gl-text-gray-500">{{ __('Last reply by') }}</span>
       <gl-link
         :href="lastReply.author.webUrl"
         target="_blank"
@@ -63,7 +63,7 @@ export default {
       <time-ago-tooltip
         :time="lastReply.createdAt"
         tooltip-placement="bottom"
-        class="gl-text-gray-700"
+        class="gl-text-gray-500"
       />
     </template>
   </li>

app/assets/javascripts/diffs/components/diff_line_note_form.vue

@@ -148,7 +148,7 @@ export default {
 
 <template>
   <div class="content discussion-form discussion-form-container discussion-notes">
-    <div v-if="glFeatures.multilineComments" class="gl-mb-3 gl-text-gray-700 gl-pb-3">
+    <div v-if="glFeatures.multilineComments" class="gl-mb-3 gl-text-gray-500 gl-pb-3">
       <multiline-comment-form
         v-model="commentLineStart"
         :line="line"

app/assets/javascripts/groups/components/item_actions.vue

@@ -53,7 +53,7 @@ export default {
       :aria-label="leaveBtnTitle"
       data-container="body"
       data-placement="bottom"
-      class="leave-group btn btn-xs no-expand gl-text-gray-700 gl-ml-5"
+      class="leave-group btn btn-xs no-expand gl-text-gray-500 gl-ml-5"
       @click.prevent="onLeaveGroup"
     >
       <icon name="leave" class="position-top-0" />
@@ -66,7 +66,7 @@ export default {
       :aria-label="editBtnTitle"
       data-container="body"
       data-placement="bottom"
-      class="edit-group btn btn-xs no-expand gl-text-gray-700 gl-ml-5"
+      class="edit-group btn btn-xs no-expand gl-text-gray-500 gl-ml-5"
     >
       <icon name="settings" class="position-top-0 align-middle" />
     </a>

app/assets/javascripts/groups/components/item_stats.vue

@@ -44,7 +44,7 @@ export default {
 </script>
 
 <template>
-  <div class="stats gl-text-gray-700">
+  <div class="stats gl-text-gray-500">
     <item-stats-value
       v-if="isGroup"
       :title="__('Subgroups')"

app/assets/javascripts/monitoring/components/links_section.vue

@@ -23,7 +23,7 @@ export default {
       class="gl-mb-1 gl-mr-5 gl-display-flex gl-display-sm-block gl-hover-text-blue-600-children gl-word-break-all"
     >
       <gl-link :href="link.url" class="gl-text-gray-900 gl-text-decoration-none!"
-        ><gl-icon name="link" class="gl-text-gray-700 gl-vertical-align-text-bottom gl-mr-2" />{{
+        ><gl-icon name="link" class="gl-text-gray-500 gl-vertical-align-text-bottom gl-mr-2" />{{
           link.title
         }}
       </gl-link>

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

@@ -347,7 +347,7 @@ export default {
     <div
       v-if="showMultiLineComment"
       data-testid="multiline-comment"
-      class="gl-mb-3 gl-text-gray-700 gl-border-gray-200 gl-border-b-solid gl-border-b-1 gl-pb-3"
+      class="gl-mb-3 gl-text-gray-500 gl-border-gray-200 gl-border-b-solid gl-border-b-1 gl-pb-3"
     >
       <gl-sprintf :message="__('Comment on lines %{startLine} to %{endLine}')">
         <template #startLine>

app/assets/javascripts/packages/details/components/package_title.vue

@@ -51,7 +51,7 @@ export default {
           {{ packageEntity.name }}
         </h1>
 
-        <div class="gl-display-flex gl-align-items-center gl-text-gray-700">
+        <div class="gl-display-flex gl-align-items-center gl-text-gray-500">
           <gl-icon name="eye" class="gl-mr-3" />
           <gl-sprintf :message="$options.i18n.packageInfo">
             <template #version>
@@ -70,7 +70,7 @@ export default {
 
     <div class="gl-display-flex gl-flex-wrap gl-align-items-center gl-mb-3">
       <div v-if="packageTypeDisplay" class="gl-display-flex gl-align-items-center gl-mr-5">
-        <gl-icon name="package" class="gl-text-gray-700 gl-mr-3" />
+        <gl-icon name="package" class="gl-text-gray-500 gl-mr-3" />
         <span data-testid="package-type" class="gl-font-weight-bold">{{ packageTypeDisplay }}</span>
       </div>
 
@@ -79,7 +79,7 @@ export default {
       </div>
 
       <div v-if="packagePipeline" class="gl-display-flex gl-align-items-center gl-mr-5">
-        <gl-icon name="review-list" class="gl-text-gray-700 gl-mr-3" />
+        <gl-icon name="review-list" class="gl-text-gray-500 gl-mr-3" />
         <gl-link
           data-testid="pipeline-project"
           :href="packagePipeline.project.web_url"
@@ -94,7 +94,7 @@ export default {
         data-testid="package-ref"
         class="gl-display-flex gl-align-items-center gl-mr-5"
       >
-        <gl-icon name="branch" class="gl-text-gray-700 gl-mr-3" />
+        <gl-icon name="branch" class="gl-text-gray-500 gl-mr-3" />
         <span
           v-gl-tooltip
           class="gl-font-weight-bold text-truncate mw-xs"
@@ -104,7 +104,7 @@ export default {
       </div>
 
       <div class="gl-display-flex gl-align-items-center gl-mr-5">
-        <gl-icon name="disk" class="gl-text-gray-700 gl-mr-3" />
+        <gl-icon name="disk" class="gl-text-gray-500 gl-mr-3" />
         <span data-testid="package-size" class="gl-font-weight-bold">{{ totalSize }}</span>
       </div>
     </div>

app/assets/javascripts/packages/shared/components/package_tags.vue

@@ -70,7 +70,7 @@ export default {
 <template>
   <div class="gl-display-flex gl-align-items-center">
     <div v-if="!hideLabel" data-testid="tagLabel" class="gl-display-flex gl-align-items-center">
-      <gl-icon name="labels" class="gl-text-gray-700 gl-mr-3" />
+      <gl-icon name="labels" class="gl-text-gray-500 gl-mr-3" />
       <span class="gl-font-weight-bold">{{ tagsDisplay }}</span>
     </div>
 

app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue

@@ -96,7 +96,7 @@ export default {
     </div>
     <div
       v-if="imagesCount"
-      class="gl-display-flex gl-align-items-center gl-mt-1 gl-mb-3 gl-text-gray-700"
+      class="gl-display-flex gl-align-items-center gl-mt-1 gl-mb-3 gl-text-gray-500"
       data-testid="subheader"
     >
       <span class="gl-mr-3" data-testid="images-count">

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

@@ -45,7 +45,7 @@ export default {
           data-testid="close"
           @click="dismiss"
         >
-          <gl-icon name="close" aria-hidden="true" class="gl-text-gray-700" />
+          <gl-icon name="close" aria-hidden="true" class="gl-text-gray-500" />
         </button>
       </div>
     </div>

app/assets/javascripts/vue_shared/components/markdown/field.vue

@@ -250,7 +250,7 @@ export default {
         </gl-mentions>
         <slot v-else name="textarea"></slot>
         <a
-          class="zen-control zen-control-leave js-zen-leave gl-text-gray-700"
+          class="zen-control zen-control-leave js-zen-leave gl-text-gray-500"
           href="#"
           :aria-label="__('Leave zen mode')"
         >

app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button.vue

@@ -78,7 +78,7 @@ export default {
     <span class="dropdown-toggle-text"> {{ dropdownToggleText }} </span>
     <gl-icon
       name="chevron-down"
-      class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-700"
+      class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500"
       :size="16"
     />
   </button>

app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue

@@ -22,7 +22,7 @@ export default {
     />
     <gl-icon
       name="close"
-      class="dropdown-input-clear js-dropdown-input-clear gl-absolute gl-top-3 gl-right-5 gl-text-gray-700"
+      class="dropdown-input-clear js-dropdown-input-clear gl-absolute gl-top-3 gl-right-5 gl-text-gray-500"
     />
   </div>
 </template>

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

@@ -70,9 +70,9 @@ export default {
             <h5 class="gl-m-0">
               {{ user.name }}
             </h5>
-            <span class="gl-text-gray-700">@{{ user.username }}</span>
+            <span class="gl-text-gray-500">@{{ user.username }}</span>
           </div>
-          <div class="gl-text-gray-700">
+          <div class="gl-text-gray-500">
             <div v-if="user.bio" class="gl-display-flex gl-mb-2">
               <icon name="profile" class="gl-text-gray-400 gl-flex-shrink-0" />
               <span ref="bio" class="gl-ml-2" v-html="user.bioHtml"></span>
@@ -82,7 +82,7 @@ export default {
               <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">
+          <div v-if="user.location" class="js-location gl-text-gray-500 gl-display-flex">
             <icon name="location" class="gl-text-gray-400 flex-shrink-0" />
             <span class="gl-ml-2">{{ user.location }}</span>
           </div>

app/assets/stylesheets/components/design_management/design.scss

@@ -31,7 +31,7 @@
     border-radius: 50%;
 
     &.resolved {
-      background-color: $gray-700;
+      background-color: $gray-500;
     }
   }
 }

app/assets/stylesheets/framework/awards.scss

@@ -232,7 +232,7 @@
       height: $default-icon-size;
       width: $default-icon-size;
       border-radius: 50%;
-      fill: $gray-700;
+      fill: $gray-500;
     }
   }
 

app/assets/stylesheets/framework/ci_variable_list.scss

@@ -100,7 +100,7 @@
 }
 
 .group-variable-list {
-  color: $gray-700;
+  color: $gray-500;
 
   .table-section:not(:first-child) {
     @include media-breakpoint-down(sm) {

app/assets/stylesheets/framework/common.scss

@@ -6,7 +6,7 @@
 .cdark { color: $common-gray-dark; }
 
 .fwhite { fill: $white; }
-.fgray { fill: $gray-700; }
+.fgray { fill: $gray-500; }
 
 .text-plain,
 .text-plain:hover {

app/assets/stylesheets/framework/gitlab_theme.scss

@@ -296,7 +296,7 @@ body {
     @include gitlab-theme(
       $gray-200,
       $gray-300,
-      $gray-700,
+      $gray-500,
       $gray-800,
       $gray-900,
       $white
@@ -305,12 +305,12 @@ body {
 
   &.ui-light {
     @include gitlab-theme(
-      $gray-700,
+      $gray-500,
       $gray-800,
-      $gray-700,
-      $gray-700,
+      $gray-500,
+      $gray-500,
       $gray-50,
-      $gray-700
+      $gray-500
     );
 
     .navbar-gitlab {
@@ -341,7 +341,7 @@ body {
       .container-fluid {
         .navbar-toggler,
         .navbar-toggler:hover {
-          color: $gray-700;
+          color: $gray-500;
           border-left: 1px solid $gray-100;
         }
       }

app/assets/stylesheets/framework/icons.scss

@@ -98,5 +98,5 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: $gray-700;
+  color: $gray-500;
 }

app/assets/stylesheets/framework/responsive_tables.scss

@@ -20,7 +20,7 @@
   @extend .gl-responsive-table-row-layout;
   margin-top: 10px;
   border: 1px solid $border-color;
-  color: $gray-700;
+  color: $gray-500;
 
   &.gl-responsive-table-row-clickable {
     &:hover {

app/assets/stylesheets/framework/spinner.scss

@@ -42,7 +42,7 @@
   }
 
   &.spinner-dark {
-    @include spinner-color($gray-700);
+    @include spinner-color($gray-500);
   }
 
   &.spinner-light {

app/assets/stylesheets/framework/stacked_progress_bar.scss

@@ -24,7 +24,7 @@
 
   .status-unavailable {
     padding: 0 10px;
-    color: $gray-700;
+    color: $gray-500;
   }
 
   .status-green {

app/assets/stylesheets/framework/tables.scss

@@ -16,7 +16,7 @@ table {
   * Remove this code as soon as this happens
   */
   &.gl-table {
-    @include gl-text-gray-700;
+    @include gl-text-gray-500;
   }
 
   &.table {
@@ -60,7 +60,7 @@ table {
         }
 
         &.original-gl-th {
-          @include gl-text-gray-700;
+          @include gl-text-gray-500;
           border-bottom: 1px solid $cycle-analytics-light-gray;
         }
       }

app/assets/stylesheets/framework/variables.scss

@@ -169,7 +169,7 @@ $gray-300: #999 !default;
 $gray-400: #868686 !default;
 $gray-500: #666 !default;
 $gray-600: #5e5e5e !default;
-$gray-700: #707070 !default;
+$gray-700: #525252 !default;
 $gray-800: #4f4f4f !default;
 $gray-900: #303030 !default;
 $gray-950: #1f1f1f !default;
@@ -350,7 +350,7 @@ $gl-font-size-large: 16px;
 $gl-font-weight-normal: 400;
 $gl-font-weight-bold: 600;
 $gl-text-color: $gray-900;
-$gl-text-color-secondary: $gray-700;
+$gl-text-color-secondary: $gray-500;
 $gl-text-color-tertiary: $gray-400;
 $gl-text-color-quaternary: #d6d6d6;
 $gl-text-color-inverted: $white;

app/assets/stylesheets/page_bundles/ide.scss

@@ -366,7 +366,7 @@ $ide-commit-header-height: 48px;
     display: block;
     margin-left: auto;
     margin-right: auto;
-    color: var(--ide-text-color-secondary, $gray-700);
+    color: var(--ide-text-color-secondary, $gray-500);
   }
 
   .file-status-icon {
@@ -689,7 +689,7 @@ $ide-commit-header-height: 48px;
   border-bottom: 1px solid var(--ide-border-color-alt, $white-dark);
 
   svg {
-    color: var(--ide-text-color-secondary, $gray-700);
+    color: var(--ide-text-color-secondary, $gray-500);
 
     &:focus,
     &:hover {
@@ -721,7 +721,7 @@ $ide-commit-header-height: 48px;
 
       &,
       &:hover {
-        color: var(--ide-text-color-secondary, $gray-700);
+        color: var(--ide-text-color-secondary, $gray-500);
       }
     }
 
@@ -1133,7 +1133,7 @@ $ide-commit-header-height: 48px;
 .ide-file-icon-holder {
   display: flex;
   align-items: center;
-  color: var(--ide-text-color-secondary, $gray-700);
+  color: var(--ide-text-color-secondary, $gray-500);
 }
 
 .file-row:active {

app/assets/stylesheets/pages/alert_management/details.scss

@@ -16,12 +16,12 @@
 
         &:not(:first-child) {
           &::before {
-            color: $gray-700;
+            color: $gray-500;
             font-weight: normal !important;
           }
 
           div {
-            color: $gray-700;
+            color: $gray-500;
           }
         }
 

app/assets/stylesheets/pages/boards.scss

@@ -540,7 +540,7 @@
   }
 
   .board-card-info-icon {
-    color: $gray-700;
+    color: $gray-500;
     margin-right: $gl-padding-4;
     vertical-align: text-top;
   }

app/assets/stylesheets/pages/incident_management_list.scss

@@ -5,7 +5,7 @@
 
   // these styles need to be deleted once GlTable component looks in GitLab same as in @gitlab/ui
   table {
-    @include gl-text-gray-700;
+    @include gl-text-gray-500;
 
     tr {
       &:focus {

app/assets/stylesheets/pages/issuable.scss

@@ -598,18 +598,18 @@
   padding: 16px 0;
 
   small {
-    color: $gray-700;
+    color: $gray-500;
   }
 }
 
 .edited-text {
-  color: $gray-700;
+  color: $gray-500;
   display: block;
   margin: 16px 0 0;
   font-size: 85%;
 
   .author-link {
-    color: $gray-700;
+    color: $gray-500;
   }
 }
 
@@ -960,7 +960,7 @@
     .sidebar-collapsed-divider {
       line-height: 5px;
       font-size: 12px;
-      color: $gray-700;
+      color: $gray-500;
 
       + .sidebar-collapsed-icon {
         padding-top: 0;

app/assets/stylesheets/pages/merge_requests.scss

@@ -1005,7 +1005,7 @@ $mr-widget-min-height: 69px;
 
   .coverage {
     font-size: 12px;
-    color: $gray-700;
+    color: $gray-500;
     line-height: initial;
   }
 

app/assets/stylesheets/pages/note_form.scss

@@ -152,7 +152,7 @@
   }
 
   .sidebar-item-value & {
-    fill: $gray-700;
+    fill: $gray-500;
   }
 }
 
@@ -282,7 +282,7 @@ table {
     display: table;
 
     svg {
-      fill: $gray-700;
+      fill: $gray-500;
     }
 
     .btn-group {

app/assets/stylesheets/pages/notes.scss

@@ -674,7 +674,7 @@ $note-form-margin-left: 72px;
 
 .note-headline-meta {
   .system-note-separator {
-    color: $gray-700;
+    color: $gray-500;
   }
 
   .note-timestamp {
@@ -867,7 +867,7 @@ $note-form-margin-left: 72px;
     line-height: $gl-line-height;
 
     svg {
-      fill: $gray-700;
+      fill: $gray-500;
     }
 
     &.discussion-create-issue-btn {
@@ -904,7 +904,7 @@ $note-form-margin-left: 72px;
   border-right: 0;
 
   .line-resolve-btn {
-    color: $gray-700;
+    color: $gray-500;
 
     svg {
       vertical-align: text-top;

app/assets/stylesheets/pages/pipelines.scss

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

app/assets/stylesheets/pages/reports.scss

@@ -77,7 +77,7 @@
   }
 
   &.neutral svg {
-    color: $gray-700;
+    color: $gray-500;
   }
 
   .ci-status-icon {

app/views/admin/dashboard/stats.html.haml

@@ -2,7 +2,7 @@
 
 %h3.my-4
   = s_('AdminArea|Users statistics')
-%table.table.gl-text-gray-700
+%table.table.gl-text-gray-500
   %tr
     %td.p-3
       = s_('AdminArea|Users without a Group and Project')

app/views/admin/groups/_group.html.haml

@@ -14,7 +14,7 @@
       .description
         = markdown_field(group, :description)
 
-  .stats.gl-text-gray-700.gl-flex-shrink-0.gl-display-none.gl-display-sm-flex
+  .stats.gl-text-gray-500.gl-flex-shrink-0.gl-display-none.gl-display-sm-flex
     %span.badge.badge-pill
       = storage_counter(group.storage_size)
 

app/views/devise/shared/_experimental_separate_sign_up_flow_box.html.haml

@@ -42,7 +42,7 @@
       .submit-container.mt-3
         = f.submit _("Register"), class: "btn-register btn btn-block btn-success mb-0 p-2", data: { qa_selector: 'new_user_register_button' }
       - if experiment_enabled?(:terms_opt_in)
-        %p.gl-text-gray-700.gl-mt-5.gl-mb-0
+        %p.gl-text-gray-500.gl-mt-5.gl-mb-0
           = html_escape(_("By clicking Register, I agree that I have read and accepted the GitLab %{linkStart}Terms of Use and Privacy Policy%{linkEnd}")) % { linkStart: "<a href='#{terms_path}' target='_blank' rel='noreferrer noopener'>".html_safe, linkEnd: '</a>'.html_safe }
       - if omniauth_enabled? && button_based_providers_enabled?
         = render 'devise/shared/experimental_separate_sign_up_flow_omniauth_box'

app/views/shared/_zen.html.haml

@@ -15,5 +15,5 @@
         qa_selector: qa_selector }
   - else
     = text_area_tag attr, current_text, data: { qa_selector: qa_selector }, class: classes, placeholder: placeholder
-  %a.zen-control.zen-control-leave.js-zen-leave.gl-text-gray-700{ href: "#" }
+  %a.zen-control.zen-control-leave.js-zen-leave.gl-text-gray-500{ href: "#" }
     = sprite_icon('compress')

app/views/shared/groups/_group.html.haml

@@ -16,7 +16,7 @@
       .description
         = markdown_field(group, :description)
 
-  .stats.gl-text-gray-700.gl-flex-shrink-0
+  .stats.gl-text-gray-500.gl-flex-shrink-0
     %span.gl-ml-5
       = sprite_icon('bookmark', css_class: 'gl-vertical-align-text-bottom')
       = number_with_delimiter(group.projects.non_archived.count)

ee/app/assets/javascripts/analytics/merge_request_analytics/components/throughput_chart.vue

@@ -99,7 +99,7 @@ export default {
 <template>
   <div>
     <h4 data-testid="chartTitle">{{ $options.strings.chartTitle }}</h4>
-    <div class="gl-text-gray-700" data-testid="chartDescription">
+    <div class="gl-text-gray-500" data-testid="chartDescription">
       {{ $options.strings.chartDescription }}
     </div>
     <chart-skeleton-loader v-if="chartDataLoading" />

ee/app/assets/javascripts/boards/components/assignee_select.vue

@@ -136,7 +136,7 @@ export default {
           <span class="dropdown-toggle-text"> {{ placeholderText }} </span>
           <gl-icon
             name="chevron-down"
-            class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-700"
+            class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500"
             :size="16"
           />
         </button>
@@ -157,7 +157,7 @@ dropdown-menu-user dropdown-menu-selectable dropdown-menu-author"
             />
             <gl-icon
               name="close"
-              class="dropdown-input-clear js-dropdown-input-clear gl-absolute gl-top-3 gl-right-5 gl-text-gray-700"
+              class="dropdown-input-clear js-dropdown-input-clear gl-absolute gl-top-3 gl-right-5 gl-text-gray-500"
             />
           </div>
           <div class="dropdown-content"></div>

ee/app/assets/javascripts/boards/components/epic_lane.vue

@@ -141,7 +141,7 @@ export default {
         <span
           v-gl-tooltip.hover
           :title="issuesCountTooltipText"
-          class="gl-display-flex gl-align-items-center gl-text-gray-700"
+          class="gl-display-flex gl-align-items-center gl-text-gray-500"
           tabindex="0"
           :aria-label="issuesCountTooltipText"
           data-testid="epic-lane-issue-count"

ee/app/assets/javascripts/boards/components/epics_swimlanes.vue

@@ -114,7 +114,7 @@ export default {
           <span
             v-gl-tooltip.hover
             :title="unassignedIssuesCountTooltipText"
-            class="gl-display-flex gl-align-items-center gl-text-gray-700"
+            class="gl-display-flex gl-align-items-center gl-text-gray-500"
             tabindex="0"
             :aria-label="unassignedIssuesCountTooltipText"
             data-testid="issues-lane-issue-count"

ee/app/assets/javascripts/boards/components/milestone_select.vue

@@ -97,7 +97,7 @@ export default {
           {{ __('Milestone') }}
           <gl-icon
             name="chevron-down"
-            class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-700"
+            class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500"
             :size="16"
           />
         </button>
@@ -115,7 +115,7 @@ export default {
             />
             <gl-icon
               name="close"
-              class="dropdown-input-clear js-dropdown-input-clear gl-right-5 gl-absolute gl-top-3 gl-text-gray-700"
+              class="dropdown-input-clear js-dropdown-input-clear gl-right-5 gl-absolute gl-top-3 gl-text-gray-500"
             />
           </div>
           <div class="dropdown-content"></div>

ee/app/assets/javascripts/compliance_dashboard/components/merge_requests/approvers.vue

@@ -47,7 +47,7 @@ export default {
 
 <template>
   <div class="gl-display-flex gl-align-items-center gl-justify-content-end" data-testid="approvers">
-    <span class="gl-text-gray-700">
+    <span class="gl-text-gray-500">
       <template v-if="hasApprovers">
         {{ $options.strings.approvedBy }}
       </template>

ee/app/assets/javascripts/compliance_dashboard/components/merge_requests/grid.vue

@@ -106,7 +106,7 @@ export default {
               uri: mergeRequest.target_branch_uri,
             }"
           />
-          <span class="gl-text-gray-700">
+          <span class="gl-text-gray-500">
             <time v-gl-tooltip.bottom="timeTooltip(mergeRequest.merged_at)">{{
               timeAgoString(mergeRequest.merged_at)
             }}</time>

ee/app/assets/javascripts/compliance_dashboard/components/merge_requests/merge_request.vue

@@ -28,8 +28,8 @@ export default {
     <a :href="mergeRequest.path" class="gl-display-block gl-text-gray-900 gl-font-weight-bold">
       {{ mergeRequest.title }}
     </a>
-    <span class="gl-text-gray-700">{{ mergeRequest.issuable_reference }}</span>
-    <span class="issuable-authored gl-text-gray-700 gl-display-inline-flex gl-align-items-center">
+    <span class="gl-text-gray-500">{{ mergeRequest.issuable_reference }}</span>
+    <span class="issuable-authored gl-text-gray-500 gl-display-inline-flex gl-align-items-center">
       - {{ $options.strings.createdBy }}
       <gl-avatar-link
         :key="mergeRequest.author.id"

ee/app/assets/javascripts/compliance_dashboard/components/shared/grid_column_heading.vue

@@ -11,7 +11,7 @@ export default {
 
 <template>
   <p
-    class="grid-column-heading gl-text-gray-700 gl-border-b-solid gl-border-b-2 gl-border-b-gray-100 gl-mb-0 gl-p-5"
+    class="grid-column-heading gl-text-gray-500 gl-border-b-solid gl-border-b-2 gl-border-b-gray-100 gl-mb-0 gl-p-5"
   >
     {{ heading }}
   </p>

ee/app/assets/javascripts/geo_node_form/components/geo_node_form_core.vue

@@ -71,7 +71,7 @@ export default {
           type="text"
           @update="checkName"
         />
-        <span class="gl-text-gray-700 m-n5 gl-z-index-2">{{ 255 - nodeData.name.length }}</span>
+        <span class="gl-text-gray-500 m-n5 gl-z-index-2">{{ 255 - nodeData.name.length }}</span>
       </div>
     </gl-form-group>
     <section class="form-row">
@@ -108,7 +108,7 @@ export default {
             type="text"
             @update="checkUrl"
           />
-          <span class="gl-text-gray-700 m-n5 gl-z-index-2">{{ 255 - nodeData.url.length }}</span>
+          <span class="gl-text-gray-500 m-n5 gl-z-index-2">{{ 255 - nodeData.url.length }}</span>
         </div>
       </gl-form-group>
       <gl-form-group
@@ -127,7 +127,7 @@ export default {
             class="gl-pr-8!"
             type="text"
           />
-          <span class="gl-text-gray-700 m-n5 gl-z-index-2">{{
+          <span class="gl-text-gray-500 m-n5 gl-z-index-2">{{
             255 - nodeData.internalUrl.length
           }}</span>
         </div>

ee/app/assets/javascripts/geo_nodes/components/geo_node_replication_status.vue

@@ -38,7 +38,7 @@ export default {
 
 <template>
   <div class="mt-2 detail-section-item">
-    <div class="gl-text-gray-700 node-detail-title">{{ s__('GeoNodes|Replication status') }}</div>
+    <div class="gl-text-gray-500 node-detail-title">{{ s__('GeoNodes|Replication status') }}</div>
     <div class="gl-display-flex gl-align-items-center">
       <div
         :class="replicationStatusCssClass"

ee/app/assets/javascripts/geo_nodes/components/node_detail_sections/node_details_section_main.vue

@@ -76,7 +76,7 @@ export default {
     <div class="col-md-12">
       <div class="gl-display-flex gl-flex-wrap gl-flex-direction-column gl-sm-flex-direction-row">
         <div data-testid="nodeUrl" class="d-flex flex-column">
-          <span class="gl-text-gray-700">{{ s__('GeoNodes|Node URL') }}</span>
+          <span class="gl-text-gray-500">{{ s__('GeoNodes|Node URL') }}</span>
           <gl-link
             class="gl-display-flex gl-align-items-center gl-text-body gl-font-weight-bold gl-text-decoration-underline gl-mt-1"
             :href="node.url"
@@ -94,7 +94,7 @@ export default {
         />
       </div>
       <div data-testid="nodeVersion" class="d-flex flex-column mt-2">
-        <span class="gl-text-gray-700">{{ s__('GeoNodes|GitLab version') }}</span>
+        <span class="gl-text-gray-500">{{ s__('GeoNodes|GitLab version') }}</span>
         <span :class="{ 'gl-text-red-500': versionMismatch }" class="gl-mt-1 gl-font-weight-bold">
           {{ nodeVersion }}
         </span>

ee/app/assets/javascripts/iterations/components/iteration_report_summary.vue

@@ -95,7 +95,7 @@ export default {
       <gl-card :class="$options.cardClass" :body-class="$options.cardBodyClass">
         <span>{{ column.title }}</span>
         <span class="gl-font-size-h2 gl-font-weight-bold">{{ column.value }}</span>
-        <gl-icon v-if="column.icon" name="issues" :size="12" class="gl-text-gray-700" />
+        <gl-icon v-if="column.icon" name="issues" :size="12" class="gl-text-gray-500" />
       </gl-card>
     </div>
   </div>

ee/app/assets/javascripts/related_issues/components/related_issues_block.vue

@@ -140,7 +140,7 @@ export default {
             v-if="hasHelpPath"
             :href="helpPath"
             target="_blank"
-            class="gl-display-flex gl-align-items-center gl-ml-2 gl-text-gray-700"
+            class="gl-display-flex gl-align-items-center gl-ml-2 gl-text-gray-500"
             :aria-label="__('Read more about related issues')"
           >
             <gl-icon name="question" :size="12" role="text" />
@@ -149,7 +149,7 @@ export default {
           <div class="gl-display-inline-flex">
             <div class="js-related-issues-header-issue-count gl-display-inline-flex gl-mx-5">
               <span class="gl-display-inline-flex gl-align-items-center">
-                <gl-icon :name="issuableTypeIcon" class="gl-mr-2 gl-text-gray-700" />
+                <gl-icon :name="issuableTypeIcon" class="gl-mr-2 gl-text-gray-500" />
                 {{ badgeLabel }}
               </span>
             </div>

ee/app/assets/javascripts/related_items_tree/components/epic_health_status.vue

@@ -50,11 +50,11 @@ export default {
         {{ healthStatus.issuesOnTrack }}
       </span>
     </span>
-    <span class="gl-mr-2 mr-md-2 gl-text-gray-700 health-label-long gl-display-none!">
+    <span class="gl-mr-2 mr-md-2 gl-text-gray-500 health-label-long gl-display-none!">
       {{ __('issues on track') }}
     </span>
     <span
-      class="gl-mr-2 mr-md-2 gl-text-gray-700 gl-str-truncated health-label-short gl-display-none!"
+      class="gl-mr-2 mr-md-2 gl-text-gray-500 gl-str-truncated health-label-short gl-display-none!"
       >{{ __('on track') }}</span
     >
 
@@ -63,11 +63,11 @@ export default {
         {{ healthStatus.issuesNeedingAttention }}
       </span>
     </span>
-    <span class="gl-mr-2 mr-md-2 gl-text-gray-700 health-label-long gl-display-none!">
+    <span class="gl-mr-2 mr-md-2 gl-text-gray-500 health-label-long gl-display-none!">
       {{ __('issues need attention') }}
     </span>
     <span
-      class="gl-mr-2 mr-md-2 gl-text-gray-700 gl-str-truncated health-label-short gl-display-none!"
+      class="gl-mr-2 mr-md-2 gl-text-gray-500 gl-str-truncated health-label-short gl-display-none!"
       >{{ __('need attention') }}</span
     >
 
@@ -76,10 +76,10 @@ export default {
         {{ healthStatus.issuesAtRisk }}
       </span>
     </span>
-    <span class="gl-text-gray-700 health-label-long gl-display-none!">
+    <span class="gl-text-gray-500 health-label-long gl-display-none!">
       {{ __('issues at risk') }}
     </span>
-    <span class="gl-text-gray-700 gl-str-truncated health-label-short gl-display-none!">
+    <span class="gl-text-gray-500 gl-str-truncated health-label-short gl-display-none!">
       {{ __('at risk') }}
     </span>
   </div>

ee/app/assets/javascripts/requirements/components/requirement_item.vue

@@ -200,7 +200,7 @@ export default {
         </div>
         <div class="gl-p-2 gl-w-full">
           <h5 class="gl-m-0">{{ author.name }}</h5>
-          <div class="gl-text-gray-700 gl-mb-3">@{{ author.username }}</div>
+          <div class="gl-text-gray-500 gl-mb-3">@{{ author.username }}</div>
         </div>
       </div>
     </gl-popover>

ee/app/assets/javascripts/security_dashboard/components/first_class_vulnerability_severities.vue

@@ -138,7 +138,7 @@ export default {
           ><gl-icon name="question"
         /></gl-link>
       </h4>
-      <p class="gl-text-gray-700 gl-m-0">
+      <p class="gl-text-gray-500 gl-m-0">
         {{ __('Projects are graded based on the highest severity vulnerability present') }}
       </p>
     </header>
@@ -162,13 +162,13 @@ export default {
               >
                 {{ severityGroup.type }}
               </span>
-              <span :class="{ 'gl-font-weight-bold': isExpanded, 'gl-text-gray-700': isDisabled }">
+              <span :class="{ 'gl-font-weight-bold': isExpanded, 'gl-text-gray-500': isDisabled }">
                 {{ n__('%d project', '%d projects', severityGroup.projects.length) }}
               </span>
             </h5>
           </template>
           <template #subTitle>
-            <p class="gl-m-0 ml-5 gl-pb-2 gl-text-gray-700">{{ severityGroup.warning }}</p>
+            <p class="gl-m-0 ml-5 gl-pb-2 gl-text-gray-500">{{ severityGroup.warning }}</p>
           </template>
           <div class="gl-ml-7 gl-pb-3">
             <ul class="list-unstyled gl-py-2">

ee/app/assets/javascripts/security_dashboard/components/security_dashboard_table_row.vue

@@ -147,7 +147,7 @@ export default {
             :project-name="vulnerability.project.name"
           />
           <br />
-          <small v-if="vulnerabilityNamespace" class="gl-text-gray-700 gl-word-break-all">
+          <small v-if="vulnerabilityNamespace" class="gl-text-gray-500 gl-word-break-all">
             {{ vulnerabilityNamespace }}
           </small>
         </template>

ee/app/assets/javascripts/storage_counter/components/usage_graph.vue

@@ -113,7 +113,7 @@ export default {
         <span class="gl-mr-2 gl-font-weight-bold gl-font-sm">
           {{ storageType.name }}
         </span>
-        <span class="gl-text-gray-700 gl-font-sm">
+        <span class="gl-text-gray-500 gl-font-sm">
           {{ formatSize(storageType.size) }}
         </span>
       </div>

ee/app/assets/javascripts/user_lists/components/user_list.vue

@@ -96,7 +96,7 @@ export default {
       <div :class="$options.classes.headerClasses">
         <div>
           <h3>{{ name }}</h3>
-          <h4 class="gl-text-gray-700">{{ $options.translations.userIdLabel }}</h4>
+          <h4 class="gl-text-gray-500">{{ $options.translations.userIdLabel }}</h4>
         </div>
         <div class="gl-mt-6">
           <gl-button v-if="editPath" :href="editPath" data-testid="edit-user-list" class="gl-mr-3">

ee/app/assets/javascripts/user_lists/components/user_list_form.vue

@@ -67,7 +67,7 @@ export default {
         <h4 class="gl-min-width-fit-content gl-white-space-nowrap">
           {{ $options.translations.formLabel }}
         </h4>
-        <gl-sprintf :message="$options.translations.formSubtitle" class="gl-text-gray-700">
+        <gl-sprintf :message="$options.translations.formSubtitle" class="gl-text-gray-500">
           <template #link="{ content }">
             <gl-link :href="userListsDocsPath" data-testid="user-list-docs-link">
               {{ content }}

ee/app/assets/stylesheets/components/deployment_instance.scss

@@ -49,7 +49,7 @@
 
   &-pending {
     background-color: $gray-200;
-    border-color: $gray-700;
+    border-color: $gray-500;
 
     &.link:hover {
       background-color: $gray-300;
@@ -59,7 +59,7 @@
 
   &-unknown {
     background-color: $white;
-    border-color: $gray-700;
+    border-color: $gray-500;
 
     &.link:hover {
       background-color: $white;

ee/app/assets/stylesheets/pages/environments.scss

@@ -149,11 +149,11 @@
 
   &-message {
     max-width: 600px;
-    color: $gray-700;
+    color: $gray-500;
   }
 
   &-close {
-    color: $gray-700;
+    color: $gray-500;
     cursor: pointer;
   }
 

ee/app/assets/stylesheets/pages/epics.scss

@@ -114,7 +114,7 @@
     @include gl-white-space-nowrap;
 
     .gl-button-text {
-      @include gl-text-gray-700;
+      @include gl-text-gray-500;
       @include gl-display-flex;
       @include gl-justify-content-space-between;
       @include gl-w-full;

ee/app/assets/stylesheets/pages/licenses.scss

@@ -33,7 +33,7 @@
   flex-basis: 0;
 
   .title {
-    color: $gray-700;
+    color: $gray-500;
     line-height: $gl-line-height;
   }
 

ee/app/assets/stylesheets/pages/roadmap.scss

@@ -417,7 +417,7 @@ html.group-epics-roadmap-html {
 
     .timeline-bar-wrapper {
       height: $timeline-cell-height;
-      color: $gray-700;
+      color: $gray-500;
     }
 
     .milestone-start-and-end {
@@ -508,7 +508,7 @@ html.group-epics-roadmap-html {
 
     .timeline-bar {
       width: 100%;
-      background-color: $gray-700;
+      background-color: $gray-500;
       height: 2px;
       z-index: 1;
       bottom: 4px;
@@ -523,13 +523,13 @@ html.group-epics-roadmap-html {
 
       &::before {
         width: 2px;
-        background-color: $gray-700;
+        background-color: $gray-500;
       }
 
       &::after {
         right: -3px;
         width: 8px;
-        border: 2px solid $gray-700;
+        border: 2px solid $gray-500;
         border-radius: 4px;
         background-color: $white;
       }
@@ -557,6 +557,6 @@ html.group-epics-roadmap-html {
 }
 
 .milestone-item-date {
-  color: $gray-700;
+  color: $gray-500;
   padding-top: $gl-spacing-scale-1;
 }

ee/app/assets/stylesheets/pages/subscriptions.scss

@@ -45,7 +45,7 @@ $subscriptions-full-width-lg: 541px;
 
     .phase {
       border-bottom: 5px solid $gray-100;
-      color: $gray-700;
+      color: $gray-500;
       flex-basis: 100%;
       font-size: $gl-font-size-12;
       line-height: $gl-line-height;

ee/app/views/dashboard/projects/_removed_empty_state.html.haml

@@ -5,5 +5,5 @@
     .text-content
       %h4.gl-text-center
         = s_("RemovedProjects|You haven’t removed any projects.")
-      %p.gl-text-gray-700
+      %p.gl-text-gray-500
         = s_("RemovedProjects|Projects which are removed and are yet to be permanently removed are visible here.")

ee/app/views/groups/contribution_analytics/show.html.haml

@@ -8,7 +8,7 @@
   .sub-header-block
     .float-right
       .dropdown.inline
-        %button.dropdown-toggle.btn.gl-text-gray-700{ type: 'button', 'data-toggle' => 'dropdown' }
+        %button.dropdown-toggle.btn.gl-text-gray-500{ type: 'button', 'data-toggle' => 'dropdown' }
           = sprite_icon('calendar')
           %b.caret
         %ul.dropdown-menu.dropdown-menu-right

ee/changelogs/unreleased/224122-replace-gray-700-value-replace-usages-with-gray-500.yml

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

ee/spec/frontend/compliance_dashboard/components/merge_requests/__snapshots__/approvers_spec.js.snap

@@ -6,7 +6,7 @@ exports[`MergeRequest component when there are approvers matches snapshot 1`] =
   data-testid="approvers"
 >
   <span
-    class="gl-text-gray-700"
+    class="gl-text-gray-500"
   >
     
       approved by: 

ee/spec/frontend/compliance_dashboard/components/merge_requests/__snapshots__/grid_spec.js.snap

@@ -48,7 +48,7 @@ exports[`MergeRequestsGrid component when intialized matches the snapshot 1`] =
       <!---->
        
       <span
-        class="gl-text-gray-700"
+        class="gl-text-gray-500"
       >
         <time>
           merged 2 days ago
@@ -79,7 +79,7 @@ exports[`MergeRequestsGrid component when intialized matches the snapshot 1`] =
       <!---->
        
       <span
-        class="gl-text-gray-700"
+        class="gl-text-gray-500"
       >
         <time>
           merged 2 days ago

ee/spec/frontend/compliance_dashboard/components/merge_requests/__snapshots__/merge_request_spec.js.snap

@@ -15,13 +15,13 @@ exports[`MergeRequest component when there is a merge request matches the snapsh
   </a>
    
   <span
-    class="gl-text-gray-700"
+    class="gl-text-gray-500"
   >
     !1
   </span>
    
   <span
-    class="issuable-authored gl-text-gray-700 gl-display-inline-flex gl-align-items-center"
+    class="issuable-authored gl-text-gray-500 gl-display-inline-flex gl-align-items-center"
   >
     
     - created by:

ee/spec/frontend/compliance_dashboard/components/shared/__snapshots__/grid_column_heading_spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`GridColumnHeading component behaviour matches the screenshot 1`] = `
 <p
-  class="grid-column-heading gl-text-gray-700 gl-border-b-solid gl-border-b-2 gl-border-b-gray-100 gl-mb-0 gl-p-5"
+  class="grid-column-heading gl-text-gray-500 gl-border-b-solid gl-border-b-2 gl-border-b-gray-100 gl-mb-0 gl-p-5"
 >
   
   Test heading

ee/spec/frontend/geo_nodes/components/node_detail_sections/__snapshots__/node_details_section_main_spec.js.snap

@@ -6,7 +6,7 @@ exports[`NodeDetailsSectionMain template node url section renders section correc
   data-testid="nodeUrl"
 >
   <span
-    class="gl-text-gray-700"
+    class="gl-text-gray-500"
   >
     Node URL
   </span>
@@ -36,7 +36,7 @@ exports[`NodeDetailsSectionMain template node version section renders section co
   data-testid="nodeVersion"
 >
   <span
-    class="gl-text-gray-700"
+    class="gl-text-gray-500"
   >
     GitLab version
   </span>

spec/frontend/design_management/components/upload/design_dropzone_spec.js

@@ -140,7 +140,7 @@ describe('Design management dropzone component', () => {
   it('applies correct classes when there are no designs or no design saving loader', () => {
     createComponent({ props: { hasDesigns: false } });
     expect(findDropzoneArea().classes()).not.toContain('gl-flex-direction-column');
-    expect(findIcon().classes()).toEqual(['gl-mr-3', 'gl-text-gray-700']);
+    expect(findIcon().classes()).toEqual(['gl-mr-3', 'gl-text-gray-500']);
     expect(findIcon().props('size')).toBe(16);
   });
 

spec/frontend/packages/details/components/__snapshots__/package_title_spec.js.snap

@@ -21,7 +21,7 @@ exports[`PackageTitle renders with tags 1`] = `
       </h1>
        
       <div
-        class="gl-display-flex gl-align-items-center gl-text-gray-700"
+        class="gl-display-flex gl-align-items-center gl-text-gray-500"
       >
         <gl-icon-stub
           class="gl-mr-3"
@@ -43,7 +43,7 @@ exports[`PackageTitle renders with tags 1`] = `
       class="gl-display-flex gl-align-items-center gl-mr-5"
     >
       <gl-icon-stub
-        class="gl-text-gray-700 gl-mr-3"
+        class="gl-text-gray-500 gl-mr-3"
         name="package"
         size="16"
       />
@@ -73,7 +73,7 @@ exports[`PackageTitle renders with tags 1`] = `
       class="gl-display-flex gl-align-items-center gl-mr-5"
     >
       <gl-icon-stub
-        class="gl-text-gray-700 gl-mr-3"
+        class="gl-text-gray-500 gl-mr-3"
         name="disk"
         size="16"
       />
@@ -110,7 +110,7 @@ exports[`PackageTitle renders without tags 1`] = `
       </h1>
        
       <div
-        class="gl-display-flex gl-align-items-center gl-text-gray-700"
+        class="gl-display-flex gl-align-items-center gl-text-gray-500"
       >
         <gl-icon-stub
           class="gl-mr-3"
@@ -132,7 +132,7 @@ exports[`PackageTitle renders without tags 1`] = `
       class="gl-display-flex gl-align-items-center gl-mr-5"
     >
       <gl-icon-stub
-        class="gl-text-gray-700 gl-mr-3"
+        class="gl-text-gray-500 gl-mr-3"
         name="package"
         size="16"
       />
@@ -155,7 +155,7 @@ exports[`PackageTitle renders without tags 1`] = `
       class="gl-display-flex gl-align-items-center gl-mr-5"
     >
       <gl-icon-stub
-        class="gl-text-gray-700 gl-mr-3"
+        class="gl-text-gray-500 gl-mr-3"
         name="disk"
         size="16"
       />

spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap

@@ -60,7 +60,7 @@ exports[`Snippet Description Edit component rendering matches the snapshot 1`] =
            
           <a
             aria-label="Leave zen mode"
-            class="zen-control zen-control-leave js-zen-leave gl-text-gray-700"
+            class="zen-control zen-control-leave js-zen-leave gl-text-gray-500"
             href="#"
           >
             <icon-stub