fix(material/button): Move unthemable icon button tokens to theme mixin

angular · Aug 2, 2023 · 7738c47 · 7738c47
1 parent b13c6aa
commit 7738c47
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/src/material/_index.scss b/src/material/_index.scss
@@ -90,7 +90,7 @@
 @forward './button/fab-theme' as fab-* show fab-color, fab-typography,
   fab-density, fab-theme;
 @forward './button/icon-button-theme' as icon-button-* show icon-button-color,
-  icon-button-typography, icon-button-density, icon-button-theme;
+  icon-button-typography, icon-button-density, icon-button-theme, icon-button-base;
 @forward './button-toggle/button-toggle-theme' as button-toggle-* show button-toggle-theme,
   button-toggle-color, button-toggle-typography, button-toggle-density;
 @forward './card/card-theme' as card-* show card-theme, card-color, card-typography, card-density;

diff --git a/src/material/button/_icon-button-theme.scss b/src/material/button/_icon-button-theme.scss
@@ -3,13 +3,21 @@
 @use '@material/density/functions' as mdc-density-functions;
 @use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme;
 @use '@material/theme/theme-color' as mdc-theme-color;
+@use '../core/style/sass-utils';
 @use '../core/tokens/m2/mdc/icon-button' as tokens-mdc-icon-button;
 
 @use './button-theme-private';
 @use '../core/theming/theming';
 
 $_icon-size: 24px;
 
+@mixin base($config-or-theme) {
+  // Add default values for tokens not related to color, typography, or density.
+  @include sass-utils.current-selector-or-root() {
+    @include mdc-icon-button-theme.theme(tokens-mdc-icon-button.get-unthemable-tokens());
+  }
+}
+
 @mixin _ripple-color($color) {
   --mat-mdc-button-persistent-ripple-color: #{$color};
   --mat-mdc-button-ripple-color: #{rgba($color, 0.1)};
@@ -111,6 +119,7 @@ $_icon-size: 24px;
     $density: theming.get-density-config($theme);
     $typography: theming.get-typography-config($theme);
 
+    @include base($theme);
     @if $color != null {
       @include color($color);
     }

diff --git a/src/material/button/icon-button.scss b/src/material/button/icon-button.scss
@@ -17,9 +17,6 @@
   .mat-mdc-icon-button {
     // Add the official slots for the MDC component.
     @include mdc-icon-button-theme.theme-styles($token-slots);
-
-    // Add default values for tokens that aren't outputted by the theming API.
-    @include mdc-icon-button-theme.theme(m2-mdc-icon-button.get-unthemable-tokens());
   }
 }