fix(material/button): incorrect outlined focus overlay shape when bor…

…der radius is customized (#30513)

Fixes that the focus overlay on outlined buttons wasn't covering the outlined button fully when its border radius is customized.

Fixes #30484.

(cherry picked from commit fea07a7)

src/material/button/button-high-contrast.scss

@@ -1,12 +1,11 @@
 @use '@angular/cdk';
 
-// Add an outline to make buttons more visible in high contrast mode. Stroked buttons and FABs
-// don't need a special look in high-contrast mode, because those already have an outline.
 .mat-mdc-button:not(.mdc-button--outlined),
 .mat-mdc-unelevated-button:not(.mdc-button--outlined),
 .mat-mdc-raised-button:not(.mdc-button--outlined),
 .mat-mdc-outlined-button:not(.mdc-button--outlined),
-.mat-mdc-icon-button.mat-mdc-icon-button {
+.mat-mdc-icon-button.mat-mdc-icon-button,
+.mat-mdc-outlined-button .mdc-button__ripple {
   @include cdk.high-contrast {
     outline: solid 1px;
   }

src/material/button/button.scss

@@ -264,14 +264,6 @@
       @include token-utils.create-token-slot(color, disabled-label-text-color);
       @include token-utils.create-token-slot(border-color, disabled-outline-color);
     }
-
-    // TODO(crisbeto): this causes a weird gap between the ripple and the
-    // outline. We should remove it and update the screenshot tests.
-    .mdc-button__ripple {
-      @include token-utils.create-token-slot(border-width, outline-width);
-      border-style: solid;
-      border-color: transparent;
-    }
   }
 }