Merge branch '430055-consolidate-border-colors' into 'master'

Consolidate SCSS variables for border colors

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/137221



Merged-by: Artur Fedorov <afedorov@gitlab.com>
Approved-by: Dan Mizzi-Harris <dmizzi-harris@gitlab.com>
Approved-by: Laura Callahan <lmeckley@gitlab.com>
Approved-by: Artur Fedorov <afedorov@gitlab.com>
Reviewed-by: Dan Mizzi-Harris <dmizzi-harris@gitlab.com>
Reviewed-by: Laura Callahan <lmeckley@gitlab.com>
Reviewed-by: Scott de Jonge <sdejonge@gitlab.com>
Co-authored-by: sdejonge <sdejonge@gitlab.com>

app/assets/stylesheets/framework/awards.scss

@@ -24,7 +24,7 @@
   width: $award-emoji-width;
   font-size: 14px;
   background-color: $white;
-  border: 1px solid $border-white-light;
+  border: 1px solid $border-color;
   border-radius: $border-radius-base;
   box-shadow: 0 6px 12px $award-emoji-menu-shadow;
   pointer-events: none;
@@ -218,7 +218,7 @@
   }
 
   .award-control-icon {
-    color: $border-gray-normal;
+    color: $gray-100;
 
     svg {
       height: $default-icon-size;

app/assets/stylesheets/framework/blocks.scss

@@ -25,8 +25,8 @@
   background-color: $gray-light;
   padding: $gl-padding;
   margin-bottom: 0;
-  border-top: 1px solid $white-dark;
-  border-bottom: 1px solid $white-dark;
+  border-top: 1px solid $border-color;
+  border-bottom: 1px solid $border-color;
   color: $gl-text-color;
 
   &.white {
@@ -76,14 +76,14 @@
 
 .sub-header-block {
   background-color: $white;
-  border-bottom: 1px solid $white-dark;
+  border-bottom: 1px solid $border-color;
   padding: 11px 0;
   margin-bottom: 11px;
 }
 
 .content-block {
   padding: $gl-padding 0;
-  border-bottom: 1px solid $white-dark;
+  border-bottom: 1px solid $border-color;
 
   > .controls {
     float: right;

app/assets/stylesheets/framework/buttons.scss

@@ -118,7 +118,7 @@
 }
 
 @mixin btn-white {
-  @include btn-color($white, $border-color, $gray-50, $border-white-normal, $white-dark, $border-white-normal, $gl-text-color);
+  @include btn-color($white, $gray-200, $gray-50, $gray-200, $gray-100, $gray-300, $gl-text-color);
 }
 
 @mixin btn-purple {
@@ -276,7 +276,7 @@
   .active {
     box-shadow: $gl-btn-active-background;
 
-    border: 1px solid $border-white-normal !important;
+    border: 1px solid $gray-100 !important;
     background-color: $btn-active-gray-light !important;
   }
 }

app/assets/stylesheets/framework/common.scss

@@ -319,7 +319,7 @@ li.note {
   .progress {
     margin-top: 4px;
     box-shadow: none;
-    background-color: $border-gray-light;
+    background-color: $gray-100;
   }
 }
 

app/assets/stylesheets/framework/sidebar.scss

@@ -108,7 +108,7 @@
 }
 
 .right-sidebar {
-  border-left: 1px solid $gray-50;
+  border-left: 1px solid $border-color;
 
   &.right-sidebar-merge-requests {
     @include media-breakpoint-up(lg) {
@@ -411,7 +411,7 @@
   .issuable-sidebar-header {
     @include clearfix;
     padding: $gl-spacing-scale-4 0 $gl-spacing-scale-5;
-    border-bottom: 1px solid $border-gray-normal;
+    border-bottom: 1px solid $border-color;
     // This prevents the mess when resizing the sidebar
     // of elements repositioning themselves..
     width: $right-sidebar-inner-width;
@@ -587,7 +587,7 @@
     }
 
     .participants {
-      border-bottom: 1px solid $border-gray-normal;
+      border-bottom: 1px solid $border-color;
     }
 
     .hide-collapsed {
@@ -598,7 +598,7 @@
       width: 100%;
       height: $sidebar-toggle-height;
       margin-left: 0;
-      border-bottom: 1px solid $border-white-normal;
+      border-bottom: 1px solid $border-color;
       border-radius: 0;
     }
 

app/assets/stylesheets/framework/typography.scss

@@ -89,7 +89,7 @@
     font-weight: $gl-font-weight-bold;
     margin: 24px 0 16px;
     padding-bottom: 0.3em;
-    border-bottom: 1px solid $white-dark;
+    border-bottom: 1px solid $gray-200;
     color: $gl-text-color;
 
     &:first-child {
@@ -102,7 +102,7 @@
     font-weight: $gl-font-weight-bold;
     margin: 24px 0 16px;
     padding-bottom: 0.3em;
-    border-bottom: 1px solid $white-dark;
+    border-bottom: 1px solid $gray-200;
     color: $gl-text-color;
   }
 
@@ -138,7 +138,7 @@
 
     &:dir(rtl) {
       border-left: 0;
-      border-right: 3px solid $white-dark;
+      border-right: 3px solid $gray-100;
     }
 
     p {

app/assets/stylesheets/framework/variables.scss

@@ -87,8 +87,6 @@ $size-scale: (
 // Color schema
 $darken-normal-factor: 7% !default;
 $darken-dark-factor: 10% !default;
-$darken-border-factor: 5% !default;
-$darken-border-dashed-factor: 25% !default;
 
 $purple: #6d49cb !default;
 $purple-light: #ede8fb !default;
@@ -116,15 +114,6 @@ $t-gray-a-08: rgba(31, 30, 36, 0.08) !default;
 $t-gray-a-16: rgba(31, 30, 36, 0.16) !default;
 $t-gray-a-24: rgba(31, 30, 36, 0.24) !default;
 
-$white-dark: darken($gray-50, 2) !default;
-
-$border-white-light: darken($white, $darken-border-factor) !default;
-$border-white-normal: darken($gray-50, $darken-border-factor) !default;
-
-$border-gray-light: darken($gray-light, $darken-border-factor);
-$border-gray-normal: darken($gray-normal, $darken-border-factor);
-$border-gray-normal-dashed: darken($gray-normal, $darken-border-dashed-factor);
-
 /*
  * UI elements
  */

app/assets/stylesheets/mailers/highlighted_diff_email.scss

@@ -144,7 +144,7 @@ blockquote,
   color: $gl-grayish-blue;
   padding: 0 0 0 15px;
   margin: 0;
-  border-left: 3px solid $white-dark;
+  border-left: 3px solid $gray-100;
 }
 
 span.highlight_word {

app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss

@@ -75,7 +75,7 @@
 
     .diffOverview {
       background-color: $white;
-      border-left: 1px solid $white-dark;
+      border-left: 1px solid $border-color;
       cursor: ns-resize;
     }
 

app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss

@@ -147,7 +147,7 @@
   .nav-links,
   .gl-tabs-nav,
   .common-note-form .md-area.is-focused .nav-links {
-    border-color: var(--ide-border-color-alt, $white-dark);
+    border-color: var(--ide-border-color-alt, $border-color);
   }
 
   pre {
@@ -291,14 +291,14 @@
 
     &:hover,
     &:focus {
-      border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important;
+      border-color: var(--ide-btn-default-hover-border, $border-color) !important;
       background-color: var(--ide-btn-default-background, $gray-50) !important;
     }
 
     &:active,
     .active {
-      border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important;
-      background-color: var(--ide-btn-default-background, $white-dark) !important;
+      border-color: var(--ide-btn-default-hover-border, $border-color) !important;
+      background-color: var(--ide-btn-default-background, $border-color) !important;
     }
   }
 

app/assets/stylesheets/page_bundles/ide.scss

@@ -74,15 +74,15 @@ $ide-commit-header-height: 48px;
   display: flex;
   flex-direction: column;
   flex: 1;
-  border-left: 1px solid var(--ide-border-color, $white-dark);
-  border-right: 1px solid var(--ide-border-color, $white-dark);
+  border-left: 1px solid var(--ide-border-color, $border-color);
+  border-right: 1px solid var(--ide-border-color, $border-color);
   overflow: hidden;
 }
 
 .multi-file-tabs {
   display: flex;
   background-color: var(--ide-background, $gray-light);
-  box-shadow: inset 0 -1px var(--ide-border-color, $white-dark);
+  box-shadow: inset 0 -1px var(--ide-border-color, $border-color);
 
   > ul {
     display: flex;
@@ -94,8 +94,8 @@ $ide-commit-header-height: 48px;
     align-items: center;
     padding: $grid-size $gl-padding;
     background-color: var(--ide-background-hover, $gray-normal);
-    border-right: 1px solid var(--ide-border-color, $white-dark);
-    border-bottom: 1px solid var(--ide-border-color, $white-dark);
+    border-right: 1px solid var(--ide-border-color, $border-color);
+    border-bottom: 1px solid var(--ide-border-color, $border-color);
 
     &.active,
     .gl-tab-nav-item-active {
@@ -136,12 +136,12 @@ $ide-commit-header-height: 48px;
         font-weight: normal !important;
 
         background-color: var(--ide-background-hover, $gray-normal);
-        border-right: 1px solid var(--ide-border-color, $white-dark);
-        border-bottom: 1px solid var(--ide-border-color, $white-dark);
+        border-right: 1px solid var(--ide-border-color, $border-color);
+        border-bottom: 1px solid var(--ide-border-color, $border-color);
 
         &.gl-tab-nav-item-active {
           background-color: var(--ide-highlight-background, $white);
-          border-color: var(--ide-border-color, $white-dark);
+          border-color: var(--ide-border-color, $border-color);
           border-bottom-color: transparent;
         }
 
@@ -245,7 +245,7 @@ $ide-commit-header-height: 48px;
 }
 
 .ide-mode-tabs {
-  border-bottom: 1px solid var(--ide-border-color, $white-dark);
+  border-bottom: 1px solid var(--ide-border-color, $border-color);
 
   li a {
     padding: $gl-padding-8 $gl-padding;
@@ -260,7 +260,7 @@ $ide-commit-header-height: 48px;
 
 .ide-status-bar {
   color: var(--ide-text-color, $gl-text-color);
-  border-top: 1px solid var(--ide-border-color, $white-dark);
+  border-top: 1px solid var(--ide-border-color, $border-color);
   padding: 2px $gl-padding-8 0;
   background-color: var(--ide-footer-background, $white);
   display: flex;
@@ -358,8 +358,8 @@ $ide-commit-header-height: 48px;
     flex: 1;
     flex-direction: column;
     background-color: var(--ide-highlight-background, $white);
-    border-left: 1px solid var(--ide-border-color, $white-dark);
-    border-top: 1px solid var(--ide-border-color, $white-dark);
+    border-left: 1px solid var(--ide-border-color, $border-color);
+    border-top: 1px solid var(--ide-border-color, $border-color);
     border-top-left-radius: $border-radius-small;
     min-height: 0; // firefox fix
   }
@@ -384,7 +384,7 @@ $ide-commit-header-height: 48px;
 
 .multi-file-commit-panel-header {
   height: $ide-commit-header-height;
-  border-bottom: 1px solid var(--ide-border-color-alt, $white-dark);
+  border-bottom: 1px solid var(--ide-border-color-alt, $border-color);
   padding: 12px 0;
 }
 
@@ -465,7 +465,7 @@ $ide-commit-header-height: 48px;
 .multi-file-commit-form {
   position: relative;
   background-color: var(--ide-highlight-background, $white);
-  border-left: 1px solid var(--ide-border-color, $white-dark);
+  border-left: 1px solid var(--ide-border-color, $border-color);
   transition: all 0.3s ease;
 
   > form,
@@ -473,7 +473,7 @@ $ide-commit-header-height: 48px;
     padding: $gl-padding 0;
     margin-left: $gl-padding;
     margin-right: $gl-padding;
-    border-top: 1px solid var(--ide-border-color-alt, $white-dark);
+    border-top: 1px solid var(--ide-border-color-alt, $border-color);
   }
 
   .btn {
@@ -544,7 +544,7 @@ $ide-commit-header-height: 48px;
   margin-right: $gl-padding;
 
   &.is-first {
-    border-bottom: 1px solid var(--ide-border-color-alt, $white-dark);
+    border-bottom: 1px solid var(--ide-border-color-alt, $border-color);
   }
 }
 
@@ -603,8 +603,8 @@ $ide-commit-header-height: 48px;
     width: calc(100% + 1px);
     padding-right: $gl-padding + 1px;
     background-color: var(--ide-highlight-background, $white);
-    border-top-color: var(--ide-border-color, $white-dark);
-    border-bottom-color: var(--ide-border-color, $white-dark);
+    border-top-color: var(--ide-border-color, $border-color);
+    border-bottom-color: var(--ide-border-color, $border-color);
 
     &::after {
       content: '';
@@ -714,7 +714,7 @@ $ide-commit-header-height: 48px;
   padding: 12px 0;
   margin-left: $ide-tree-padding;
   margin-right: $ide-tree-padding;
-  border-bottom: 1px solid var(--ide-border-color-alt, $white-dark);
+  border-bottom: 1px solid var(--ide-border-color-alt, $border-color);
 
   svg {
     color: var(--ide-text-color-secondary, $gray-500);
@@ -906,7 +906,7 @@ $ide-commit-header-height: 48px;
   .multi-file-commit-panel-inner {
     padding: $grid-size 0;
     background-color: var(--ide-highlight-background, $white);
-    border-right: 1px solid var(--ide-border-color, $white-dark);
+    border-right: 1px solid var(--ide-border-color, $border-color);
   }
 
   .ide-right-sidebar-jobs-detail {
@@ -1092,7 +1092,7 @@ $ide-commit-header-height: 48px;
 .ide-file-templates {
   padding: $grid-size $gl-padding;
   background-color: var(--ide-background, $gray-light);
-  border-bottom: 1px solid var(--ide-border-color, $white-dark);
+  border-bottom: 1px solid var(--ide-border-color, $border-color);
 
   .dropdown {
     min-width: 180px;
@@ -1107,7 +1107,7 @@ $ide-commit-header-height: 48px;
   height: 65px;
   padding: 8px 16px;
   background-color: var(--ide-background, $gray-10);
-  box-shadow: inset 0 -1px var(--ide-border-color, $white-dark);
+  box-shadow: inset 0 -1px var(--ide-border-color, $border-color);
 }
 
 .ide-commit-list-changed-icon {

app/assets/stylesheets/page_bundles/milestone.scss

@@ -90,7 +90,7 @@
     }
 
     .reference {
-      border-top: 1px solid $border-gray-normal;
+      border-top: 1px solid $border-color;
     }
   }
 }

app/assets/stylesheets/page_bundles/pipelines.scss

@@ -43,7 +43,7 @@
 
     .btn-group.open .btn-default {
       background-color: $gray-50;
-      border-color: $border-white-normal;
+      border-color: $gray-100;
     }
 
     .btn .text-center {

app/assets/stylesheets/pages/commits.scss

@@ -7,7 +7,7 @@
   background: none;
   word-break: normal;
   overflow-x: auto;
-  border-left: 3px solid $white-dark;
+  border-left: 3px solid $gray-100;
   color: $gl-text-color-secondary;
 }
 
@@ -93,7 +93,7 @@
   color: $gl-text-color-secondary;
   padding: 1px $gl-padding-4;
   cursor: pointer;
-  border: 1px solid $border-white-normal;
+  border: 1px solid $gray-100;
   border-radius: $border-radius-default;
   margin-left: 5px;
   font-size: 12px;

app/assets/stylesheets/pages/groups.scss

@@ -141,7 +141,7 @@ table.pipeline-project-metrics tr td {
       top: 5px;
       bottom: 0;
       left: -16px;
-      border-left: 2px solid $border-white-normal;
+      border-left: 2px solid $border-color;
     }
 
     .group-row {
@@ -152,7 +152,7 @@ table.pipeline-project-metrics tr td {
         display: block;
         width: 10px;
         height: 0;
-        border-top: 2px solid $border-white-normal;
+        border-top: 2px solid $border-color;
         position: absolute;
         top: 30px;
         left: -16px;

app/assets/stylesheets/pages/issues.scss

@@ -29,7 +29,7 @@
 
   .issue-token:hover &,
   .issue-token-link:focus > & {
-    background-color: $border-gray-normal;
+    background-color: $gray-100;
   }
 }
 
@@ -41,7 +41,7 @@
   &:focus,
   .issue-token:hover &,
   .issue-token-link:focus + & {
-    background-color: $border-gray-normal;
+    background-color: $gray-100;
     outline: none;
   }
 }

app/assets/stylesheets/pages/notes.scss

@@ -986,7 +986,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
 .disabled-comment {
   background-color: $gray-light;
   border-radius: $border-radius-base;
-  border: 1px solid $border-gray-normal;
+  border: 1px solid $border-color;
   color: $note-disabled-comment-color;
   padding: $gl-padding-8 0;
 

app/assets/stylesheets/print.scss

@@ -39,7 +39,7 @@
       content: ' ';
       height: 100%;
       width: 4px;
-      background-color: $white-dark;
+      background-color: $gray-100;
     }
 
     position: relative;

app/assets/stylesheets/snippets.scss

@@ -159,7 +159,7 @@
 
       &:hover {
         background-color: $gray-50;
-        border-color: $border-white-normal;
+        border-color: $gray-100;
         text-decoration: none;
       }
 

app/assets/stylesheets/themes/_dark.scss

@@ -13,12 +13,9 @@ $gray-darkest: $gray-700;
 $t-gray-a-08: rgba($gray-950, 0.08);
 
 $black-normal: $gray-900;
-$white-dark: $gray-100;
 
 $border-color: #4f4f4f;
 
-$border-white-normal: $border-color;
-
 $gl-text-color-secondary: $gray-700;
 
 $body-bg: $gray-10;