Merge branch '224121-replace-gray-600-value-replace-usages-with-gray-400' into 'master'

Replace $gray-600 value, replace usages with $gray-400

Closes #224121

See merge request gitlab-org/gitlab!38448

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

app/views/shared/issuable/form/_merge_params.html.haml

@@ -27,5 +27,5 @@
           Squash commits when merge request is accepted.
           = link_to icon('question-circle'), help_page_path('user/project/merge_requests/squash_and_merge'), target: '_blank'
         - if project.squash_always?
-          .gl-text-gray-600
+          .gl-text-gray-400
             = _('Required in this project.')

ee/app/assets/javascripts/on_demand_scans/components/on_demand_scans_form.vue

@@ -126,7 +126,7 @@ export default {
     <header class="gl-mb-6">
       <h2>{{ s__('OnDemandScans|New on-demand DAST scan') }}</h2>
       <p>
-        <gl-icon name="information-o" class="gl-vertical-align-text-bottom gl-text-gray-600" />
+        <gl-icon name="information-o" class="gl-vertical-align-text-bottom gl-text-gray-400" />
         <gl-sprintf
           :message="
             s__(
@@ -149,7 +149,7 @@ export default {
         <gl-icon
           v-gl-tooltip.hover
           name="information-o"
-          class="gl-vertical-align-text-bottom gl-text-gray-600"
+          class="gl-vertical-align-text-bottom gl-text-gray-400"
           :title="s__('OnDemandScans|Only a passive scan can be performed on demand.')"
         />
       </template>
@@ -162,7 +162,7 @@ export default {
         <gl-icon
           v-gl-tooltip.hover
           name="information-o"
-          class="gl-vertical-align-text-bottom gl-text-gray-600"
+          class="gl-vertical-align-text-bottom gl-text-gray-400"
           :title="s__('OnDemandScans|Attached branch is where the scan job runs.')"
         />
       </template>
@@ -175,7 +175,7 @@ export default {
         <gl-icon
           v-gl-tooltip.hover
           name="information-o"
-          class="gl-vertical-align-text-bottom gl-text-gray-600"
+          class="gl-vertical-align-text-bottom gl-text-gray-400"
           :title="s__('OnDemandScans|DAST will scan the target URL and any discovered sub URLs.')"
         />
       </template>

ee/app/assets/javascripts/vue_shared/security_reports/components/dast_modal.vue

@@ -57,7 +57,7 @@ export default {
     :action-secondary="downloadButton"
   >
     <!-- heading -->
-    <div class="row gl-text-gray-600">
+    <div class="row gl-text-gray-400">
       <div class="col-1">{{ __('Method') }}</div>
       <div class="col-11">{{ __('URL') }}</div>
     </div>

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

@@ -195,7 +195,7 @@ html.group-epics-roadmap-html {
 
     .item-label,
     .item-sublabel .sublabel-value {
-      color: $gray-600;
+      color: $gray-400;
       font-weight: 400;
 
       &.label-dark {

ee/app/views/groups/settings/_delayed_project_removal.html.haml

@@ -5,4 +5,4 @@
     = f.check_box :delayed_project_removal, checked: group.delayed_project_removal?, class: 'form-check-input'
     = f.label :delayed_project_removal, class: 'form-check-label' do
       %span.gl-display-block= s_('GroupSettings|Enable delayed project removal')
-      %span.gl-text-gray-600= s_('GroupSettings|Projects will be permanently deleted after a %{waiting_period}-day waiting period. This period can be %{customization_link} in instance settings').html_safe % { waiting_period: ::Gitlab::CurrentSettings.deletion_adjourned_period, customization_link: link_to('customized by an admin', general_admin_application_settings_path) }
+      %span.gl-text-gray-400= s_('GroupSettings|Projects will be permanently deleted after a %{waiting_period}-day waiting period. This period can be %{customization_link} in instance settings').html_safe % { waiting_period: ::Gitlab::CurrentSettings.deletion_adjourned_period, customization_link: link_to('customized by an admin', general_admin_application_settings_path) }

ee/changelogs/unreleased/224121-replace-gray-600-value-replace-usages-with-gray-400.yml

+---
+title: Updating $gray-600 hex value and replacing instances with $gray-400
+merge_request: 38448
+author:
+type: other

spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap

@@ -41,7 +41,7 @@ exports[`Design management design index page renders design index 1`] = `
     </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="full-issue-url"
     >
       ull-issue-path
@@ -188,7 +188,7 @@ exports[`Design management design index page with error GlAlert is rendered in c
     </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="full-issue-url"
     >
       ull-issue-path

spec/frontend/design_management_legacy/pages/design/__snapshots__/index_spec.js.snap

@@ -41,7 +41,7 @@ exports[`Design management design index page renders design index 1`] = `
     </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="full-issue-url"
     >
       ull-issue-path
@@ -188,7 +188,7 @@ exports[`Design management design index page with error GlAlert is rendered in c
     </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="full-issue-url"
     >
       ull-issue-path

spec/frontend/vue_mr_widget/components/states/mr_widget_squash_before_merge_spec.js

@@ -79,7 +79,7 @@ describe('Squash before merge component', () => {
       });
 
       it(expectation, () => {
-        expect(findLabel().classes('gl-text-gray-600')).toBe(isDisabled);
+        expect(findLabel().classes('gl-text-gray-400')).toBe(isDisabled);
       });
     });
   });