From 2387a6324b06e02f67f4ac4dda5c8c576a73718e Mon Sep 17 00:00:00 2001
From: Material Web Team <material-web-copybara@google.com>
Date: Thu, 7 Sep 2023 05:09:43 -0700
Subject: [PATCH] chore: refactor iconbutton focus ring

PiperOrigin-RevId: 563397006
---
 .../mdc-icon-button/_icon-button-theme.scss   | 46 ++++++++++++++++---
 1 file changed, 39 insertions(+), 7 deletions(-)

diff --git a/packages/mdc-icon-button/_icon-button-theme.scss b/packages/mdc-icon-button/_icon-button-theme.scss
index 15b4e0a2797..75353dbe312 100644
--- a/packages/mdc-icon-button/_icon-button-theme.scss
+++ b/packages/mdc-icon-button/_icon-button-theme.scss
@@ -74,6 +74,8 @@ $light-theme: (
   pressed-state-layer-color: theme-color.$primary,
   pressed-state-layer-opacity: 0.12,
   state-layer-size: $size,
+  focus-ring-color: null,
+  focus-ring-offset: 0,
 );
 
 @mixin theme($theme) {
@@ -118,6 +120,9 @@ $light-theme: (
     ),
     $ripple-target: $ripple-target
   );
+
+  @include _focus-ring-color(map.get($theme, 'focus-ring-color'));
+  @include _focus-ring-offset(map.get($theme, 'focus-ring-offset'));
 }
 
 ///
@@ -151,13 +156,6 @@ $light-theme: (
     padding: calc(($size - $icon-size) / 2);
   }
 
-  .mdc-icon-button__focus-ring {
-    @include feature-targeting.targets($feat-structure) {
-      max-height: $size;
-      max-width: $size;
-    }
-  }
-
   &.mdc-icon-button--reduced-size {
     $component-size: $size;
     // Icon button ripple size is capped at 40px for icon buttons with
@@ -392,6 +390,40 @@ $light-theme: (
   }
 }
 
+@mixin _focus-ring-color($color, $query: feature-targeting.all()) {
+  $color-value: if(
+    custom-properties.is-custom-prop($color),
+    custom-properties.get-declaration-value($color),
+    $color
+  );
+
+  @if $color != null {
+    .mdc-icon-button__focus-ring {
+      @include focus-ring.focus-ring-color(
+        $inner-ring-color: $color-value,
+        $query: $query
+      );
+    }
+  }
+}
+
+@mixin _focus-ring-offset($offset, $query: feature-targeting.all()) {
+  $offset-value: if(
+    custom-properties.is-custom-prop($offset),
+    custom-properties.get-declaration-value($offset),
+    $offset
+  );
+
+  @if type-of($offset-value) == 'number' {
+    .mdc-icon-button__focus-ring {
+      @include focus-ring.focus-ring-offset(
+        $offset: $offset-value,
+        $query: $query
+      );
+    }
+  }
+}
+
 ///
 /// Helps style the icon button in its disabled state.
 /// @access private