Added web IDE to GitLab theme definitionide-ui-theme

Closes #44571

2 files changed, 93 insertions, 34 deletions

diff --git a/app/assets/stylesheets/framework/gitlab_theme.scss b/app/assets/stylesheets/framework/gitlab_theme.scss
index db36e27fa74..7f3f7e67d76 100644
--- a/app/assets/stylesheets/framework/gitlab_theme.scss
+++ b/app/assets/stylesheets/framework/gitlab_theme.scss
@@ -2,7 +2,15 @@
  * Styles the GitLab application with a specific color theme
  */
 
-@mixin gitlab-theme($color-100, $color-200, $color-500, $color-700, $color-800, $color-900, $color-alternate) {
+@mixin gitlab-theme(
+  $color-100,
+  $color-200,
+  $color-500,
+  $color-700,
+  $color-800,
+  $color-900,
+  $color-alternate
+) {
   // Header
 
   .navbar-gitlab {
@@ -23,7 +31,7 @@
       > li {
         > a:hover,
         > a:focus {
-          background-color: rgba($color-200, .2);
+          background-color: rgba($color-200, 0.2);
         }
 
         &.active > a,
@@ -33,7 +41,7 @@
         }
 
         &.line-separator {
-          border-left: 1px solid rgba($color-200, .2);
+          border-left: 1px solid rgba($color-200, 0.2);
         }
       }
     }
@@ -56,7 +64,7 @@
           &:hover,
           &:focus {
             @media (min-width: $screen-sm-min) {
-              background-color: rgba($color-200, .2);
+              background-color: rgba($color-200, 0.2);
             }
 
             svg {
@@ -91,34 +99,34 @@
     > a {
       &:hover,
       &:focus {
-        background-color: rgba($color-200, .2);
+        background-color: rgba($color-200, 0.2);
       }
     }
   }
 
   .search {
     form {
-      background-color: rgba($color-200, .2);
+      background-color: rgba($color-200, 0.2);
 
       &:hover {
-        background-color: rgba($color-200, .3);
+        background-color: rgba($color-200, 0.3);
       }
     }
 
     .location-badge {
       color: $color-100;
-      background-color: rgba($color-200, .1);
+      background-color: rgba($color-200, 0.1);
       border-right: 1px solid $color-800;
     }
 
     .search-input::placeholder {
-      color: rgba($color-200, .8);
+      color: rgba($color-200, 0.8);
     }
 
     .search-input-wrap {
       .search-icon,
       .clear-icon {
-        fill: rgba($color-200, .8);
+        fill: rgba($color-200, 0.8);
       }
     }
 
@@ -133,7 +141,7 @@
 
       .search-input-wrap {
         .search-icon {
-          fill: rgba($color-200, .8);
+          fill: rgba($color-200, 0.8);
         }
       }
     }
@@ -144,7 +152,6 @@
     color: $color-900;
   }
 
-
   // Sidebar
   .nav-sidebar li.active {
     box-shadow: inset 4px 0 0 $color-700;
@@ -169,28 +176,90 @@
       font-weight: $gl-font-weight-bold;
     }
   }
-}
 
+  // Web IDE
+  .ide-sidebar-link {
+    color: $color-200;
+    background-color: $color-700;
+
+    &:hover,
+    &:focus {
+      background-color: $color-500;
+    }
+
+    &:active {
+      background: $color-800;
+    }
+  }
+
+  .branch-container {
+    border-left-color: $color-700;
+  }
+
+  .branch-header-title {
+    color: $color-700;
+  }
+}
 
 body {
   &.ui_indigo {
-    @include gitlab-theme($indigo-100, $indigo-200, $indigo-500, $indigo-700, $indigo-800, $indigo-900, $white-light);
+    @include gitlab-theme(
+      $indigo-100,
+      $indigo-200,
+      $indigo-500,
+      $indigo-700,
+      $indigo-800,
+      $indigo-900,
+      $white-light
+    );
   }
 
   &.ui_dark {
-    @include gitlab-theme($theme-gray-100, $theme-gray-200, $theme-gray-500, $theme-gray-700, $theme-gray-800, $theme-gray-900, $white-light);
+    @include gitlab-theme(
+      $theme-gray-100,
+      $theme-gray-200,
+      $theme-gray-500,
+      $theme-gray-700,
+      $theme-gray-800,
+      $theme-gray-900,
+      $white-light
+    );
   }
 
   &.ui_blue {
-    @include gitlab-theme($theme-blue-100, $theme-blue-200, $theme-blue-500, $theme-blue-700, $theme-blue-800, $theme-blue-900, $white-light);
+    @include gitlab-theme(
+      $theme-blue-100,
+      $theme-blue-200,
+      $theme-blue-500,
+      $theme-blue-700,
+      $theme-blue-800,
+      $theme-blue-900,
+      $white-light
+    );
   }
 
   &.ui_green {
-    @include gitlab-theme($theme-green-100, $theme-green-200, $theme-green-500, $theme-green-700, $theme-green-800, $theme-green-900, $white-light);
+    @include gitlab-theme(
+      $theme-green-100,
+      $theme-green-200,
+      $theme-green-500,
+      $theme-green-700,
+      $theme-green-800,
+      $theme-green-900,
+      $white-light
+    );
   }
 
   &.ui_light {
-    @include gitlab-theme($theme-gray-900, $theme-gray-700, $theme-gray-800, $theme-gray-700, $theme-gray-700, $theme-gray-100, $theme-gray-700);
+    @include gitlab-theme(
+      $theme-gray-900,
+      $theme-gray-700,
+      $theme-gray-800,
+      $theme-gray-700,
+      $theme-gray-700,
+      $theme-gray-100,
+      $theme-gray-700
+    );
 
     .navbar-gitlab {
       background-color: $theme-gray-100;
@@ -270,5 +339,9 @@ body {
     .sidebar-top-level-items > li.active .badge {
       color: $theme-gray-900;
     }
+
+    .ide-sidebar-link {
+      color: $white-light;
+    }
   }
 }
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 7a8fbfc517d..2aded17bd5b 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -398,7 +398,7 @@
   }
 
   .branch-container {
-    border-left: 4px solid $indigo-700;
+    border-left: 4px solid;
     margin-bottom: $gl-bar-padding;
   }
 
@@ -410,7 +410,6 @@
   .branch-header-title {
     flex: 1;
     padding: $grid-size $gl-padding;
-    color: $indigo-700;
     font-weight: $gl-font-weight-bold;
 
     svg {
@@ -763,20 +762,7 @@
 
 .ide-sidebar-link {
   padding: $gl-padding-8 $gl-padding;
-  background: $indigo-700;
-  color: $white-light;
-  text-decoration: none;
   display: flex;
   align-items: center;
-
-  &:focus,
-  &:hover {
-    color: $white-light;
-    text-decoration: underline;
-    background: $indigo-500;
-  }
-
-  &:active {
-    background: $indigo-800;
-  }
+  font-weight: $gl-font-weight-bold;
 }