Merge branch '221301-update-gray-200-value-and-usages' into 'master'

Resolve "Update $gray-200 value and usages"

Closes #221301

See merge request gitlab-org/gitlab!36128

app/assets/javascripts/alert_management/components/alert_details.vue

@@ -204,7 +204,7 @@ export default {
       :class="{ 'pr-sm-8': sidebarStatus }"
     >
       <div
-        class="gl-display-flex gl-justify-content-space-between gl-align-items-baseline gl-px-1 py-3 py-md-4 gl-border-b-1 gl-border-b-gray-200 gl-border-b-solid flex-column flex-sm-row"
+        class="gl-display-flex gl-justify-content-space-between gl-align-items-baseline gl-px-1 py-3 py-md-4 gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid flex-column flex-sm-row"
       >
         <div
           data-testid="alert-header"

app/assets/javascripts/diffs/components/diff_line_note_form.vue

@@ -148,7 +148,10 @@ export default {
 
 <template>
   <div class="content discussion-form discussion-form-container discussion-notes">
-    <div v-if="glFeatures.multilineComments" class="gl-mb-3 gl-text-gray-700">
+    <div
+      v-if="glFeatures.multilineComments"
+      class="gl-mb-3 gl-text-gray-700 gl-border-gray-100 gl-border-b-solid gl-border-b-1 gl-pb-3"
+    >
       <multiline-comment-form
         v-model="commentLineStart"
         :line="line"

app/assets/javascripts/issue_show/components/app.vue

@@ -420,7 +420,7 @@ export default {
         <transition name="issuable-header-slide">
           <div
             v-if="shouldShowStickyHeader"
-            class="issue-sticky-header gl-fixed gl-z-index-3 gl-bg-white gl-border-1 gl-border-b-solid gl-border-b-gray-200 gl-py-3"
+            class="issue-sticky-header gl-fixed gl-z-index-3 gl-bg-white gl-border-1 gl-border-b-solid gl-border-b-gray-100 gl-py-3"
             data-testid="issue-sticky-header"
           >
             <div

app/assets/javascripts/notes/components/noteable_note.vue

@@ -340,7 +340,7 @@ export default {
         :line="line"
         :comment-line-options="commentLineOptions"
         :line-range="note.position.line_range"
-        class="gl-mb-3 gl-text-gray-700"
+        class="gl-mb-3 gl-text-gray-700 gl-border-gray-100 gl-border-b-solid gl-border-b-1 gl-pb-3"
       />
       <div
         v-else

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

@@ -40,7 +40,7 @@ export default {
         'gl-border-b-1': !this.last,
         'gl-border-b-2': this.last,
         'disabled-content': this.disabled,
-        'gl-border-gray-200': !this.selected,
+        'gl-border-gray-100': !this.selected,
         'gl-bg-blue-50 gl-border-blue-200': this.selected,
       };
     },
@@ -109,14 +109,14 @@ export default {
       <div class="gl-w-7"></div>
       <div
         v-if="isDetailsShown"
-        class="gl-display-flex gl-flex-direction-column gl-flex-fill-1 gl-bg-gray-10 gl-rounded-base gl-inset-border-1-gray-200 gl-mb-3"
+        class="gl-display-flex gl-flex-direction-column gl-flex-fill-1 gl-bg-gray-10 gl-rounded-base gl-inset-border-1-gray-100 gl-mb-3"
       >
         <div
           v-for="(row, detailIndex) in detailsSlots"
           :key="detailIndex"
           class="gl-px-5 gl-py-2"
           :class="{
-            'gl-border-gray-200 gl-border-t-solid gl-border-t-1': detailIndex !== 0,
+            'gl-border-gray-100 gl-border-t-solid gl-border-t-1': detailIndex !== 0,
           }"
         >
           <slot :name="row"></slot>

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

@@ -98,7 +98,7 @@
 
     &::before {
       content: '';
-      border-left: 1px solid $gray-200;
+      border-left: 1px solid $gray-100;
       position: absolute;
       left: 28px;
       top: -18px;
@@ -146,7 +146,7 @@
 }
 
 .design-dropzone-border {
-  border: 2px dashed $gray-200;
+  border: 2px dashed $gray-100;
 }
 
 .design-dropzone-card {

app/assets/stylesheets/components/popover.scss

 .popover {
   max-width: $popover-max-width;
-  border: 1px solid $gray-200;
+  border: 1px solid $gray-100;
   box-shadow: $popover-box-shadow;
   font-size: $gl-font-size-small;
 
@@ -50,7 +50,7 @@
   *  due to the box-shadow include in our custom styles.
   */
   > .arrow::before {
-    border-top-color: $gray-200;
+    border-top-color: $gray-100;
     bottom: 1px;
   }
 
@@ -61,7 +61,7 @@
 
 .bs-popover-bottom {
   > .arrow::before {
-    border-bottom-color: $gray-200;
+    border-bottom-color: $gray-100;
   }
 
   > .popover-header::before {
@@ -70,11 +70,11 @@
 }
 
 .bs-popover-right > .arrow::before {
-  border-right-color: $gray-200;
+  border-right-color: $gray-100;
 }
 
 .bs-popover-left > .arrow::before {
-  border-left-color: $gray-200;
+  border-left-color: $gray-100;
 }
 
 .popover-header {

app/assets/stylesheets/framework/awards.scss

@@ -179,7 +179,7 @@
   &.user-authored {
     cursor: default;
     background-color: $gray-light;
-    border-color: $gray-200;
+    border-color: $gray-100;
     color: $gl-text-color-disabled;
 
     gl-emoji {

app/assets/stylesheets/framework/broadcast_messages.scss

@@ -28,7 +28,7 @@
   max-width: 300px;
   width: auto;
   background: $white;
-  border: 1px solid $gray-200;
+  border: 1px solid $gray-100;
   box-shadow: 0 1px 2px 0 rgba($black, 0.1);
   border-radius: $border-radius-default;
   z-index: 999;

app/assets/stylesheets/framework/buttons.scss

@@ -502,7 +502,7 @@
 // All disabled buttons, regardless of color, type, etc
 %disabled {
   background-color: $gray-light;
-  border-color: $gray-200;
+  border-color: $gray-100;
   color: $gl-text-color-disabled;
   opacity: 1;
   text-decoration: none;

app/assets/stylesheets/framework/dropdowns.scss

@@ -1087,7 +1087,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
 
   .color-input-container {
     .dropdown-label-color-preview {
-      border: 1px solid $gray-200;
+      border: 1px solid $gray-100;
       border-right: 0;
     }
   }

app/assets/stylesheets/framework/filters.scss

@@ -158,7 +158,7 @@
 .filtered-search-token .selected,
 .filtered-search-term .selected {
   .name {
-    background-color: $gray-200;
+    background-color: $gray-100;
   }
 
   .operator {

app/assets/stylesheets/framework/gitlab_theme.scss

@@ -342,7 +342,7 @@ body {
         .navbar-toggler,
         .navbar-toggler:hover {
           color: $gray-700;
-          border-left: 1px solid $gray-200;
+          border-left: 1px solid $gray-100;
         }
       }
     }
@@ -360,7 +360,7 @@ body {
 
       .search-input-wrap {
         .search-icon {
-          fill: $gray-200;
+          fill: $gray-100;
         }
 
         .search-input {

app/assets/stylesheets/framework/memory_graph.scss

 .memory-graph-container {
   background: $white;
-  border: 1px solid $gray-200;
+  border: 1px solid $gray-100;
 }

app/assets/stylesheets/framework/sidebar.scss

@@ -214,7 +214,7 @@
 .health-status {
   .dropdown-body {
     .health-divider {
-      border-top-color: $gray-200;
+      border-top-color: $gray-100;
     }
 
     .dropdown-item:not(.health-dropdown-item) {

app/assets/stylesheets/framework/stacked_progress_bar.scss

@@ -36,7 +36,7 @@
   }
 
   .status-neutral {
-    background-color: $gray-200;
+    background-color: $gray-100;
     color: $gl-gray-dark;
 
     &:hover {

app/assets/stylesheets/framework/typography.scss

@@ -89,7 +89,7 @@
     background-color: $gray-10;
     border-width: 1px;
     border-style: solid;
-    border-color: $gray-200 $gray-200 $gray-400;
+    border-color: $gray-100 $gray-100 $gray-400;
     border-image: none;
     border-radius: 3px;
     box-shadow: 0 -1px 0 $gray-400 inset;
@@ -181,7 +181,7 @@
       background-color: $white;
 
       td {
-        border-color: $gray-200;
+        border-color: $gray-100;
       }
     }
 
@@ -611,7 +611,7 @@ pre {
   word-wrap: break-word;
   color: $gl-text-color;
   background-color: $gray-light;
-  border: 1px solid $gray-200;
+  border: 1px solid $gray-100;
   border-radius: $border-radius-small;
 }
 

app/assets/stylesheets/framework/variables.scss

@@ -164,7 +164,7 @@ $red-950: #4d0a00 !default;
 $gray-10: #fafafa !default;
 $gray-50: #f0f0f0 !default;
 $gray-100: #dbdbdb !default;
-$gray-200: #dfdfdf !default;
+$gray-200: #bfbfbf !default;
 $gray-300: #ccc !default;
 $gray-400: #bababa !default;
 $gray-500: #a7a7a7 !default;
@@ -333,7 +333,7 @@ $border-gray-normal-dashed: darken($gray-normal, $darken-border-dashed-factor);
 /*
  * UI elements
  */
-$border-color: $gray-200;
+$border-color: $gray-100;
 $shadow-color: $t-gray-a-08;
 $well-expand-item: #e8f2f7;
 $well-inner-border: #eef0f2;
@@ -867,7 +867,7 @@ $priority-label-empty-state-width: 114px;
 Popovers
 */
 $popover-max-width: 384px;
-$popover-box-shadow: 0 2px 3px 1px $gray-200;
+$popover-box-shadow: 0 2px 3px 1px $gray-100;
 
 /*
 Issues Analytics

app/assets/stylesheets/framework/variables_overrides.scss

@@ -5,14 +5,14 @@
 
 $secondary: $gray-light;
 $input-disabled-bg: $gray-light;
-$input-border-color: $gray-200;
+$input-border-color: $gray-100;
 $input-color: $gl-text-color;
 $input-font-size: $gl-font-size;
 $font-family-sans-serif: $regular-font;
 $font-family-monospace: $monospace-font;
 $btn-line-height: 20px;
 $table-accent-bg: $gray-light;
-$table-border-color: $gray-200;
+$table-border-color: $gray-100;
 $card-border-color: $border-color;
 $card-cap-bg: $gray-light !default;
 $success: $green-500;
@@ -21,7 +21,7 @@ $warning: $orange-500;
 $danger: $red-500;
 $zindex-modal-backdrop: 1040;
 $nav-divider-margin-y: ($grid-size / 2);
-$dropdown-divider-bg: $gray-200;
+$dropdown-divider-bg: $gray-100;
 $dropdown-item-padding-y: 8px;
 $dropdown-item-padding-x: 12px;
 $popover-max-width: 300px;

app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss

@@ -146,7 +146,7 @@
   }
 
   pre {
-    border-color: var(--ide-border-color-alt, $gray-200);
+    border-color: var(--ide-border-color-alt, $gray-100);
 
     code {
       background-color: var(--ide-border-color, inherit);
@@ -216,7 +216,7 @@
     color: var(--ide-text-color, $gl-text-color);
 
     &:hover {
-      background-color: var(--ide-input-border, $gray-200);
+      background-color: var(--ide-input-border, $gray-100);
     }
   }
 
@@ -300,8 +300,8 @@
     }
 
     .divider {
-      background-color: var(--ide-dropdown-hover-background, $gray-200);
-      border-color: var(--ide-dropdown-hover-background, $gray-200);
+      background-color: var(--ide-dropdown-hover-background, $gray-100);
+      border-color: var(--ide-dropdown-hover-background, $gray-100);
     }
 
     li > a:not(.disable-hover):hover,
@@ -316,7 +316,7 @@
 
   .dropdown-title,
   .dropdown-input {
-    border-color: var(--ide-dropdown-hover-background, $gray-200) !important;
+    border-color: var(--ide-dropdown-hover-background, $gray-100) !important;
   }
 
   .btn-primary,
@@ -356,7 +356,7 @@
 
   .btn[disabled] {
     background-color: var(--ide-btn-default-background, $gray-light) !important;
-    border: 1px solid var(--ide-btn-disabled-border, $gray-200) !important;
+    border: 1px solid var(--ide-btn-disabled-border, $gray-100) !important;
     color: var(--ide-btn-disabled-color, $gl-text-color-disabled) !important;
   }
 

app/assets/stylesheets/page_bundles/ide.scss

@@ -145,7 +145,7 @@ $ide-commit-header-height: 48px;
   }
 
   &:not([disabled]):hover {
-    background-color: var(--ide-input-border, $gray-200);
+    background-color: var(--ide-input-border, $gray-100);
   }
 
   &:not([disabled]):focus {
@@ -396,7 +396,7 @@ $ide-commit-header-height: 48px;
   }
 
   &:active {
-    background: var(--ide-background, $gray-200);
+    background: var(--ide-background, $gray-100);
   }
 
   &.is-active {
@@ -567,7 +567,7 @@ $ide-commit-header-height: 48px;
 
   &:focus {
     color: var(--ide-text-color, $gl-text-color);
-    background-color: var(--ide-background-hover, $gray-200);
+    background-color: var(--ide-background-hover, $gray-100);
   }
 
   &.active {
@@ -1046,7 +1046,7 @@ $ide-commit-header-height: 48px;
   background-color: var(--ide-background, $gray-50);
 
   &:hover {
-    background-color: var(--ide-file-row-btn-hover-background, $gray-200);
+    background-color: var(--ide-file-row-btn-hover-background, $gray-100);
   }
 
   &:active,
@@ -1097,7 +1097,7 @@ $ide-commit-header-height: 48px;
   &:focus {
     outline: 0;
     box-shadow: none;
-    border-color: var(--ide-border-color, $gray-200);
+    border-color: var(--ide-border-color, $gray-100);
   }
 }
 
@@ -1140,7 +1140,7 @@ $ide-commit-header-height: 48px;
 }
 
 .file-row:active {
-  background: var(--ide-background, $gray-200);
+  background: var(--ide-background, $gray-100);
 }
 
 .file-row.is-active {

app/assets/stylesheets/pages/alert_management/details.scss

@@ -61,7 +61,7 @@
 
       &.is-active {
         &:last-child {
-          border-bottom: 1px solid $gray-200;
+          border-bottom: 1px solid $gray-100;
         }
       }
     }

app/assets/stylesheets/pages/branches.scss

@@ -23,7 +23,7 @@
 
     .bar {
       height: 4px;
-      background-color: $gl-gray-200;
+      background-color: $gl-gray-100;
     }
 
     .count {
@@ -34,7 +34,7 @@
   .graph-separator {
     width: $graph-separator-width;
     height: 18px;
-    background-color: $gl-gray-200;
+    background-color: $gl-gray-100;
   }
 }
 

app/assets/stylesheets/pages/builds.scss

@@ -236,7 +236,7 @@
   .trigger-variables-table-cell {
     font-size: $gl-font-size-small;
     line-height: $gl-line-height;
-    border: 1px solid $gray-200;
+    border: 1px solid $gray-100;
     padding: $gl-padding-4 6px;
     width: 50%;
     vertical-align: top;

app/assets/stylesheets/pages/issuable.scss

@@ -382,7 +382,7 @@
       overflow: hidden;
 
       &:hover {
-        background-color: $gray-200;
+        background-color: $gray-100;
       }
 
       &.issuable-sidebar-header {

app/assets/stylesheets/pages/merge_requests.scss

@@ -64,7 +64,7 @@ $mr-widget-min-height: 69px;
   background-color: $gray-light;
 
   &.clickable:hover {
-    background-color: $gl-gray-200;
+    background-color: $gl-gray-100;
     cursor: pointer;
   }
 }
@@ -75,7 +75,7 @@ $mr-widget-min-height: 69px;
 
   &::before {
     content: '';
-    border-left: 1px solid $gray-200;
+    border-left: 1px solid $gray-100;
     position: absolute;
     left: 28px;
     top: -17px;

app/assets/stylesheets/pages/notes.scss

@@ -186,8 +186,8 @@ $note-form-margin-left: 72px;
       padding: $gl-padding;
 
       .dummy-avatar {
-        background-color: $gl-gray-200;
-        border: 1px solid darken($gl-gray-200, 25%);
+        background-color: $gl-gray-100;
+        border: 1px solid darken($gl-gray-100, 25%);
       }
 
       .note-headline-light,

app/assets/stylesheets/pages/pipelines.scss

@@ -816,7 +816,7 @@
 
   &.ci-status-icon-created,
   &.ci-status-icon-skipped {
-    @include mini-pipeline-graph-color($white, $gray-200, $gray-300, $gray-500, $gray-600, $gray-700);
+    @include mini-pipeline-graph-color($white, $gray-100, $gray-300, $gray-500, $gray-600, $gray-700);
   }
 }
 

app/assets/stylesheets/pages/prometheus.scss

@@ -34,7 +34,7 @@
 .draggable {
   &.draggable-enabled {
     .draggable-panel {
-      border: $gray-200 1px solid;
+      border: $gray-100 1px solid;
       border-radius: $border-radius-default;
       margin: -1px;
       cursor: grab;

app/assets/stylesheets/pages/settings.scss

@@ -347,7 +347,7 @@
 
   .btn-clipboard {
     background-color: $white;
-    border: 1px solid $gray-200;
+    border: 1px solid $gray-100;
   }
 
   .deploy-token-help-block {

app/assets/stylesheets/performance_bar.scss

@@ -61,7 +61,7 @@
     padding: 4px 6px;
     font-family: Consolas, 'Liberation Mono', Courier, monospace;
     line-height: 1;
-    color: $gl-gray-200;
+    color: $gl-gray-100;
     border-radius: 3px;
     box-shadow: 0 1px 0 $perf-bar-bucket-box-shadow-from,
       inset 0 1px 2px $perf-bar-bucket-box-shadow-to;

changelogs/unreleased/221301-update-gray-200-value-and-usages.yml

+---
+title: Updating $gray-200 hex value and remapping current instances to $gray-100
+merge_request: 36128
+author:
+type: other

ee/app/assets/javascripts/geo_node_form/components/geo_node_form.vue

@@ -88,7 +88,7 @@ export default {
     />
     <geo-node-form-capacities :node-data="nodeData" />
     <section
-      class="gl-display-flex gl-align-items-center gl-p-5 gl-mt-6 gl-bg-gray-10 gl-border-t-solid gl-border-b-solid gl-border-t-1 gl-border-b-1 gl-border-gray-200"
+      class="gl-display-flex gl-align-items-center gl-p-5 gl-mt-6 gl-bg-gray-10 gl-border-t-solid gl-border-b-solid gl-border-t-1 gl-border-b-1 gl-border-gray-100"
     >
       <gl-button
         id="node-save-button"

ee/app/assets/javascripts/geo_settings/components/geo_settings_form.vue

@@ -77,7 +77,7 @@ export default {
       />
     </gl-form-group>
     <section
-      class="gl-display-flex gl-align-items-center gl-p-5 gl-mt-6 gl-bg-gray-10 gl-border-t-solid gl-border-b-solid gl-border-t-1 gl-border-b-1 gl-border-gray-200"
+      class="gl-display-flex gl-align-items-center gl-p-5 gl-mt-6 gl-bg-gray-10 gl-border-t-solid gl-border-b-solid gl-border-t-1 gl-border-b-1 gl-border-gray-100"
     >
       <gl-button
         data-testid="settingsSaveButton"

ee/app/assets/javascripts/iterations/components/iteration_report.vue

@@ -128,7 +128,7 @@ export default {
     <template v-else>
       <div
         ref="topbar"
-        class="gl-display-flex gl-justify-items-center gl-align-items-center gl-py-3 gl-border-1 gl-border-b-solid gl-border-gray-200"
+        class="gl-display-flex gl-justify-items-center gl-align-items-center gl-py-3 gl-border-1 gl-border-b-solid gl-border-gray-100"
       >
         <gl-badge :variant="status.variant">
           {{ status.text }}

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

@@ -111,8 +111,8 @@ export default {
 </script>
 
 <template>
-  <section class="gl-border-solid gl-border-1 gl-border-gray-200 gl-rounded-base">
-    <header class="gl-border-b-solid gl-border-b-1 gl-border-b-gray-200 gl-p-5">
+  <section class="gl-border-solid gl-border-1 gl-border-gray-100 gl-rounded-base">
+    <header class="gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-p-5">
       <h4 class="gl-my-0">
         {{ __('Project security status') }}
         <gl-link

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

@@ -27,7 +27,7 @@
 }
 
 .license-cell {
-  border-color: $gray-200;
+  border-color: $gray-100;
   border-style: solid;
   border-width: 1px 1px 0 0;
   flex-basis: 0;

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

@@ -10,7 +10,7 @@ $subscriptions-full-width-lg: 541px;
   }
 
   .checkout-pane {
-    border-bottom: 1px solid $gray-200;
+    border-bottom: 1px solid $gray-100;
     flex-grow: 1;
     flex-shrink: 0;
 
@@ -44,7 +44,7 @@ $subscriptions-full-width-lg: 541px;
     }
 
     .phase {
-      border-bottom: 5px solid $gray-200;
+      border-bottom: 5px solid $gray-100;
       color: $gray-700;
       flex-basis: 100%;
       font-size: $gl-font-size-12;

spec/frontend/registry/explorer/components/list_item_spec.js

@@ -141,7 +141,7 @@ describe('list item', () => {
       expect(wrapper.classes()).toEqual(
         expect.arrayContaining(['gl-bg-blue-50', 'gl-border-blue-200']),
       );
-      expect(wrapper.classes()).toEqual(expect.not.arrayContaining(['gl-border-gray-200']));
+      expect(wrapper.classes()).toEqual(expect.not.arrayContaining(['gl-border-gray-100']));
     });
 
     it('when false applies the default border', () => {
@@ -150,7 +150,7 @@ describe('list item', () => {
       expect(wrapper.classes()).toEqual(
         expect.not.arrayContaining(['gl-bg-blue-50', 'gl-border-blue-200']),
       );
-      expect(wrapper.classes()).toEqual(expect.arrayContaining(['gl-border-gray-200']));
+      expect(wrapper.classes()).toEqual(expect.arrayContaining(['gl-border-gray-100']));
     });
   });
 });