Update $gray-500 variable

Update $gray-500 hex value and replace instances with $gray-300

app/assets/javascripts/registry/explorer/components/list_item.vue

@@ -88,7 +88,7 @@ export default {
           </div>
         </div>
         <div
-          class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-font-sm gl-text-gray-500"
+          class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-font-sm gl-text-gray-300"
         >
           <div>
             <slot name="left-secondary"></slot>

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

@@ -82,7 +82,7 @@ export default {
         :disabled="item.deleting"
         :text="item.location"
         :title="item.location"
-        css-class="btn-default btn-transparent btn-clipboard gl-text-gray-500"
+        css-class="btn-default btn-transparent btn-clipboard gl-text-gray-300"
       />
       <gl-icon
         v-if="item.failedDelete"

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

@@ -18,7 +18,7 @@ export default {
     />
     <gl-icon
       name="search"
-      class="dropdown-input-search gl-absolute gl-top-3 gl-right-5 gl-text-gray-500 gl-pointer-events-none"
+      class="dropdown-input-search gl-absolute gl-top-3 gl-right-5 gl-text-gray-300 gl-pointer-events-none"
     />
     <gl-icon
       name="close"

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

@@ -76,7 +76,7 @@ export default {
 <template>
   <gl-new-dropdown :text="value" block lazy menu-class="gl-w-full!">
     <template #button-content>
-      <span class="gl-flex-grow-1" :class="{ 'gl-text-gray-500': !value }">
+      <span class="gl-flex-grow-1" :class="{ 'gl-text-gray-300': !value }">
         {{ selectedTimezoneLabel }}
       </span>
       <gl-icon name="chevron-down" />

app/assets/stylesheets/components/dashboard_skeleton.scss

@@ -25,7 +25,7 @@
   }
 
   &-icon {
-    color: $gray-500;
+    color: $gray-300;
   }
 
   &-footer {

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

@@ -164,7 +164,7 @@
   }
 
   &:hover {
-    border-color: $gray-500;
+    border-color: $gray-300;
   }
 }
 

app/assets/stylesheets/framework/gitlab_theme.scss

@@ -295,7 +295,7 @@ body {
   &.ui-dark {
     @include gitlab-theme(
       $gray-200,
-      $gray-500,
+      $gray-300,
       $gray-700,
       $gray-800,
       $gray-900,

app/assets/stylesheets/framework/icons.scss

@@ -34,11 +34,11 @@
 
 .ci-status-icon-preparing {
   svg {
-    fill: $gray-500;
+    fill: $gray-300;
   }
 
   &.add-border {
-    @include borderless-status-icon($gray-500);
+    @include borderless-status-icon($gray-300);
   }
 }
 

app/assets/stylesheets/framework/sidebar.scss

@@ -168,7 +168,7 @@
 
     &::before {
       content: '';
-      border-left: 1px solid $gray-500;
+      border-left: 1px solid $gray-300;
       position: absolute;
       top: $gl-padding;
       bottom: $gl-padding;

app/assets/stylesheets/framework/variables.scss

@@ -167,7 +167,7 @@ $gray-100: #dbdbdb !default;
 $gray-200: #bfbfbf !default;
 $gray-300: #999 !default;
 $gray-400: #868686 !default;
-$gray-500: #a7a7a7 !default;
+$gray-500: #666 !default;
 $gray-600: #919191 !default;
 $gray-700: #707070 !default;
 $gray-800: #4f4f4f !default;

app/assets/stylesheets/pages/graph.scss

@@ -70,5 +70,5 @@
 
 .animate-flicker {
   animation: flickerAnimation 1.5s infinite;
-  fill: $gray-500;
+  fill: $gray-300;
 }

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-500, $gray-600, $gray-700);
+    @include mini-pipeline-graph-color($white, $gray-100, $gray-200, $gray-300, $gray-600, $gray-700);
   }
 }
 

app/assets/stylesheets/pages/prometheus.scss

@@ -48,7 +48,7 @@
 
   &.sortable-chosen .draggable-panel {
     background: $white;
-    box-shadow: 0 0 4px $gray-500;
+    box-shadow: 0 0 4px $gray-300;
   }
 
   .draggable-remove {

app/assets/stylesheets/pages/status.scss

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

changelogs/unreleased/224120-replace-gray-500-value-replace-usages-with-gray-300.yml

+---
+title: ee Updating $gray-500 hex value and replacing instances with $gray-300
+merge_request: 38229
+author:
+type: other

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

@@ -153,7 +153,7 @@ dropdown-menu-user dropdown-menu-selectable dropdown-menu-author"
             />
             <gl-icon
               name="search"
-              class="dropdown-input-search gl-absolute gl-top-3 gl-right-5 gl-text-gray-500 gl-pointer-events-none"
+              class="dropdown-input-search gl-absolute gl-top-3 gl-right-5 gl-text-gray-300 gl-pointer-events-none"
             />
             <gl-icon
               name="close"

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

@@ -111,7 +111,7 @@ export default {
             />
             <gl-icon
               name="search"
-              class="dropdown-input-search gl-absolute gl-top-3 gl-right-5 gl-text-gray-500 gl-pointer-events-none"
+              class="dropdown-input-search gl-absolute gl-top-3 gl-right-5 gl-text-gray-300 gl-pointer-events-none"
             />
             <gl-icon
               name="close"

ee/app/assets/javascripts/feature_flags/components/user_lists_table.vue

@@ -81,7 +81,7 @@ export default {
           v-gl-tooltip
           :title="tooltipTitle(list.created_at)"
           data-testid="ffUserListTimestamp"
-          class="gl-text-gray-500 gl-mb-2"
+          class="gl-text-gray-300 gl-mb-2"
         >
           {{ createdTimeago(list) }}
         </span>

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

@@ -23,7 +23,7 @@ export default {
     severityLevels: {
       [severityLevels.CRITICAL]: 'gl-text-red-900',
       [severityLevels.HIGH]: 'gl-text-red-700',
-      [severityLevels.UNKNOWN]: 'gl-text-gray-500',
+      [severityLevels.UNKNOWN]: 'gl-text-gray-300',
       [severityLevels.MEDIUM]: 'gl-text-orange-600',
       [severityLevels.LOW]: 'gl-text-orange-500',
       [severityLevels.NONE]: 'gl-text-green-500',

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

@@ -160,7 +160,7 @@ export default {
         <div class="gl-text-overflow-ellipsis gl-overflow-hidden" :title="vulnerabilityIdentifier">
           {{ vulnerabilityIdentifier }}
         </div>
-        <div v-if="shouldShowExtraIdentifierCount" class="gl-text-gray-500">
+        <div v-if="shouldShowExtraIdentifierCount" class="gl-text-gray-300">
           <gl-sprintf :message="__('+ %{count} more')">
             <template #count>
               {{ extraIdentifierCount }}
@@ -176,7 +176,7 @@ export default {
         <div class="text-capitalize">
           {{ useConvertReportType }}
         </div>
-        <div v-if="vulnerabilityVendor" class="gl-text-gray-500" data-testid="vulnerability-vendor">
+        <div v-if="vulnerabilityVendor" class="gl-text-gray-300" data-testid="vulnerability-vendor">
           {{ vulnerabilityVendor }}
         </div>
       </div>

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

@@ -346,7 +346,7 @@ export default {
         <div
           v-if="shouldShowExtraIdentifierCount(item.identifiers)"
           data-testid="vulnerability-more-identifiers"
-          class="gl-text-gray-500"
+          class="gl-text-gray-300"
         >
           <gl-sprintf :message="__('+ %{count} more')">
             <template #count>
@@ -360,7 +360,7 @@ export default {
         <div data-testid="vulnerability-report-type" class="text-capitalize">
           {{ useConvertReportType(item.reportType) }}
         </div>
-        <div data-testid="vulnerability-vendor" class="gl-text-gray-500">
+        <div data-testid="vulnerability-vendor" class="gl-text-gray-300">
           {{ item.scanner.vendor }}
         </div>
       </template>

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

@@ -23,7 +23,7 @@ export default {
     severityLevels: {
       [severityLevels.CRITICAL]: 'gl-text-red-900',
       [severityLevels.HIGH]: 'gl-text-red-700',
-      [severityLevels.UNKNOWN]: 'gl-text-gray-500',
+      [severityLevels.UNKNOWN]: 'gl-text-gray-300',
       [severityLevels.MEDIUM]: 'gl-text-orange-600',
       [severityLevels.LOW]: 'gl-text-orange-500',
       [severityLevels.NONE]: 'gl-text-green-500',

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

@@ -52,7 +52,7 @@
     border-color: $gray-700;
 
     &.link:hover {
-      background-color: $gray-500;
+      background-color: $gray-300;
       border-color: $gray-900;
     }
   }

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

@@ -7,7 +7,7 @@ $label-blue: #428bca;
 
 .badge-inactive {
   color: $white;
-  background-color: $gray-500;
+  background-color: $gray-300;
 }
 
 .seach-icon-input,