From 986ab319fce48817aa2c4cf55dfb26e7bd0bee48 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Mon, 24 Feb 2025 14:43:23 +0100
Subject: [PATCH] fix(material/button): incorrect outlined focus overlay shape
 when border 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 | 5 ++---
 src/material/button/button.scss               | 9 +++------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/material/button/button-high-contrast.scss b/src/material/button/button-high-contrast.scss
index 881365eb537a..d8a19f270dc0 100644
--- a/src/material/button/button-high-contrast.scss
+++ b/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;
   }
diff --git a/src/material/button/button.scss b/src/material/button/button.scss
index a44a6f6a684c..b07fe6bffa91 100644
--- a/src/material/button/button.scss
+++ b/src/material/button/button.scss
@@ -1,3 +1,4 @@
+@use '@angular/cdk';
 @use './button-base';
 @use '../core/style/private' as style-private;
 @use '../core/style/vendor-prefixes';
@@ -265,12 +266,8 @@
       @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;
+    @include cdk.high-contrast {
+      border-color: currentColor;
     }
   }
 }