1 files changed, 80 insertions, 15 deletions
diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
index 1e239877428..d1f7c2e9865 100644
--- a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
+++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
@@ -6,9 +6,10 @@
   $bs-input-focus-box-shadow: rgba(0, 123, 255, 0.25);
 
   a:not(.btn),
-  .btn-link:hover,
-  .btn-link:focus,
-  .btn-link:active {
+  .gl-button.btn-link,
+  .gl-button.btn-link:hover,
+  .gl-button.btn-link:focus,
+  .gl-button.btn-link:active {
     color: var(--ide-link-color, $blue-600);
   }
 
@@ -225,20 +226,20 @@
     @return calc(#{$original-padding + $original-border} - var(--ide-btn-hover-border-width, #{$original-border}));
   }
 
-  .btn:not(.btn-link):not([disabled]):hover {
+  .btn:not(.gl-button):not(.btn-link):not([disabled]):hover {
     border-width: var(--ide-btn-hover-border-width, 1px);
     padding: calc-btn-hover-padding(6px) calc-btn-hover-padding(10px);
   }
 
-  .btn:not([disabled]).btn-sm:hover {
+  .btn:not(.gl-button):not([disabled]).btn-sm:hover {
     padding: calc-btn-hover-padding(4px) calc-btn-hover-padding(10px);
   }
 
-  .btn:not([disabled]).btn-block:hover {
+  .btn:not(.gl-button):not([disabled]).btn-block:hover {
     padding: calc-btn-hover-padding(6px) 0;
   }
 
-  .btn-default,
+  .btn-default:not(.gl-button),
   .dropdown,
   .dropdown-menu-toggle {
     background-color: var(--ide-input-background, $white) !important;
@@ -257,7 +258,7 @@
   }
 
   // In IDE, the only inverted buttons are `.btn-remove`
-  .btn-inverted.btn-remove {
+  .btn-inverted.btn-remove:not(.gl-button) {
     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);
@@ -276,17 +277,21 @@
     }
   }
 
-  .btn-default {
+  // todo: remove this block after all default buttons have been migrated to gl-button
+  .btn-default:not(.gl-button) {
+    background-color: var(--ide-btn-default-background, $white) !important;
+    border-color: var(--ide-btn-default-border, $border-color);
+
     &:hover,
     &:focus {
       border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important;
-      background-color: var(--ide-input-background, $white-normal) !important;
+      background-color: var(--ide-btn-default-background, $white-normal) !important;
     }
 
     &:active,
     .active {
       border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important;
-      background-color: var(--ide-input-background, $white-dark) !important;
+      background-color: var(--ide-btn-default-background, $white-dark) !important;
     }
   }
 
@@ -320,8 +325,9 @@
     border-color: var(--ide-dropdown-hover-background, $gray-100) !important;
   }
 
-  .btn-primary,
-  .btn-info {
+  // todo: remove this block after all primary/info buttons have been migrated to gl-button
+  .btn-primary:not(.gl-button),
+  .btn-info:not(.gl-button) {
     background-color: var(--ide-btn-primary-background, $blue-500);
     border-color: var(--ide-btn-primary-border, $blue-600) !important;
 
@@ -338,7 +344,8 @@
     }
   }
 
-  .btn-success {
+  // todo: remove this block after all success buttons have been migrated to gl-button
+  .btn-success:not(.gl-button) {
     background-color: var(--ide-btn-success-background, $green-500);
     border-color: var(--ide-btn-success-border, $green-600) !important;
 
@@ -355,12 +362,70 @@
     }
   }
 
-  .btn[disabled] {
+  // todo: remove this block after all disabled buttons have been migrated to gl-button
+  .btn[disabled]:not(.gl-button) {
     background-color: var(--ide-btn-default-background, $gray-light) !important;
     border: 1px solid var(--ide-btn-disabled-border, $gray-100) !important;
     color: var(--ide-btn-disabled-color, $gl-text-color-disabled) !important;
   }
 
+  @function ide-btn-var($btn-type, $var-type, $value) {
+    @return var(--ide-btn-#{$btn-type}-#{$var-type}, $value);
+  }
+
+  @mixin ide-gl-button($btn-type, $bg-normal, $bg-hover, $bg-active, $border-normal, $border-hover, $border-focus, $border-active, $border-width-hover: 2px, $box-shadow-hover: $t-gray-a-08, $box-shadow-focus: 0 0 0 4px rgba($blue-500, 0.25)) {
+    background-color: ide-btn-var($btn-type, background, $bg-normal);
+    box-shadow: inset 0 0 0 1px ide-btn-var($btn-type, border, $border-normal);
+
+    &:hover,
+    &:focus {
+      background-color: ide-btn-var($btn-type, background, $bg-hover);
+    }
+
+    &:hover {
+      box-shadow: inset 0 0 0 ide-btn-var($btn-type, hover-border-width, $border-width-hover) ide-btn-var($btn-type, hover-border, $border-hover),
+        0 2px 2px 0 $box-shadow-hover;
+    }
+
+    &:focus {
+      box-shadow: inset 0 0 0 ide-btn-var($btn-type, hover-border-width, $border-width-hover) ide-btn-var($btn-type, hover-border, $border-focus),
+        ide-btn-var($btn-type, focus-box-shadow, $box-shadow-focus);
+    }
+
+    &:active:focus {
+      background-color: ide-btn-var($btn-type, background, $bg-active);
+      box-shadow: inset 0 0 0 ide-btn-var($btn-type, hover-border-width, $border-width-hover) ide-btn-var($btn-type, hover-border, $border-active),
+        ide-btn-var($btn-type, focus-box-shadow, $box-shadow-focus);
+    }
+  }
+
+  .btn-default.gl-button.gl-button {
+    color: var(--ide-input-color, $gl-text-color);
+
+    @include ide-gl-button(default, $white, $gray-50, $gray-100, $gray-200, $gray-300, $gray-300, $gray-400);
+  }
+
+  .btn-success.gl-button.gl-button {
+    @include ide-gl-button(success, $green-500, $green-600, $green-800, $green-600, $green-800, $green-800, $green-900);
+  }
+
+  .btn-info.gl-button.gl-button,
+  .btn-primary.gl-button.gl-button {
+    @include ide-gl-button(primary, $blue-500, $blue-600, $blue-800, $blue-600, $blue-800, $blue-800, $blue-900);
+  }
+
+  .btn-danger.btn-danger-secondary.gl-button.gl-button {
+    color: var(--ide-input-color, $red-500);
+
+    @include ide-gl-button(danger-secondary, $white, $red-50, $red-100, $red-500, $red-600, $red-600, $red-700);
+  }
+
+  .btn[disabled].gl-button.gl-button {
+    color: var(--ide-btn-disabled-color, $gl-text-color-disabled);
+
+    @include ide-gl-button(disabled, $gray-10, $gray-10, $gray-10, $gray-100, $gray-100, $gray-100, $gray-100, 1px, transparent, transparent);
+  }
+
   .md table:not(.code) tbody {
     background-color: var(--ide-border-color, $white);
   }