Add latest changes from gitlab-org/gitlab@13-1-stable-ee

5 files changed, 304 insertions, 156 deletions

diff --git a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss
index 5675835a622..0b847902525 100644
--- a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss
+++ b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss
@@ -27,8 +27,7 @@
     z-index: 2;
   }
 
-  .is-readonly,
-  .editor.original {
+  .is-readonly .editor.original {
     .view-lines {
       cursor: default;
     }
diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
index e4c01c2bd6c..2b82b2226c6 100644
--- a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
+++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
@@ -1,9 +1,15 @@
 // -------
 // Please see `app/assets/stylesheets/page_bundles/ide_themes/README.md` for a guide on contributing new themes
 // -------
-.ide.theme-dark {
-  a:not(.btn) {
-    color: var(--ide-link-color);
+.ide {
+  $bs-input-focus-border: #80bdff;
+  $bs-input-focus-box-shadow: rgba(0, 123, 255, 0.25);
+
+  a:not(.btn),
+  .btn-link:hover,
+  .btn-link:focus,
+  .btn-link:active {
+    color: var(--ide-link-color, $blue-600);
   }
 
   h1,
@@ -19,156 +25,207 @@
   .context-header > a,
   input,
   textarea,
-  .md-area.is-focused,
   .dropdown-menu li button,
   .dropdown-menu-selectable li a.is-active,
   .dropdown-menu-inner-title,
-  .dropdown-menu-inner-content,
-  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a,
-  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover,
-  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a.active .badge.badge-pill,
-  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover .badge.badge-pill,
-  .badge.badge-pill,
   .bs-callout,
   .ide-pipeline .top-bar,
-  .ide-pipeline .top-bar .controllers .controllers-buttons {
-    color: var(--ide-text-color);
+  .ide-pipeline .top-bar .controllers .controllers-buttons,
+  .controllers-buttons svg,
+  .nav-links li a.active,
+  .md-area.is-focused {
+    color: var(--ide-text-color, $gl-text-color);
   }
 
-  .drag-handle:hover,
-  .card-header .badge.badge-pill {
-    background-color: var(--ide-dropdown-hover-background);
+  .badge.badge-pill {
+    color: var(--ide-text-color, $gray-800);
+    background-color: var(--ide-background, $badge-bg);
   }
 
+  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a,
+  .dropdown-menu-inner-content,
   .file-row .file-row-icon svg,
-  .file-row:hover .file-row-icon svg,
-  .controllers-buttons svg {
-    color: var(--ide-text-color-secondary);
+  .file-row:hover .file-row-icon svg {
+    color: var(--ide-text-color-secondary, $gl-text-color-secondary);
+  }
+
+  .nav-links:not(.quick-links) li:not(.md-header-toolbar) {
+    &:hover a,
+    &.active a,
+    a:hover,
+    a.active {
+      &,
+      .badge.badge-pill {
+        color: var(--ide-text-color, $black);
+        border-color: var(--ide-input-border, $gray-darkest);
+      }
+    }
+  }
+
+  .drag-handle:hover {
+    background-color: var(--ide-dropdown-hover-background, $white-normal);
+  }
+
+  .card-header {
+    background-color: var(--ide-background, $white);
+
+    .badge.badge-pill {
+      background-color: var(--ide-dropdown-hover-background, $badge-bg);
+    }
   }
 
   .text-secondary {
-    color: var(--ide-text-color-secondary) !important;
+    color: var(--ide-text-color-secondary, $gl-text-color-secondary) !important;
   }
 
   input[type='search']::placeholder,
   input[type='text']::placeholder,
-  textarea::placeholder,
+  textarea::placeholder {
+    color: var(--ide-input-border, $gl-text-color-tertiary);
+  }
+
   .dropdown-input .fa {
-    color: var(--ide-input-border);
+    color: var(--ide-input-border, $dropdown-input-fa-color);
   }
 
   .ide-nav-form .input-icon {
-    color: var(--ide-input-border);
+    color: var(--ide-input-border, $dropdown-input-fa-color);
+  }
+
+  code {
+    background-color: var(--ide-background, $gray-100);
   }
 
-  code,
-  .badge.badge-pill,
-  .card-header,
   .bs-callout,
   .ide-pipeline .top-bar,
   .ide-terminal .top-bar {
-    background-color: var(--ide-background);
+    background-color: var(--ide-background, $gray-light);
   }
 
   .bs-callout {
-    border-color: var(--ide-dropdown-background);
+    border-color: var(--ide-dropdown-background, $border-color);
 
     code {
-      background-color: var(--ide-dropdown-background);
+      background-color: var(--ide-dropdown-background, $gray-100);
     }
   }
 
-  .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover {
-    border-color: var(--ide-dropdown-hover-background);
+  .common-note-form .md-area {
+    border-color: var(--ide-input-border, $border-color);
   }
 
-  .common-note-form .md-area {
-    border-color: var(--ide-input-border);
+  .md table:not(.code) tr th {
+    background-color: var(--ide-highlight-background, $gray-100);
   }
 
   &,
-  .md table:not(.code) tr th,
-  .common-note-form .md-area,
-  .card {
-    background-color: var(--ide-highlight-background);
+  .card,
+  .common-note-form .md-area {
+    background-color: var(--ide-highlight-background, $white);
   }
 
   .card,
   .card-header,
   .ide-terminal .top-bar,
   .ide-pipeline .top-bar {
-    border-color: var(--ide-border-color);
+    border-color: var(--ide-border-color, $border-color);
+  }
+
+  hr {
+    border-color: var(--ide-border-color, darken($gray-normal, 8%));
   }
 
-  hr,
   .md h1,
   .md h2,
   .md blockquote,
-  pre,
   .md table:not(.code) tbody td,
   .md table:not(.code) tr th,
-  .nav-links:not(.quick-links) {
-    border-color: var(--ide-border-color-alt);
+  .nav-links:not(.quick-links),
+  .common-note-form .md-area.is-focused .nav-links {
+    border-color: var(--ide-border-color-alt, $white-dark);
   }
 
-  .ide-sidebar-link.active {
-    color: var(--ide-highlight-accent);
-    box-shadow: inset 3px 0 var(--ide-highlight-accent);
+  pre {
+    border-color: var(--ide-border-color-alt, $gray-200);
 
-    &.is-right {
-      box-shadow: inset -3px 0 var(--ide-highlight-accent);
+    code {
+      background-color: var(--ide-border-color, inherit);
     }
   }
 
-  .nav-links li.active a,
-  .nav-links li a.active {
-    border-color: var(--ide-highlight-accent);
-    color: var(--ide-text-color);
-  }
+  // highlight accents (based on navigation theme) should only apply
+  // in the default white theme and "none" theme.
+  &:not(.theme-white):not(.theme-none) {
+    .ide-sidebar-link.active {
+      color: var(--ide-highlight-accent, $gl-text-color);
+      box-shadow: inset 3px 0 var(--ide-highlight-accent, $gl-text-color);
+
+      &.is-right {
+        box-shadow: inset -3px 0 var(--ide-highlight-accent, $gl-text-color);
+      }
+    }
+
+    .nav-links li.active a,
+    .nav-links li a.active {
+      border-color: var(--ide-highlight-accent, $gl-text-color);
+    }
 
-  .avatar-container {
-    &,
-    .avatar {
-      color: var(--ide-text-color);
-      background-color: var(--ide-highlight-background);
-      border-color: var(--ide-highlight-background);
+    .dropdown-menu .nav-links li a.active {
+      border-color: var(--ide-highlight-accent, $gl-text-color);
+    }
+
+    // for other themes, suppress different avatar default colors for simplicity
+    .avatar-container {
+      &,
+      .avatar {
+        color: var(--ide-text-color, $gl-text-color);
+        background-color: var(--ide-highlight-background, $white);
+        border-color: var(--ide-highlight-background, rgba($black, $gl-avatar-border-opacity));
+      }
     }
   }
 
   input[type='text'],
   input[type='search'],
   .filtered-search-box {
-    border-color: var(--ide-input-border);
-    background: var(--ide-input-background) !important;
+    border-color: var(--ide-input-border, $border-color);
+    background: var(--ide-input-background, $white) !important;
+  }
+
+  input[type='text']:not([disabled]):not([readonly]):focus,
+  .md-area.is-focused {
+    border-color: var(--ide-input-border, $bs-input-focus-border);
+    box-shadow: 0 0 0 3px var(--ide-dropdown-background, $bs-input-focus-box-shadow);
   }
 
   input[type='text'],
   input[type='search'],
   .filtered-search-box,
   textarea {
-    color: var(--ide-input-color) !important;
+    color: var(--ide-input-color, $gl-text-color) !important;
   }
 
   .filtered-search-box input[type='search'] {
-    border-color: transparent;
+    border-color: transparent !important;
+    box-shadow: none !important;
   }
 
   .filtered-search-token .value-container,
   .filtered-search-term .value-container {
-    background-color: var(--ide-dropdown-hover-background);
-    color: var(--ide-text-color);
+    background-color: var(--ide-dropdown-hover-background, $white-normal);
+    color: var(--ide-text-color, $gl-text-color);
 
     &:hover {
-      background-color: var(--ide-input-border);
+      background-color: var(--ide-input-border, $gray-200);
     }
   }
 
   @function calc-btn-hover-padding($original-padding, $original-border: 1px) {
-    @return calc(#{$original-padding + $original-border} - var(--ide-btn-hover-border-width));
+    @return calc(#{$original-padding + $original-border} - var(--ide-btn-hover-border-width, #{$original-border}));
   }
 
   .btn:not(.btn-link):not([disabled]):hover {
-    border-width: var(--ide-btn-hover-border-width);
+    border-width: var(--ide-btn-hover-border-width, 1px);
     padding: calc-btn-hover-padding(6px) calc-btn-hover-padding(10px);
   }
 
@@ -180,53 +237,71 @@
     padding: calc-btn-hover-padding(6px) 0;
   }
 
-  .btn-inverted,
   .btn-default,
   .dropdown,
   .dropdown-menu-toggle {
-    background-color: var(--ide-input-background) !important;
-    color: var(--ide-input-color) !important;
-    border-color: var(--ide-btn-default-border);
+    background-color: var(--ide-input-background, $white) !important;
+    color: var(--ide-input-color, $gl-text-color) !important;
+    border-color: var(--ide-btn-default-border, $border-color);
   }
 
-  .btn-inverted,
-  .btn-default {
+  .dropdown-menu-toggle {
+    border-color: var(--ide-btn-default-border, $gray-darkest);
+
     &:hover,
     &:focus {
-      border-color: var(--ide-btn-default-hover-border) !important;
+      background-color: var(--ide-dropdown-btn-hover-background, $gray-darker) !important;
+      border-color: var(--ide-dropdown-btn-hover-border, $gray-darkest) !important;
     }
   }
 
-  .dropdown,
-  .dropdown-menu-toggle {
+  // In IDE, the only inverted buttons are `.btn-remove`
+  .btn-inverted.btn-remove {
+    color: var(--ide-input-color, $red-500) !important;
+    background-color: var(--ide-input-background, $white) !important;
+    border-color: var(--ide-btn-default-border, $red-500);
+
     &:hover,
     &:focus {
-      background-color: var(--ide-dropdown-btn-hover-background) !important;
-      border-color: var(--ide-dropdown-btn-hover-border) !important;
+      color: var(--ide-input-color, $red-700) !important;
+      background-color: var(--ide-input-background, $red-100) !important;
+      border-color: var(--ide-btn-default-hover-border, $red-500) !important;
     }
-  }
 
-  .dropdown-menu {
-    color: var(--ide-text-color);
-    border-color: var(--ide-background);
-    background-color: var(--ide-dropdown-background);
+    &:active {
+      color: var(--ide-input-color, $red-800) !important;
+      background-color: var(--ide-input-background, $red-200) !important;
+      border-color: var(--ide-btn-default-hover-border, $red-600) !important;
+    }
+  }
 
-    .divider,
-    .nav-links:not(.quick-links) {
-      background-color: var(--ide-dropdown-hover-background);
-      border-color: var(--ide-dropdown-hover-background);
+  .btn-default {
+    &:hover,
+    &:focus {
+      border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important;
+      background-color: var(--ide-input-background, $white-normal) !important;
     }
 
-    .nav-links li a.active {
-      border-color: var(--ide-highlight-accent);
+    &:active,
+    .active {
+      border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important;
+      background-color: var(--ide-input-background, $white-dark) !important;
     }
+  }
 
-    .nav-links:not(.quick-links) li:not(.md-header-toolbar) a {
-      color: var(--ide-text-color);
+  .dropdown-menu {
+    color: var(--ide-text-color, $gl-text-color);
+    border-color: var(--ide-background, $border-color);
+    background-color: var(--ide-dropdown-background, $white);
 
-      &.active {
-        color: var(--ide-text-color);
-      }
+    .nav-links:not(.quick-links) {
+      background-color: var(--ide-dropdown-hover-background, $white);
+      border-color: var(--ide-dropdown-hover-background, $border-color);
+    }
+
+    .divider {
+      background-color: var(--ide-dropdown-hover-background, $gray-200);
+      border-color: var(--ide-dropdown-hover-background, $gray-200);
     }
 
     li > a:not(.disable-hover):hover,
@@ -234,75 +309,88 @@
     li button:not(.disable-hover):hover,
     li button:not(.disable-hover):focus,
     li button.is-focused {
-      background-color: var(--ide-dropdown-hover-background);
-      color: var(--ide-text-color);
+      background-color: var(--ide-dropdown-hover-background, $gray-darker);
+      color: var(--ide-text-color, $gl-text-color);
     }
   }
 
   .dropdown-title,
   .dropdown-input {
-    border-color: var(--ide-dropdown-hover-background) !important;
+    border-color: var(--ide-dropdown-hover-background, $gray-200) !important;
   }
 
   .btn-primary,
   .btn-info {
-    background-color: var(--ide-btn-primary-background);
-    border-color: var(--ide-btn-primary-border) !important;
+    background-color: var(--ide-btn-primary-background, $blue-500);
+    border-color: var(--ide-btn-primary-border, $blue-600) !important;
 
     &:hover,
     &:focus {
-      border-color: var(--ide-btn-primary-hover-border) !important;
+      background-color: var(--ide-btn-primary-background, $blue-600);
+      border-color: var(--ide-btn-primary-hover-border, $blue-700) !important;
+    }
+
+    &:active,
+    &.active {
+      background-color: var(--ide-btn-primary-background, $blue-700);
+      border-color: var(--ide-btn-primary-hover-border, $blue-800) !important;
     }
   }
 
   .btn-success {
-    background-color: var(--ide-btn-success-background);
-    border-color: var(--ide-btn-success-border) !important;
+    background-color: var(--ide-btn-success-background, $green-500);
+    border-color: var(--ide-btn-success-border, $green-600) !important;
 
     &:hover,
     &:focus {
-      border-color: var(--ide-btn-success-hover-border) !important;
+      background-color: var(--ide-btn-success-background, $green-600);
+      border-color: var(--ide-btn-success-hover-border, $green-700) !important;
+    }
+
+    &:active,
+    &.active {
+      background-color: var(--ide-btn-success-background, $green-700);
+      border-color: var(--ide-btn-success-hover-border, $green-800) !important;
     }
   }
 
   .btn[disabled] {
-    background: var(--ide-btn-default-background) !important;
-    border: 1px solid var(--ide-btn-disabled-border) !important;
-    color: var(--ide-btn-disabled-color) !important;
+    background-color: var(--ide-btn-default-background, $gray-light) !important;
+    border: 1px solid var(--ide-btn-disabled-border, $gray-200) !important;
+    color: var(--ide-btn-disabled-color, $gl-text-color-disabled) !important;
   }
 
-  pre code,
   .md table:not(.code) tbody {
-    background-color: var(--ide-border-color);
+    background-color: var(--ide-border-color, $white);
   }
 
   .animation-container {
     [class^='skeleton-line-'] {
-      background-color: var(--ide-animation-gradient-1);
+      background-color: var(--ide-animation-gradient-1, $gray-100);
 
       &::after {
         background-image: linear-gradient(to right,
-        var(--ide-animation-gradient-1) 0%,
-        var(--ide-animation-gradient-2) 20%,
-        var(--ide-animation-gradient-1) 40%,
-        var(--ide-animation-gradient-1) 100%);
+        var(--ide-animation-gradient-1, $gray-100) 0%,
+        var(--ide-animation-gradient-2, $gray-10) 20%,
+        var(--ide-animation-gradient-1, $gray-100) 40%,
+        var(--ide-animation-gradient-1, $gray-100) 100%);
       }
     }
   }
 
   .idiff.addition {
-    background-color: var(--ide-diff-insert);
+    background-color: var(--ide-diff-insert, $line-added-dark);
   }
 
   .idiff.deletion {
-    background-color: var(--ide-diff-remove);
+    background-color: var(--ide-diff-remove, $line-removed-dark);
   }
-}
 
-.navbar.theme-dark {
-  border-bottom-color: transparent;
+  ~ .popover {
+    box-shadow: none;
+  }
 }
 
-.theme-dark ~ .popover {
-  box-shadow: none;
+.navbar:not(.theme-white):not(.theme-none) {
+  border-bottom-color: transparent;
 }
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index 61914740ac0..9c92f891834 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -5,6 +5,7 @@
 @import './ide_theme_overrides';
 
 @import './ide_themes/dark';
+@import './ide_themes/solarized-dark';
 
 $search-list-icon-width: 18px;
 $ide-activity-bar-width: 60px;
@@ -24,6 +25,13 @@ $ide-commit-header-height: 48px;
   @include str-truncated(250px);
 }
 
+.ide-layout {
+  // Fix for iOS 13+, the height of the page is actually less than
+  // 100vh because of the presence of the bottom bar
+  max-height: 100%;
+  position: fixed;
+}
+
 .ide-view {
   position: relative;
   margin-top: 0;
@@ -65,6 +73,7 @@ $ide-commit-header-height: 48px;
   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);
   overflow: hidden;
 }
 
@@ -88,7 +97,7 @@ $ide-commit-header-height: 48px;
 
     &.active {
       background-color: var(--ide-highlight-background, $white);
-      border-bottom-color: var(--ide-border-color, $white);
+      border-bottom-color: transparent;
     }
 
     &:not(.disabled) {
@@ -281,7 +290,6 @@ $ide-commit-header-height: 48px;
 .multi-file-commit-panel {
   display: flex;
   position: relative;
-  width: 340px;
   padding: 0;
   background-color: var(--ide-background, $gray-light);
 
@@ -386,7 +394,7 @@ $ide-commit-header-height: 48px;
 
   &:hover,
   &:focus {
-    background: var(--ide-background, $gray-100);
+    background: var(--ide-background, $gray-50);
 
     outline: 0;
   }
@@ -558,7 +566,7 @@ $ide-commit-header-height: 48px;
 
   &:hover {
     color: var(--ide-text-color, $gl-text-color);
-    background-color: var(--ide-background-hover, $gray-100);
+    background-color: var(--ide-background-hover, $gray-50);
   }
 
   &:focus {
@@ -584,14 +592,15 @@ $ide-commit-header-height: 48px;
       background: var(--ide-highlight-background, $white);
     }
 
-    &.is-right {
-      padding-right: $gl-padding;
-      padding-left: $gl-padding + 1px;
+  }
 
-      &::after {
-        right: auto;
-        left: -1px;
-      }
+  &.is-right {
+    padding-right: $gl-padding;
+    padding-left: $gl-padding + 1px;
+
+    &::after {
+      right: auto;
+      left: -1px;
     }
   }
 }
@@ -872,26 +881,21 @@ $ide-commit-header-height: 48px;
 }
 
 .ide-sidebar {
-  width: auto;
   min-width: 60px;
 }
 
 .ide-right-sidebar {
-  .ide-activity-bar {
-    border-left: 1px solid var(--ide-border-color, $white-dark);
-  }
-
   .multi-file-commit-panel-inner {
-    width: 350px;
     padding: $grid-size 0;
     background-color: var(--ide-highlight-background, $white);
-    border-left: 1px solid var(--ide-border-color, $white-dark);
+    border-right: 1px solid var(--ide-border-color, $white-dark);
   }
 
   .ide-right-sidebar-jobs-detail {
     padding-bottom: 0;
   }
 
+  .ide-right-sidebar-terminal,
   .ide-right-sidebar-clientside {
     padding: 0;
   }
@@ -901,7 +905,7 @@ $ide-commit-header-height: 48px;
   @include ide-trace-view();
 
   svg {
-    --svg-status-bg: var(--ide-background, $white);
+    --svg-status-bg: var(--ide-background, #{$white});
   }
 
   .empty-state {
@@ -1043,7 +1047,7 @@ $ide-commit-header-height: 48px;
 .ide-entry-dropdown-toggle {
   padding: $gl-padding-4;
   color: var(--ide-text-color, $gl-text-color);
-  background-color: var(--ide-background, $gray-100);
+  background-color: var(--ide-background, $gray-50);
 
   &:hover {
     background-color: var(--ide-file-row-btn-hover-background, $gray-200);
@@ -1144,12 +1148,12 @@ $ide-commit-header-height: 48px;
 }
 
 .file-row.is-active {
-  background: var(--ide-background, $gray-100);
+  background: var(--ide-background, $gray-50);
 }
 
 .file-row:hover,
 .file-row:focus {
-  background: var(--ide-background, $gray-100);
+  background: var(--ide-background, $gray-50);
 
   .ide-new-btn {
     display: block;
@@ -1159,3 +1163,22 @@ $ide-commit-header-height: 48px;
     fill: var(--ide-text-color-secondary, $gl-text-color-secondary);
   }
 }
+
+.ide-terminal {
+  @include ide-trace-view();
+
+  .terminal-wrapper {
+    background: $black;
+    color: $gray-darkest;
+    overflow: hidden;
+  }
+
+  .xterm {
+    height: 100%;
+    padding: $grid-size;
+  }
+
+  .xterm-viewport {
+    overflow-y: auto;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/ide_themes/README.md b/app/assets/stylesheets/page_bundles/ide_themes/README.md
index 535179cc4c2..82e89aef49b 100644
--- a/app/assets/stylesheets/page_bundles/ide_themes/README.md
+++ b/app/assets/stylesheets/page_bundles/ide_themes/README.md
@@ -32,19 +32,7 @@ To add a new theme, follow the following steps:
 3. Copy over all the CSS variables from `_dark.scss` to `_solarized_dark.scss` and assign them your own values.
    Put them under the selector `.ide.theme-solarized-dark`.
 4. Import this newly created SCSS file in `ide.scss` file in the parent directory.
-5. To make sure the variables apply to to your theme, add the selector `.ide.theme-solarized-dark` to the top
-   of `_ide_theme_overrides.scss` file. The file should now look like this:
-
-   ```scss
-   .ide.theme-dark,
-   .ide.theme-solarized-dark {
-     /* file contents */
-   }
-   ```
-
-   This step is temporary until all CSS variables in that file have their
-   default values assigned.
-6. That's it! Raise a merge request with your newly added theme.
+5. That's it! Raise a merge request with your newly added theme.
 
 ## Modifying Monaco Themes
 
diff --git a/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss b/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss
new file mode 100644
index 00000000000..a58a0ed9475
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss
@@ -0,0 +1,50 @@
+// -------
+// Please see `app/assets/stylesheets/page_bundles/ide_themes/README.md` for a guide on contributing new themes
+// -------
+.ide.theme-solarized-dark {
+  --ide-border-color: #002c38;
+  --ide-border-color-alt: var(--ide-background);
+  --ide-highlight-accent: #fff;
+  --ide-text-color: #ddd;
+  --ide-text-color-secondary: #ddd;
+  --ide-background: #004152;
+  --ide-background-hover: #003b4d;
+  --ide-highlight-background: #003240;
+  --ide-link-color: #73b9ff;
+  --ide-footer-background: var(--ide-highlight-background);
+
+  --ide-input-border: #d8d8d8;
+  --ide-input-background: transparent;
+  --ide-input-color: #fff;
+
+  --ide-btn-default-background: transparent;
+  --ide-btn-default-border: var(--ide-input-border);
+  --ide-btn-default-hover-border: #d8d8d8;
+
+  --ide-btn-primary-background: #1068bf;
+  --ide-btn-primary-border: #428fdc;
+  --ide-btn-primary-hover-border: #63a6e9;
+
+  --ide-btn-success-background: #217645;
+  --ide-btn-success-border: #108548;
+  --ide-btn-success-hover-border: #2da160;
+
+  --ide-btn-disabled-border: rgba(223, 223, 223, 0.24);
+  --ide-btn-disabled-color: rgba(145, 145, 145, 0.48);
+
+  --ide-btn-hover-border-width: 2px;
+
+  --ide-dropdown-background: #004c61;
+  --ide-dropdown-hover-background: #00617a;
+
+  --ide-dropdown-btn-hover-border: #e9ecef;
+  --ide-dropdown-btn-hover-background: var(--ide-background-hover);
+
+  --ide-file-row-btn-hover-background: #005a73;
+
+  --ide-diff-insert: rgba(155, 185, 85, 0.2);
+  --ide-diff-remove: rgba(255, 0, 0, 0.2);
+
+  --ide-animation-gradient-1: var(--ide-file-row-btn-hover-background);
+  --ide-animation-gradient-2: var(--ide-dropdown-hover-background);
+  }