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.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;
-    }
   }
 }
 
@@ -304,11 +296,14 @@
 // then. See: https://github.com/angular/components/issues/13738
 .mat-mdc-outlined-button .mat-mdc-button-ripple,
 .mat-mdc-outlined-button .mdc-button__ripple {
-  $offset: -1px;
-  top: $offset;
-  left: $offset;
-  bottom: $offset;
-  right: $offset;
+  @include token-utils.use-tokens(
+    tokens-mdc-outlined-button.$prefix,
+    tokens-mdc-outlined-button.get-token-slots()
+  ) {
+    $shape: token-utils.get-token-variable(container-shape, true);
+    $outline: token-utils.get-token-variable(outline-width, true);
+    border-radius: calc(#{$shape} - #{$outline});
+  }
 }
 
 // For the button element, default inset/offset values are necessary to ensure that