Fix pipeline page in dark mode

This fixes most of the badly broken light bits

app/assets/stylesheets/framework/mixins.scss

@@ -146,7 +146,11 @@
 }
 
 @mixin green-status-color {
-  @include status-color($green-100, $green-500, $green-700);
+  @include status-color(
+    var(--green-100, $green-100),
+    var(--green-500, $green-500),
+    var(--green-700, $green-700)
+  );
 }
 
 @mixin fade($gradient-direction, $gradient-color) {
@@ -254,9 +258,9 @@
 @mixin build-trace-bar($height) {
   height: $height;
   min-height: $height;
-  background: $gray-light;
-  border: 1px solid $border-color;
-  color: $gl-text-color;
+  background: var(--gray-50, $gray-50);
+  border: 1px solid var(--border-color, $border-color);
+  color: var(--gl-text-color, $gl-text-color);
   padding: $grid-size;
 }
 

app/assets/stylesheets/page_bundles/_pipeline_mixins.scss

@@ -4,7 +4,7 @@
     position: absolute;
     top: 48%;
     left: -$length;
-    border-top: 2px solid $border-color;
+    border-top: 2px solid var(--border-color, $border-color);
     width: $length;
     height: 1px;
   }
@@ -14,14 +14,14 @@
   display: inline-block;
   padding: 8px 10px 9px;
   width: 100%;
-  border: 1px solid $border-color;
+  border: 1px solid var(--border-color, $border-color);
   border-radius: $border-radius;
-  background-color: $white;
+  background-color: var(--white, $white);
 
   &:hover {
-    background-color: $gray-darker;
+    background-color: var(--gray-50, $gray-50);
     border: 1px solid $dropdown-toggle-active-border-color;
-    color: $gl-text-color;
+    color: var(--gl-text-color, $gl-text-color);
   }
 }
 

app/assets/stylesheets/page_bundles/build.scss

@@ -61,7 +61,7 @@
   }
 
   .environment-information {
-    border: 1px solid $border-color;
+    border: 1px solid var(--border-color, $border-color);
     padding: 8px $gl-padding 12px;
     border-radius: $border-radius-default;
 
@@ -219,9 +219,9 @@
   }
 
   .builds-container {
-    background-color: $white;
-    border-top: 1px solid $border-color;
-    border-bottom: 1px solid $border-color;
+    background-color: var(--white, $white);
+    border-top: 1px solid var(--border-color, $border-color);
+    border-bottom: 1px solid var(--border-color, $border-color);
     max-height: 300px;
     width: 289px;
     overflow: auto;
@@ -237,7 +237,7 @@
       width: 270px;
 
       &:hover {
-        color: $gl-text-color;
+        color: var(--gl-text-color, $gl-text-color);
       }
     }
 
@@ -256,13 +256,13 @@
       }
 
       &:hover {
-        background-color: $gray-darker;
+        background-color: var(--gray-50, $gray-50);
       }
     }
   }
 
   .link-commit {
-    color: $blue-600;
+    color: var(--blue-600, $blue-600);
   }
 }
 

app/assets/stylesheets/page_bundles/ci_status.scss

@@ -2,7 +2,7 @@
 
 .ci-status {
   padding: 2px 7px 4px;
-  border: 1px solid $gray-darker;
+  border: 1px solid var(--border-color, $border-color);
   white-space: nowrap;
   border-radius: 4px;
 
@@ -18,7 +18,11 @@
   }
 
   &.ci-failed {
-    @include status-color($red-100, $red-500, $red-600);
+    @include status-color(
+      var(--red-100, $red-100),
+      var(--red-500, $red-500),
+      var(--red-600, $red-600)
+    );
   }
 
   &.ci-success {
@@ -30,8 +34,8 @@
   &.ci-disabled,
   &.ci-scheduled,
   &.ci-manual {
-    color: $gl-text-color;
-    border-color: $gl-text-color;
+    color: var(--gl-text-color, $gl-text-color);
+    border-color: currentColor;
 
     &:not(span):hover {
       background-color: rgba($gl-text-color, 0.07);
@@ -39,25 +43,37 @@
   }
 
   &.ci-preparing {
-    @include status-color($gray-100, $gray-300, $gray-400);
+    @include status-color(
+      var(--gray-100, $gray-100),
+      var(--gray-300, $gray-300),
+      var(--gray-400, $gray-400)
+    );
   }
 
   &.ci-pending,
   &.ci-waiting-for-resource,
   &.ci-failed-with-warnings,
   &.ci-success-with-warnings {
-    @include status-color($orange-50, $orange-500, $orange-700);
+    @include status-color(
+      var(--orange-50, $orange-50),
+      var(--orange-500, $orange-500),
+      var(--orange-700, $orange-700)
+    );
   }
 
   &.ci-info,
   &.ci-running {
-    @include status-color($blue-100, $blue-500, $blue-600);
+    @include status-color(
+      var(--blue-100, $blue-100),
+      var(--blue-500, $blue-500),
+      var(--blue-600, $blue-600)
+    );
   }
 
   &.ci-created,
   &.ci-skipped {
-    color: $gl-text-color-secondary;
-    border-color: $gl-text-color-secondary;
+    color: var(--gray-500, $gray-500);
+    border-color: currentColor;
 
     &:not(span):hover {
       background-color: rgba($gl-text-color-secondary, 0.07);

app/assets/stylesheets/page_bundles/pipeline.scss

@@ -33,7 +33,7 @@
     }
 
     .stage {
-      color: $gl-text-color-secondary;
+      color: var(--gray-500, $gray-500);
       font-weight: $gl-font-weight-normal;
       vertical-align: middle;
     }
@@ -62,7 +62,7 @@
 
     a {
       font-weight: $gl-font-weight-bold;
-      color: $gl-text-color;
+      color: var(--gl-text-color, $gl-text-color);
       text-decoration: none;
 
       &:focus,
@@ -124,7 +124,7 @@
   display: flex;
   width: 100%;
   min-height: $dropdown-max-height-lg;
-  background-color: $gray-light;
+  background-color: var(--gray-50, $gray-50);
   padding: $gl-padding 0;
   overflow: auto;
 }
@@ -177,7 +177,7 @@
 
   a {
     text-decoration: none;
-    color: $gl-text-color;
+    color: var(--gl-text-color, $gl-text-color);
   }
 
   svg {
@@ -249,18 +249,18 @@
         height: 25px;
         position: absolute;
         top: -31px;
-        border-top: 2px solid $border-color;
+        border-top: 2px solid var(--border-color, $border-color);
       }
 
       &::after {
         left: -44px;
-        border-right: 2px solid $border-color;
+        border-right: 2px solid var(--border-color, $border-color);
         border-radius: 0 20px;
       }
 
       &::before {
         right: -44px;
-        border-left: 2px solid $border-color;
+        border-left: 2px solid var(--border-color, $border-color);
         border-radius: 20px 0 0;
       }
     }
@@ -316,7 +316,7 @@
 
     a.build-content:hover,
     button.build-content:hover {
-      background-color: $gray-darker;
+      background-color: var(--gray-100, $gray-100);
       border: 1px solid $dropdown-toggle-active-border-color;
     }
 
@@ -327,7 +327,7 @@
         position: absolute;
         top: 48%;
         right: -48px;
-        border-top: 2px solid $border-color;
+        border-top: 2px solid var(--border-color, $border-color);
         width: 48px;
         height: 1px;
       }
@@ -340,7 +340,7 @@
         content: '';
         top: -49px;
         position: absolute;
-        border-bottom: 2px solid $border-color;
+        border-bottom: 2px solid var(--border-color, $border-color);
         width: 25px;
         height: 69px;
       }
@@ -348,14 +348,14 @@
       // Right connecting curves
       &::after {
         right: -25px;
-        border-right: 2px solid $border-color;
+        border-right: 2px solid var(--border-color, $border-color);
         border-radius: 0 0 20px;
       }
 
       // Left connecting curves
       &::before {
         left: -25px;
-        border-left: 2px solid $border-color;
+        border-left: 2px solid var(--border-color, $border-color);
         border-radius: 0 0 0 20px;
       }
     }
@@ -390,7 +390,7 @@
       line-height: 0;
 
       svg {
-        fill: $gl-text-color-secondary;
+        fill: var(--gray-500, $gray-500);
       }
 
       .spinner {
@@ -488,13 +488,13 @@
     left: -6px;
     margin-top: 3px;
     border-width: 7px 5px 7px 0;
-    border-right-color: $border-color;
+    border-right-color: var(--border-color, $border-color);
   }
 
   &::after {
     left: -5px;
     border-width: 10px 7px 10px 0;
-    border-right-color: $white;
+    border-right-color: var(--white, $white);
   }
 }
 
@@ -519,5 +519,5 @@
 }
 
 .progress-bar.bg-primary {
-  background-color: $blue-500 !important;
+  background-color: var(--blue-500, $blue-500) !important;
 }

app/assets/stylesheets/page_bundles/pipelines.scss

@@ -22,7 +22,7 @@
     min-width: 170px; //Guarantees buttons don't break in several lines.
 
     .btn-default {
-      color: $gl-text-color-secondary;
+      color: var(--gray-500, $gray-500);
     }
 
     .btn.btn-retry:hover,
@@ -32,7 +32,7 @@
     }
 
     svg path {
-      fill: $gl-text-color-secondary;
+      fill: var(--gray-500, $gray-500);
     }
 
     .dropdown-menu {
@@ -42,7 +42,7 @@
 
     .dropdown-toggle,
     .dropdown-menu {
-      color: $gl-text-color-secondary;
+      color: var(--gray-500, $gray-500);
     }
 
     .btn-group.open .btn-default {

changelogs/unreleased/psi-dark-pipelines.yml

+---
+title: Fix pipeline page in dark mode
+merge_request: 49214
+author:
+type: fixed