Updating hex and remapping variables

Make GitLab SCSS match GitLab UI SCSS and remap variables to adjust
UI for the updated hex values.

app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue

@@ -435,7 +435,7 @@ export default {
           data-testid="alert-settings-select"
           @change="resetFormValues"
         />
-        <span class="gl-text-gray-400">
+        <span class="gl-text-gray-200">
           <gl-sprintf :message="$options.i18n.integrationsInfo">
             <template #link="{ content }">
               <gl-link
@@ -474,7 +474,7 @@ export default {
           :placeholder="baseUrlPlaceholder"
           :disabled="!selectedService.active"
         />
-        <span class="gl-text-gray-400">
+        <span class="gl-text-gray-200">
           {{ $options.i18n.apiBaseUrlHelpText }}
         </span>
       </gl-form-group>
@@ -489,7 +489,7 @@ export default {
               />
             </template>
           </gl-form-input-group>
-          <span class="gl-text-gray-400">
+          <span class="gl-text-gray-200">
             {{ prometheusInfo }}
           </span>
         </gl-form-group>

app/assets/javascripts/clusters_list/components/clusters.vue

@@ -231,7 +231,7 @@ export default {
 
         <gl-skeleton-loading v-else-if="loadingNodes" :lines="1" :class="contentAlignClasses" />
 
-        <small v-else class="gl-font-sm gl-font-style-italic gl-text-gray-400">{{
+        <small v-else class="gl-font-sm gl-font-style-italic gl-text-gray-200">{{
           __('Unknown')
         }}</small>
       </template>

app/assets/javascripts/error_tracking/components/stacktrace_entry.vue

@@ -99,7 +99,7 @@ export default {
 
         <gl-sprintf v-if="errorFn" :message="__('%{spanStart}in%{spanEnd} %{errorFn}')">
           <template #span="{content}">
-            <span class="gl-text-gray-400">{{ content }}&nbsp;</span>
+            <span class="gl-text-gray-200">{{ content }}&nbsp;</span>
           </template>
           <template #errorFn>
             <strong>{{ errorFn }}&nbsp;</strong>
@@ -108,7 +108,7 @@ export default {
 
         <gl-sprintf :message="__('%{spanStart}at line%{spanEnd} %{errorLine}%{errorColumn}')">
           <template #span="{content}">
-            <span class="gl-text-gray-400">{{ content }}&nbsp;</span>
+            <span class="gl-text-gray-200">{{ content }}&nbsp;</span>
           </template>
           <template #errorLine>
             <strong>{{ errorLine }}</strong>

app/assets/javascripts/incidents_settings/components/pagerduty_form.vue

@@ -135,7 +135,7 @@ export default {
           </template>
         </gl-form-input-group>
 
-        <div class="gl-text-gray-400 gl-pt-2">
+        <div class="gl-text-gray-200 gl-pt-2">
           <gl-sprintf :message="$options.i18n.webhookUrl.helpText">
             <template #docsLink>
               <gl-link

app/assets/stylesheets/components/dashboard_skeleton.scss

@@ -41,7 +41,7 @@
     }
 
     &-extra {
-      background-color: $gray-400;
+      background-color: $gray-200;
       font-size: 10px;
       line-height: $gl-line-height;
       width: $gl-padding;

app/assets/stylesheets/components/related_items_list.scss

@@ -104,7 +104,7 @@ $item-remove-button-space: 42px;
 
   .bullet-separator {
     font-size: 9px;
-    color: $gray-400;
+    color: $gray-200;
   }
 }
 

app/assets/stylesheets/components/rich_content_editor.scss

@@ -20,11 +20,11 @@
   .tui-popup-wrapper {
     @include gl-overflow-hidden;
     @include gl-rounded-base;
-    @include gl-border-gray-400;
+    @include gl-border-gray-200;
 
     hr {
       @include gl-m-0;
-      @include gl-bg-gray-400;
+      @include gl-bg-gray-200;
     }
 
     button {

app/assets/stylesheets/framework/common.scss

@@ -74,7 +74,7 @@
 
 .hint {
   font-style: italic;
-  color: $gl-gray-400;
+  color: $gl-gray-200;
 }
 
 .light { color: $gl-text-color; }
@@ -168,7 +168,7 @@ table {
 }
 
 p.time {
-  color: $gl-gray-400;
+  color: $gl-gray-200;
   font-size: 90%;
   margin: 30px 3px 3px 2px;
 }

app/assets/stylesheets/framework/typography.scss

@@ -89,10 +89,10 @@
     background-color: $gray-10;
     border-width: 1px;
     border-style: solid;
-    border-color: $gray-100 $gray-100 $gray-400;
+    border-color: $gray-100 $gray-100 $gray-200;
     border-image: none;
     border-radius: 3px;
-    box-shadow: 0 -1px 0 $gray-400 inset;
+    box-shadow: 0 -1px 0 $gray-200 inset;
   }
 
   h1 {

app/assets/stylesheets/framework/variables.scss

@@ -166,7 +166,7 @@ $gray-50: #f0f0f0 !default;
 $gray-100: #dbdbdb !default;
 $gray-200: #bfbfbf !default;
 $gray-300: #999 !default;
-$gray-400: #bababa !default;
+$gray-400: #868686 !default;
 $gray-500: #a7a7a7 !default;
 $gray-600: #919191 !default;
 $gray-700: #707070 !default;

app/assets/stylesheets/pages/alert_management/severity-icons.scss

@@ -21,6 +21,6 @@
   }
 
   .icon-unknown {
-    color: $gray-400;
+    color: $gray-200;
   }
 }

app/assets/stylesheets/pages/projects.scss

@@ -831,7 +831,7 @@
 }
 
 .repository-language-bar-tooltip-share {
-  color: $gray-400;
+  color: $gray-200;
 }
 
 pre.light-well {

changelogs/unreleased/224119-replace-gray-400-value-replace-usages-with-gray-200.yml

+---
+title: Update $gray-400 hex and replace instances of $gray-400 with $gray-200
+merge_request: 37813
+author:
+type: other

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

@@ -45,7 +45,7 @@ export default {
     <gl-dropdown
       right
       :text="dropdownLabel"
-      toggle-class="gl-ml-2 gl-border-none gl-inset-border-1-gray-400! border-radius-default"
+      toggle-class="gl-ml-2 gl-border-none gl-inset-border-1-gray-200! border-radius-default"
     >
       <gl-dropdown-item
         :is-check-item="true"

ee/app/assets/stylesheets/components/audit_logs/sorting_field.scss

 .audit-controls .gl-dropdown-toggle {
   border-color: $gray-100;
   border-radius: 0.25rem;
-  box-shadow: inset 0 0 0 0.0625rem $gray-400;
+  box-shadow: inset 0 0 0 0.0625rem $gray-200;
   padding: 0.5rem 0.75rem;
 }

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

@@ -84,7 +84,7 @@
 .new-epic-form .md-area.gfm-form {
   @include gl-rounded-base;
   @include gl-border-none;
-  @include gl-inset-border-1-gray-400;
+  @include gl-inset-border-1-gray-200;
 
   &.is-focused {
     @include gl-focus($gl-border-size-1, $gray-900);
@@ -92,7 +92,7 @@
   }
 
   .markdown-area::placeholder {
-    @include gl-text-gray-400;
+    @include gl-text-gray-200;
   }
 }
 
@@ -109,7 +109,7 @@
     @include gl-h-auto;
     @include gl-text-left;
     @include gl-border-none;
-    @include gl-inset-border-1-gray-400;
+    @include gl-inset-border-1-gray-200;
     @include gl-rounded-base;
     @include gl-white-space-nowrap;
 

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

@@ -245,7 +245,7 @@
       }
 
       .active {
-        background-color: $gray-400;
+        background-color: $gray-200;
       }
     }
 

spec/frontend/alert_settings/__snapshots__/alert_settings_form_spec.js.snap

@@ -13,14 +13,14 @@ exports[`AlertsSettingsForm with default values renders the initial template 1`]
   </div>
   <gl-form-stub>
     <gl-form-group-stub label=\\"Integrations\\" label-for=\\"integrations\\" label-class=\\"label-bold\\">
-      <gl-form-select-stub options=\\"[object Object],[object Object],[object Object]\\" data-testid=\\"alert-settings-select\\" value=\\"generic\\"></gl-form-select-stub> <span class=\\"gl-text-gray-400\\"><gl-sprintf-stub message=\\"Learn more about our %{linkStart}upcoming integrations%{linkEnd}\\"></gl-sprintf-stub></span>
+      <gl-form-select-stub options=\\"[object Object],[object Object],[object Object]\\" data-testid=\\"alert-settings-select\\" value=\\"generic\\"></gl-form-select-stub> <span class=\\"gl-text-gray-200\\"><gl-sprintf-stub message=\\"Learn more about our %{linkStart}upcoming integrations%{linkEnd}\\"></gl-sprintf-stub></span>
     </gl-form-group-stub>
     <gl-form-group-stub label=\\"Active\\" label-for=\\"activated\\" label-class=\\"label-bold\\">
       <toggle-button-stub id=\\"activated\\"></toggle-button-stub>
     </gl-form-group-stub>
     <!---->
     <gl-form-group-stub label=\\"Webhook URL\\" label-for=\\"url\\" label-class=\\"label-bold\\">
-      <gl-form-input-group-stub value=\\"/alerts/notify.json\\" predefinedoptions=\\"[object Object]\\" id=\\"url\\" readonly=\\"\\"></gl-form-input-group-stub> <span class=\\"gl-text-gray-400\\">
+      <gl-form-input-group-stub value=\\"/alerts/notify.json\\" predefinedoptions=\\"[object Object]\\" id=\\"url\\" readonly=\\"\\"></gl-form-input-group-stub> <span class=\\"gl-text-gray-200\\">
 
         </span>
     </gl-form-group-stub>

spec/frontend/incidents_settings/components/__snapshots__/pagerduty_form_spec.js.snap

@@ -35,7 +35,7 @@ exports[`Alert integration settings form should match the default snapshot 1`] =
       />
        
       <div
-        class="gl-text-gray-400 gl-pt-2"
+        class="gl-text-gray-200 gl-pt-2"
       >
         <gl-sprintf-stub
           message="Create a GitLab issue for each PagerDuty incident by %{docsLink}"