11 files changed, 147 insertions, 0 deletions
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss
index c471d6183d8..36fa457f244 100644
--- a/app/assets/stylesheets/themes/_dark.scss
+++ b/app/assets/stylesheets/themes/_dark.scss
@@ -19,6 +19,12 @@ $gray-dark: darken($gray-100, 2);
 $gray-darker: darken($gray-200, 2);
 $gray-darkest: $gray-700;
 
+// Some of the other $t-gray-a variables are used
+// for borders and some other places, so we cannot override
+// them. These are used only for box shadows so we can
+$t-gray-a-16: rgba($gray-10, 0.16);
+$t-gray-a-24: rgba($gray-10, 0.24);
+
 $black: #fff;
 $black-normal: $gray-900;
 $white: $gray-50;
diff --git a/app/assets/stylesheets/themes/theme_blue.scss b/app/assets/stylesheets/themes/theme_blue.scss
index 90122cec31f..06f3e13e99e 100644
--- a/app/assets/stylesheets/themes/theme_blue.scss
+++ b/app/assets/stylesheets/themes/theme_blue.scss
@@ -9,5 +9,14 @@ body {
       $theme-blue-900,
       $white
     );
+
+    .page-with-super-sidebar {
+      @include gitlab-theme-super-sidebar(
+        $theme-blue-50,
+        $theme-blue-200,
+        $theme-blue-900,
+        $theme-blue-900,
+      );
+    }
   }
 }
diff --git a/app/assets/stylesheets/themes/theme_gray.scss b/app/assets/stylesheets/themes/theme_gray.scss
index a6cdfb36a7c..3112aaef227 100644
--- a/app/assets/stylesheets/themes/theme_gray.scss
+++ b/app/assets/stylesheets/themes/theme_gray.scss
@@ -9,5 +9,14 @@ body {
       $gray-900,
       $white
     );
+
+    .page-with-super-sidebar {
+      @include gitlab-theme-super-sidebar(
+        $gray-50,
+        $gray-100,
+        $gray-900,
+        $gray-900,
+      );
+    }
   }
 }
diff --git a/app/assets/stylesheets/themes/theme_green.scss b/app/assets/stylesheets/themes/theme_green.scss
index 0300f261d64..c9ea1162206 100644
--- a/app/assets/stylesheets/themes/theme_green.scss
+++ b/app/assets/stylesheets/themes/theme_green.scss
@@ -9,5 +9,14 @@ body {
       $theme-green-900,
       $white
     );
+
+    .page-with-super-sidebar {
+      @include gitlab-theme-super-sidebar(
+        $theme-green-50,
+        $theme-green-200,
+        $theme-green-900,
+        $theme-green-900,
+      );
+    }
   }
 }
diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss
index f841a9047cc..8f0e0781918 100644
--- a/app/assets/stylesheets/themes/theme_helper.scss
+++ b/app/assets/stylesheets/themes/theme_helper.scss
@@ -276,3 +276,63 @@
     }
   }
 }
+
+@mixin gitlab-theme-super-sidebar(
+  $theme-color-lightest,
+  $theme-color-light,
+  $theme-color,
+  $theme-color-darkest,
+) {
+  --transparent-white-16: rgba(255, 255, 255, 0.16);
+  --transparent-white-24: rgba(255, 255, 255, 0.24);
+
+  .super-sidebar {
+    background-color: $theme-color-lightest;
+  }
+
+  .super-sidebar .user-bar {
+    background-color: $theme-color;
+
+    .counter {
+      background-color: var(--transparent-white-16) !important;
+    }
+
+    .brand-logo,
+    .btn-default-tertiary,
+    .counter {
+      color: $theme-color-lightest;
+      mix-blend-mode: normal;
+
+      &:hover,
+      &:focus {
+        background-color: var(--transparent-white-24) !important;
+        color: $white;
+      }
+
+      .gl-icon {
+        color: $theme-color-light;
+      }
+    }
+  }
+
+  .super-sidebar hr {
+    mix-blend-mode: multiply;
+  }
+
+  .btn-with-notification {
+    &:hover,
+    &:focus {
+      mix-blend-mode: multiply;
+    }
+
+    .notification-dot-info {
+      background-color: $theme-color-darkest;
+      border-color: $theme-color-lightest;
+
+    }
+  }
+
+  .active-indicator {
+    background-color: $theme-color;
+  }
+}
diff --git a/app/assets/stylesheets/themes/theme_indigo.scss b/app/assets/stylesheets/themes/theme_indigo.scss
index 5a27a9cfdc5..78ce96667d4 100644
--- a/app/assets/stylesheets/themes/theme_indigo.scss
+++ b/app/assets/stylesheets/themes/theme_indigo.scss
@@ -9,5 +9,14 @@ body {
       $indigo-900,
       $white
     );
+
+    .page-with-super-sidebar {
+      @include gitlab-theme-super-sidebar(
+        $theme-indigo-50,
+        $theme-indigo-200,
+        $theme-indigo-900,
+        $theme-indigo-900,
+      );
+    }
   }
 }
diff --git a/app/assets/stylesheets/themes/theme_light_blue.scss b/app/assets/stylesheets/themes/theme_light_blue.scss
index 7cb0d98802e..73fe072393f 100644
--- a/app/assets/stylesheets/themes/theme_light_blue.scss
+++ b/app/assets/stylesheets/themes/theme_light_blue.scss
@@ -9,5 +9,14 @@ body {
       $theme-light-blue-700,
       $white
     );
+
+    .page-with-super-sidebar {
+      @include gitlab-theme-super-sidebar(
+        $theme-light-blue-50,
+        $theme-light-blue-200,
+        $theme-light-blue-700,
+        $theme-light-blue-900,
+      );
+    }
   }
 }
diff --git a/app/assets/stylesheets/themes/theme_light_green.scss b/app/assets/stylesheets/themes/theme_light_green.scss
index 797279cc37b..720a0ec58b8 100644
--- a/app/assets/stylesheets/themes/theme_light_green.scss
+++ b/app/assets/stylesheets/themes/theme_light_green.scss
@@ -9,5 +9,14 @@ body {
       $theme-light-green-700,
       $white
     );
+
+    .page-with-super-sidebar {
+      @include gitlab-theme-super-sidebar(
+        $theme-green-50,
+        $theme-green-200,
+        $theme-green-700,
+        $theme-green-900,
+      );
+    }
   }
 }
diff --git a/app/assets/stylesheets/themes/theme_light_indigo.scss b/app/assets/stylesheets/themes/theme_light_indigo.scss
index 3632c5ad45a..ff12366466a 100644
--- a/app/assets/stylesheets/themes/theme_light_indigo.scss
+++ b/app/assets/stylesheets/themes/theme_light_indigo.scss
@@ -9,5 +9,14 @@ body {
       $indigo-700,
       $white
     );
+
+    .page-with-super-sidebar {
+      @include gitlab-theme-super-sidebar(
+        $theme-indigo-50,
+        $theme-indigo-200,
+        $theme-indigo-700,
+        $theme-indigo-900,
+      );
+    }
   }
 }
diff --git a/app/assets/stylesheets/themes/theme_light_red.scss b/app/assets/stylesheets/themes/theme_light_red.scss
index 6c10d9178f1..3ae67309014 100644
--- a/app/assets/stylesheets/themes/theme_light_red.scss
+++ b/app/assets/stylesheets/themes/theme_light_red.scss
@@ -9,5 +9,14 @@ body {
       $theme-light-red-700,
       $white
     );
+
+    .page-with-super-sidebar {
+      @include gitlab-theme-super-sidebar(
+        $theme-light-red-50,
+        $theme-light-red-200,
+        $theme-light-red-700,
+        $theme-light-red-900,
+      );
+    }
   }
 }
diff --git a/app/assets/stylesheets/themes/theme_red.scss b/app/assets/stylesheets/themes/theme_red.scss
index 140e27de6e2..82de30e8b0e 100644
--- a/app/assets/stylesheets/themes/theme_red.scss
+++ b/app/assets/stylesheets/themes/theme_red.scss
@@ -9,5 +9,14 @@ body {
       $theme-red-900,
       $white
     );
+
+    .page-with-super-sidebar {
+      @include gitlab-theme-super-sidebar(
+        $theme-red-50,
+        $theme-red-200,
+        $theme-red-900,
+        $theme-red-900,
+      );
+    }
   }
 }