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

…der radius is customized

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

Fixes #30484.

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;
-    }
   }
 }