Merge branch '474647-remove-mixin-btn-primary-from-buttons-scss' into 'master'

Resolve "Remove @mixin btn-primary from buttons.scss"

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/161002



Merged-by: Enrique Alcántara <ealcantara@gitlab.com>
Approved-by: Enrique Alcántara <ealcantara@gitlab.com>
Co-authored-by: James Rushford <jrushford@gitlab.com>

app/assets/stylesheets/framework/buttons.scss

@@ -147,14 +147,6 @@
     &.btn-danger {
       @include btn-outline($white, $red-500, $red-500, $red-100, $red-700, $red-500, $red-200, $red-600, $red-800);
     }
-
-    &.btn-primary {
-      @include btn-outline($white, $blue-500, $blue-500, $blue-100, $blue-700, $blue-500, $blue-200, $blue-600, $blue-800);
-    }
-  }
-
-  &.btn-primary {
-    @include btn-blue;
   }
 
   &.btn-danger {

app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss

@@ -337,24 +337,6 @@
     border-color: var(--ide-dropdown-hover-background, $gray-100) !important;
   }
 
-  // todo: remove this block after all primary/info buttons have been migrated to gl-button
-  .btn-primary:not(.gl-button) {
-    background-color: var(--ide-btn-primary-background, $blue-500);
-    border-color: var(--ide-btn-primary-border, $blue-600) !important;
-
-    &:hover,
-    &:focus {
-      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;
-    }
-  }
-
   // 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-10) !important;
@@ -399,10 +381,6 @@
     @include ide-gl-button(default, $white, $gray-50, $gray-100, $gray-200, $gray-300, $gray-300, $gray-400);
   }
 
-  .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);
 

doc/development/testing_guide/frontend_testing.md

@@ -228,7 +228,7 @@ it('exists', () => {
   // Bad
   wrapper.find({ ref: 'foo'});
   wrapper.find('.js-foo');
-  wrapper.find('.btn-primary');
+  wrapper.find('.gl-button');
 });
 ```