Migrate button styles in _ide_theme_overrides.scss

app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss

@@ -226,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;
@@ -258,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);
@@ -277,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;
     }
   }
 
@@ -321,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;
 
@@ -339,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;
 
@@ -356,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);
   }

app/assets/stylesheets/page_bundles/ide_themes/_dark.scss

@@ -20,20 +20,28 @@
   --ide-btn-default-background: transparent;
   --ide-btn-default-border: #bfbfbf;
   --ide-btn-default-hover-border: #d8d8d8;
+  --ide-btn-default-hover-border-width: 2px;
+  --ide-btn-default-focus-box-shadow: 0 0 0 1px #bfbfbf;
 
   --ide-btn-primary-background: #1068bf;
   --ide-btn-primary-border: #428fdc;
   --ide-btn-primary-hover-border: #63a6e9;
+  --ide-btn-primary-hover-border-width: 2px;
+  --ide-btn-primary-focus-box-shadow: 0 0 0 1px #63a6e9;
 
   --ide-btn-success-background: #217645;
   --ide-btn-success-border: #108548;
   --ide-btn-success-hover-border: #2da160;
+  --ide-btn-success-hover-border-width: 2px;
+  --ide-btn-success-focus-box-shadow: 0 0 0 1px #2da160;
 
+  --ide-btn-disabled-background: transparent;
   --ide-btn-disabled-border: rgba(223, 223, 223, 0.24);
+  --ide-btn-disabled-hover-border: rgba(223, 223, 223, 0.24);
+  --ide-btn-disabled-hover-border-width: 1px;
+  --ide-btn-disabled-focus-box-shadow: 0 0 0 0 transparent;
   --ide-btn-disabled-color: rgba(145, 145, 145, 0.48);
 
-  --ide-btn-hover-border-width: 2px;
-
   --ide-dropdown-background: #404040;
   --ide-dropdown-hover-background: #525252;
 

app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss

@@ -18,22 +18,30 @@
   --ide-input-color: #fff;
 
   --ide-btn-default-background: transparent;
-  --ide-btn-default-border: var(--ide-input-border);
+  --ide-btn-default-border: #d8d8d8;
   --ide-btn-default-hover-border: #d8d8d8;
+  --ide-btn-default-hover-border-width: 2px;
+  --ide-btn-default-focus-box-shadow: 0 0 0 1px #d8d8d8;
 
   --ide-btn-primary-background: #1068bf;
   --ide-btn-primary-border: #428fdc;
   --ide-btn-primary-hover-border: #63a6e9;
+  --ide-btn-primary-hover-border-width: 2px;
+  --ide-btn-primary-focus-box-shadow: 0 0 0 1px #63a6e9;
 
   --ide-btn-success-background: #217645;
   --ide-btn-success-border: #108548;
   --ide-btn-success-hover-border: #2da160;
+  --ide-btn-success-hover-border-width: 2px;
+  --ide-btn-success-focus-box-shadow: 0 0 0 1px #2da160;
 
+  --ide-btn-disabled-background: transparent;
   --ide-btn-disabled-border: rgba(223, 223, 223, 0.24);
+  --ide-btn-disabled-hover-border: rgba(223, 223, 223, 0.24);
+  --ide-btn-disabled-hover-border-width: 1px;
+  --ide-btn-disabled-focus-box-shadow: transparent;
   --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;