Merge branch '217869-lighten-card-divider-within-epic-tree-cards' into 'master'

Lighten card divider within epic tree cards

Closes #217869

See merge request gitlab-org/gitlab!32273

app/assets/stylesheets/bootstrap_migration.scss

@@ -211,7 +211,7 @@ h3.popover-header {
 }
 
 .info-well {
-  background: $gray-50;
+  background: $gray-10;
   color: $gl-text-color;
   border: 1px solid $border-color;
   border-radius: 4px;

app/assets/stylesheets/components/dashboard_skeleton.scss

@@ -68,7 +68,7 @@
       background-size: cover;
       background-image: linear-gradient(to right,
       $gray-100 0%,
-      $gray-50 20%,
+      $gray-10 20%,
       $gray-100 40%,
       $gray-100 100%);
       border-radius: $gl-padding;

app/assets/stylesheets/framework/animations.scss

@@ -193,7 +193,7 @@ a {
       background-size: cover;
       background-image: linear-gradient(to right,
       $gray-100 0%,
-      $gray-50 20%,
+      $gray-10 20%,
       $gray-100 40%,
       $gray-100 100%);
       height: 10px;

app/assets/stylesheets/framework/typography.scss

@@ -86,7 +86,7 @@
     line-height: 10px;
     color: $gl-gray-700;
     vertical-align: middle;
-    background-color: $gray-50;
+    background-color: $gray-10;
     border-width: 1px;
     border-style: solid;
     border-color: $gray-200 $gray-200 $gray-400;

app/assets/stylesheets/framework/variables.scss

@@ -163,7 +163,8 @@ $red-800: #8b2615;
 $red-900: #711e11;
 $red-950: #4b140b;
 
-$gray-50: #fafafa;
+$gray-10: #fafafa;
+$gray-50: #f0f0f0;
 $gray-100: #f2f2f2;
 $gray-200: #dfdfdf;
 $gray-300: #ccc;
@@ -232,6 +233,7 @@ $reds: (
 );
 
 $grays: (
+  '10': $gray-10,
   '50': $gray-50,
   '100': $gray-100,
   '200': $gray-200,
@@ -699,7 +701,7 @@ $logs-p-color: #333;
 */
 $input-height: 34px;
 $input-danger-bg: #f2dede;
-$input-group-addon-bg: $gray-50;
+$input-group-addon-bg: $gray-10;
 $gl-field-focus-shadow: rgba(0, 0, 0, 0.075);
 $gl-field-focus-shadow-error: rgba($red-500, 0.6);
 $input-short-width: 200px;

app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss

@@ -147,7 +147,7 @@
     .monaco-editor,
     .monaco-editor-background,
     .monaco-editor .inputarea.ime-input {
-      background-color: $gray-50;
+      background-color: $gray-10;
     }
   }
 }

app/assets/stylesheets/page_bundles/ide.scss

@@ -1124,7 +1124,7 @@ $ide-commit-header-height: 48px;
 .ide-commit-editor-header {
   height: 65px;
   padding: 8px 16px;
-  background-color: var(--ide-background, $gray-50);
+  background-color: var(--ide-background, $gray-10);
   box-shadow: inset 0 -1px var(--ide-border-color, $white-dark);
 }
 

app/assets/stylesheets/pages/prometheus.scss

@@ -151,7 +151,7 @@
       > .arrow::after {
         border-top: 6px solid transparent;
         border-bottom: 6px solid transparent;
-        border-left: 4px solid $gray-50;
+        border-left: 4px solid $gray-10;
       }
 
       .arrow-shadow {
@@ -173,7 +173,7 @@
       > .arrow::after {
         border-top: 6px solid transparent;
         border-bottom: 6px solid transparent;
-        border-right: 4px solid $gray-50;
+        border-right: 4px solid $gray-10;
       }
 
       .arrow-shadow {
@@ -207,7 +207,7 @@
     }
 
     > .popover-title {
-      background-color: $gray-50;
+      background-color: $gray-10;
       border-radius: $border-radius-default $border-radius-default 0 0;
     }
   }

ee/app/assets/javascripts/analytics/cycle_analytics/constants.js

 import { __ } from '~/locale';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
+import { gray10 } from '@gitlab/ui/scss_to_js/scss_variables';
 
 export const PROJECTS_PER_PAGE = 50;
 
@@ -36,7 +37,7 @@ export const DEFAULT_STAGE_NAMES = [...Object.keys(EMPTY_STAGE_TEXT), 'total'];
 export const TASKS_BY_TYPE_SUBJECT_ISSUE = 'Issue';
 export const TASKS_BY_TYPE_SUBJECT_MERGE_REQUEST = 'MergeRequest';
 export const TASKS_BY_TYPE_MAX_LABELS = 15;
-export const PATH_BACKGROUND_COLOR = '#fafafa'; // $gray-50 (see variables.scss)
+export const PATH_BACKGROUND_COLOR = gray10;
 
 export const TASKS_BY_TYPE_SUBJECT_FILTER_OPTIONS = {
   [TASKS_BY_TYPE_SUBJECT_ISSUE]: __('Issues'),

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

@@ -186,7 +186,7 @@ export default {
           </div>
 
           <div
-            class="item-meta d-flex flex-wrap mt-xl-0 flex-xl-nowrap align-items-center border-top pb-1 pt-2 ml-4"
+            class="item-meta d-flex flex-wrap mt-xl-0 flex-xl-nowrap align-items-center pb-1 pt-2 ml-4"
           >
             <span class="mr-3">{{ itemHierarchy }}</span>
             <gl-tooltip v-if="isEpic" :target="() => $refs.countBadge">

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

@@ -30,12 +30,13 @@
       }
 
       &.item-closed {
-        background-color: $gray-50;
+        background-color: $gray-10;
       }
     }
 
     .item-meta {
       line-height: $gl-line-height-18;
+      border-top: 1px solid $gray-50;
     }
 
     .btn-tree-item-chevron {