1 files changed, 26 insertions, 9 deletions

diff --git a/app/assets/stylesheets/page_bundles/ci_status.scss b/app/assets/stylesheets/page_bundles/ci_status.scss
index 8522a0a8fe4..232d363b7f1 100644
--- a/app/assets/stylesheets/page_bundles/ci_status.scss
+++ b/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 {
@@ -26,11 +30,12 @@
   }
 
   &.ci-canceled,
+  &.ci-skipped,
   &.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);
@@ -38,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);