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.

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.
490bea5c · jeldergl · baf8fccc · 490bea5c · 490bea5c · 490bea5c
Commit 490bea5c authored Aug 02, 2020 by jeldergl
29 changed files
--- a/app/assets/javascripts/design_management/components/design_sidebar.vue
+++ b/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
    >

--- a/app/assets/javascripts/design_management_legacy/components/design_sidebar.vue
+++ b/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
    >

--- a/app/assets/javascripts/packages/list/coming_soon/packages_coming_soon.vue
+++ b/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
              >

--- a/app/assets/javascripts/ref/components/ref_results_section.vue
+++ b/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">{{

--- a/app/assets/javascripts/ref/components/ref_selector.vue
+++ b/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>

--- a/app/assets/javascripts/releases/components/release_block_assets.vue
+++ b/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>

--- a/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue
+++ b/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"
    >

--- a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
+++ b/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">

--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -509,7 +509,7 @@ img.emoji {
  }

  &.is-dragging {
-    background-color: $gray-600;
+    background-color: $gray-400;
  }
 }


--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -209,7 +209,7 @@
      }

      .doc-versions {
-        color: $gray-600;
+        color: $gray-400;

        &:hover {
          color: $gray-900;

--- a/app/assets/stylesheets/framework/forms.scss
+++ b/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 {

--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/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;

--- a/app/assets/stylesheets/framework/variables.scss
+++ b/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;

--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -166,6 +166,6 @@

 .cluster-status-indicator {
  &.disabled {
-    background-color: $gray-600;
+    background-color: $gray-400;
  }
 }
--- a/app/assets/stylesheets/pages/incident_management_list.scss
+++ b/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');

--- a/app/assets/stylesheets/pages/notes.scss
+++ b/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;

--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/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);
  }
 }


--- a/app/assets/stylesheets/pages/prometheus.scss
+++ b/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;
      }
    }

--- a/app/assets/stylesheets/pages/status.scss
+++ b/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,

--- a/app/views/admin/services/index.html.haml
+++ b/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

--- a/app/views/shared/issuable/form/_merge_params.html.haml
+++ b/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.')
--- a/ee/app/assets/javascripts/on_demand_scans/components/on_demand_scans_form.vue
+++ b/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>

--- a/ee/app/assets/javascripts/vue_shared/security_reports/components/dast_modal.vue
+++ b/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>

--- a/ee/app/assets/stylesheets/pages/roadmap.scss
+++ b/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 {

--- a/ee/app/views/groups/settings/_delayed_project_removal.html.haml
+++ b/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) }
--- a/ee/changelogs/unreleased/224121-replace-gray-600-value-replace-usages-with-gray-400.yml
+++ b/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
--- a/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap
+++ b/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

--- a/spec/frontend/design_management_legacy/pages/design/__snapshots__/index_spec.js.snap
+++ b/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

--- a/spec/frontend/vue_mr_widget/components/states/mr_widget_squash_before_merge_spec.js
+++ b/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);
      });
    });
  });