@angular/material 17.0.0-rc.0 → 17.0.0-rc.2

package/_index.scss

@@ -47,7 +47,7 @@
 @forward './core/style/elevation' show elevation, overridable-elevation, elevation-transition;
 
 // Theme bundles
-@forward './core/theming/all-theme' show all-component-themes;
+@forward './core/theming/all-theme' show all-component-themes, all-component-bases;
 @forward './core/color/all-color' show all-component-colors;
 @forward './core/typography/all-typography' show all-component-typographies;
 

package/button/_button-base.scss

@@ -1,6 +1,6 @@
-@use 'sass:map';
 @use '@material/touch-target' as mdc-touch-target;
 
+@use '../core/tokens/token-utils';
 @use '../core/style/layout-common';
 @use '../core/mdc-helpers/mdc-helpers';
 
@@ -40,11 +40,6 @@
   .mat-mdc-button-persistent-ripple::before {
     content: '';
     opacity: 0;
-    background-color: var(--mat-mdc-button-persistent-ripple-color);
-  }
-
-  .mat-ripple-element {
-    background-color: var(--mat-mdc-button-ripple-color);
   }
 
   // The content should appear over the state and ripple layers, otherwise they may adversely affect
@@ -63,6 +58,33 @@
   }
 }
 
+@mixin mat-private-button-ripple($prefix, $slots) {
+  @include token-utils.use-tokens($prefix, $slots) {
+    .mat-ripple-element {
+      @include token-utils.create-token-slot(background-color, ripple-color);
+    }
+
+    .mat-mdc-button-persistent-ripple::before {
+      @include token-utils.create-token-slot(background-color, state-layer-color);
+    }
+
+    &:hover .mat-mdc-button-persistent-ripple::before {
+      @include token-utils.create-token-slot(opacity, hover-state-layer-opacity);
+    }
+
+    &.cdk-program-focused,
+    &.cdk-keyboard-focused {
+      .mat-mdc-button-persistent-ripple::before {
+        @include token-utils.create-token-slot(opacity, focus-state-layer-opacity);
+      }
+    }
+
+    &:active .mat-mdc-button-persistent-ripple::before {
+      @include token-utils.create-token-slot(opacity, pressed-state-layer-opacity);
+    }
+  }
+}
+
 // MDC's disabled buttons define a default cursor with pointer-events none. However, they select
 // :disabled for this, which does not affect anchor tags.
 // TODO(andrewseguin): Discuss with the MDC team about a mixin we can call for applying this style,
@@ -76,6 +98,15 @@
   }
 }
 
+// Hides the touch target on lower densities.
+@mixin mat-private-button-touch-target-density($scale) {
+  @include mdc-helpers.if-touch-targets-unsupported($scale) {
+    .mat-mdc-button-touch-target {
+      display: none;
+    }
+  }
+}
+
 @mixin mat-private-button-touch-target($is-square) {
   // Element used to ensure that the button has a touch target that meets the required minimum.
   // Note that we use this, instead of MDC's built-in `mdc-button--touch` class, because the MDC
@@ -89,15 +120,3 @@
       $query: mdc-helpers.$mdc-base-styles-query);
   }
 }
-
-// Changes a button token set to exclude the ripple styles.
-@function mat-private-button-remove-ripple($tokens) {
-  @return map.merge($tokens, (
-    focus-state-layer-color: null,
-    focus-state-layer-opacity: null,
-    hover-state-layer-color: null,
-    hover-state-layer-opacity: null,
-    pressed-state-layer-color: null,
-    pressed-state-layer-opacity: null,
-  ));
-}

package/button/_button-theme.scss

@@ -1,168 +1,136 @@
 @use '@material/button/button' as mdc-button;
-@use '@material/button/button-theme' as mdc-button-theme;
 @use '@material/button/button-text-theme' as mdc-button-text-theme;
 @use '@material/button/button-filled-theme' as mdc-button-filled-theme;
 @use '@material/button/button-protected-theme' as mdc-button-protected-theme;
 @use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
-@use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/elevation/elevation-theme' as mdc-elevation-theme;
 
-@use './button-theme-private';
+@use './button-base';
 @use '../core/mdc-helpers/mdc-helpers';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
+@use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 @use '../core/tokens/m2/mdc/filled-button' as tokens-mdc-filled-button;
+@use '../core/tokens/m2/mat/filled-button' as tokens-mat-filled-button;
+@use '../core/tokens/m2/mdc/outlined-button' as tokens-mdc-outlined-button;
+@use '../core/tokens/m2/mat/outlined-button' as tokens-mat-outlined-button;
 @use '../core/tokens/m2/mdc/protected-button' as tokens-mdc-protected-button;
+@use '../core/tokens/m2/mat/protected-button' as tokens-mat-protected-button;
 @use '../core/tokens/m2/mdc/text-button' as tokens-mdc-text-button;
+@use '../core/tokens/m2/mat/text-button' as tokens-mat-text-button;
 
-@function _on-color($theme, $palette) {
-  $is-dark: inspection.get-theme-type($theme) == dark;
-  @return if(mdc-helpers.variable-safe-contrast-tone($palette, $is-dark) == 'dark', #000, #fff);
-}
 
-@mixin _outlined-button-variant($color) {
-  @include mdc-button-outlined-theme.theme((
-    label-text-color: $color,
-  ));
-}
+@mixin _text-button-variant($theme, $palette) {
+  $mdc-tokens: if($palette,
+    tokens-mdc-text-button.private-get-color-palette-color-tokens($theme, $palette),
+    tokens-mdc-text-button.get-color-tokens($theme)
+  );
 
-@mixin base($theme) {
-  // TODO(mmalerba): Move button base tokens here
+  $mat-tokens: if($palette,
+    tokens-mat-text-button.private-get-color-palette-color-tokens($theme, $palette),
+    tokens-mat-text-button.get-color-tokens($theme)
+  );
+
+  @include mdc-button-text-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mat-text-button.$prefix, $mat-tokens);
 }
 
-@mixin color($theme) {
-  @include mdc-helpers.using-mdc-theme($theme) {
-    $is-dark: inspection.get-theme-type($theme) == dark;
-    $on-surface: mdc-theme-color.prop-value(on-surface);
-    $disabled-ink-color: rgba($on-surface, if($is-dark, 0.5, 0.38));
-    $primary: mdc-theme-color.prop-value(primary);
-    $secondary: mdc-theme-color.prop-value(secondary);
-    $error: mdc-theme-color.prop-value(error);
-
-    .mat-mdc-outlined-button {
-      @include mdc-button-outlined-theme.theme((
-        outline-color: rgba(mdc-theme-color.prop-value(on-surface), 0.12)
-      ));
-
-      &.mat-unthemed {
-        @include _outlined-button-variant($on-surface);
-      }
+@mixin _filled-button-variant($theme, $palette) {
+  $mdc-tokens: if($palette,
+    tokens-mdc-filled-button.private-get-color-palette-color-tokens($theme, $palette),
+    tokens-mdc-filled-button.get-color-tokens($theme)
+  );
 
-      &.mat-primary {
-        @include _outlined-button-variant($primary);
-      }
+  $mat-tokens: if($palette,
+    tokens-mat-filled-button.private-get-color-palette-color-tokens($theme, $palette),
+    tokens-mat-filled-button.get-color-tokens($theme)
+  );
 
-      &.mat-accent {
-        @include _outlined-button-variant($secondary);
-      }
+  @include mdc-button-filled-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mat-filled-button.$prefix, $mat-tokens);
+}
 
-      &.mat-warn {
-        @include _outlined-button-variant($error);
-      }
+@mixin _protected-button-variant($theme, $palette) {
+  $mdc-tokens: if($palette,
+    tokens-mdc-protected-button.private-get-color-palette-color-tokens($theme, $palette),
+    tokens-mdc-protected-button.get-color-tokens($theme)
+  );
 
-      @include button-theme-private.apply-disabled-style() {
-        @include mdc-button-outlined-theme.theme((
-          // We need to pass both the disabled and enabled values, because the enabled
-          // ones apply to anchors while the disabled ones are for buttons.
-          label-text-color: $disabled-ink-color,
-          disabled-label-text-color: $disabled-ink-color,
-          outline-color: rgba($on-surface, 0.12),
-          disabled-outline-color: rgba($on-surface, 0.12),
-        ));
-      }
-    }
+  $mat-tokens: if($palette,
+    tokens-mat-protected-button.private-get-color-palette-color-tokens($theme, $palette),
+    tokens-mat-protected-button.get-color-tokens($theme)
+  );
 
-    // Ripple colors
-    .mat-mdc-button, .mat-mdc-outlined-button {
-      @include button-theme-private.ripple-theme-styles($theme, false);
-    }
+  @include mdc-button-protected-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mat-protected-button.$prefix, $mat-tokens);
+}
 
-    .mat-mdc-raised-button, .mat-mdc-unelevated-button {
-      @include button-theme-private.ripple-theme-styles($theme, true);
-    }
-  }
+@mixin _outlined-button-variant($theme, $palette) {
+  $mdc-tokens: if($palette,
+    tokens-mdc-outlined-button.private-get-color-palette-color-tokens($theme, $palette),
+    tokens-mdc-outlined-button.get-color-tokens($theme)
+  );
+
+  $mat-tokens: if($palette,
+    tokens-mat-outlined-button.private-get-color-palette-color-tokens($theme, $palette),
+    tokens-mat-outlined-button.get-color-tokens($theme)
+  );
 
-  $surface: inspection.get-theme-color($theme, background, card);
-  $primary: inspection.get-theme-color($theme, primary);
-  $accent: inspection.get-theme-color($theme, accent);
-  $error: inspection.get-theme-color($theme, warn);
+  @include mdc-button-outlined-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mat-outlined-button.$prefix, $mat-tokens);
+}
 
-  $on-surface: _on-color($theme, $surface);
-  $on-primary: _on-color($theme, $primary);
-  $on-accent: _on-color($theme, $accent);
-  $on-error: _on-color($theme, $error);
+@mixin base($theme) {
+  // TODO(mmalerba): Move button base tokens here
+}
 
+@mixin color($theme) {
   .mat-mdc-button {
-    @include mdc-button-text-theme.theme(tokens-mdc-text-button.get-color-tokens($theme));
+    @include _text-button-variant($theme, null);
 
     &.mat-primary {
-      @include mdc-button-text-theme.theme(
-        tokens-mdc-text-button.private-get-color-palette-color-tokens($theme, primary));
+      @include _text-button-variant($theme, primary);
     }
 
     &.mat-accent {
-      @include mdc-button-text-theme.theme(
-        tokens-mdc-text-button.private-get-color-palette-color-tokens($theme, accent));
+      @include _text-button-variant($theme, accent);
     }
 
     &.mat-warn {
-      @include mdc-button-text-theme.theme(
-        tokens-mdc-text-button.private-get-color-palette-color-tokens($theme, warn));
+      @include _text-button-variant($theme, warn);
     }
   }
 
   .mat-mdc-unelevated-button {
-    $default-color-tokens: tokens-mdc-filled-button.get-color-tokens($theme, $surface, $on-surface);
-    $primary-color-tokens: tokens-mdc-filled-button.get-color-tokens($theme, $primary, $on-primary);
-    $accent-color-tokens: tokens-mdc-filled-button.get-color-tokens($theme, $accent, $on-accent);
-    $warn-color-tokens: tokens-mdc-filled-button.get-color-tokens($theme, $error, $on-error);
-
-    &.mat-unthemed {
-      @include mdc-button-filled-theme.theme($default-color-tokens);
-    }
+    @include _filled-button-variant($theme, null);
 
     &.mat-primary {
-      @include mdc-button-filled-theme.theme($primary-color-tokens);
+      @include _filled-button-variant($theme, primary);
     }
 
     &.mat-accent {
-      @include mdc-button-filled-theme.theme($accent-color-tokens);
+      @include _filled-button-variant($theme, accent);
     }
 
     &.mat-warn {
-      @include mdc-button-filled-theme.theme($warn-color-tokens);
+      @include _filled-button-variant($theme, warn);
     }
   }
 
   .mat-mdc-raised-button {
-    $default-color-tokens: tokens-mdc-protected-button.get-color-tokens(
-      $theme,
-      $surface,
-      $on-surface
-    );
-    $primary-color-tokens: tokens-mdc-protected-button.get-color-tokens(
-      $theme,
-      $primary,
-      $on-primary
-    );
-    $accent-color-tokens: tokens-mdc-protected-button.get-color-tokens($theme, $accent, $on-accent);
-    $warn-color-tokens: tokens-mdc-protected-button.get-color-tokens($theme, $error, $on-error);
-
-    &.mat-unthemed {
-      @include mdc-button-protected-theme.theme($default-color-tokens);
-    }
+    @include _protected-button-variant($theme, null);
 
     &.mat-primary {
-      @include mdc-button-protected-theme.theme($primary-color-tokens);
+      @include _protected-button-variant($theme, primary);
     }
 
     &.mat-accent {
-      @include mdc-button-protected-theme.theme($accent-color-tokens);
+      @include _protected-button-variant($theme, accent);
     }
 
     &.mat-warn {
-      @include mdc-button-protected-theme.theme($warn-color-tokens);
+      @include _protected-button-variant($theme, warn);
     }
 
     // TODO(wagnermaciel): Remove this workaround when b/301126527 is resolved
@@ -179,41 +147,19 @@
     }
   }
 
-  $is-dark: inspection.get-theme-type($theme) == dark;
-  $disabled-ink-color: rgba($on-surface, if($is-dark, 0.5, 0.38));
-  $disabled-container-color: rgba($on-surface, 0.12);
+  .mat-mdc-outlined-button {
+    @include _outlined-button-variant($theme, null);
 
-  // TODO: these disabled styles are a bit too specific currently.
-  // Once the buttons are fully tokenized, we should rework how they're applied.
-  .mat-mdc-button {
-    @include button-theme-private.apply-disabled-style() {
-      @include mdc-button-text-theme.theme((
-        disabled-label-text-color: $disabled-ink-color,
-        label-text-color: $disabled-ink-color,
-      ));
+    &.mat-primary {
+      @include _outlined-button-variant($theme, primary);
     }
-  }
 
-  .mat-mdc-raised-button {
-    @include button-theme-private.apply-disabled-style() {
-      @include mdc-elevation-theme.elevation(0);
-      @include mdc-button-protected-theme.theme((
-        disabled-container-color: $disabled-container-color,
-        disabled-label-text-color: $disabled-ink-color,
-        container-color: $disabled-container-color,
-        label-text-color: $disabled-ink-color,
-      ));
+    &.mat-accent {
+      @include _outlined-button-variant($theme, accent);
     }
-  }
 
-  .mat-mdc-unelevated-button {
-    @include button-theme-private.apply-disabled-style() {
-      @include mdc-button-filled-theme.theme((
-        disabled-container-color: $disabled-container-color,
-        disabled-label-text-color: $disabled-ink-color,
-        container-color: $disabled-container-color,
-        label-text-color: $disabled-ink-color,
-      ));
+    &.mat-warn {
+      @include _outlined-button-variant($theme, warn);
     }
   }
 }
@@ -230,27 +176,25 @@
   .mat-mdc-button {
     $density-tokens: tokens-mdc-text-button.get-density-tokens($theme);
     @include mdc-button-text-theme.theme($density-tokens);
-    @include button-theme-private.touch-target-density($density-scale);
+    @include button-base.mat-private-button-touch-target-density($density-scale);
   }
 
   .mat-mdc-raised-button {
     $density-tokens: tokens-mdc-protected-button.get-density-tokens($theme);
     @include mdc-button-protected-theme.theme($density-tokens);
-    @include button-theme-private.touch-target-density($density-scale);
+    @include button-base.mat-private-button-touch-target-density($density-scale);
   }
 
   .mat-mdc-unelevated-button {
     $density-tokens: tokens-mdc-filled-button.get-density-tokens($theme);
     @include mdc-button-filled-theme.theme($density-tokens);
-    @include button-theme-private.touch-target-density($density-scale);
+    @include button-base.mat-private-button-touch-target-density($density-scale);
   }
 
   .mat-mdc-outlined-button {
-    // Use `mat-mdc-button-base` to increase the specificity over the button's structural styles.
-    &.mat-mdc-button-base {
-      @include mdc-button-theme.density($density-scale, $query: mdc-helpers.$mdc-base-styles-query);
-      @include button-theme-private.touch-target-density($density-scale);
-    }
+    $density-tokens: tokens-mdc-outlined-button.get-density-tokens($theme);
+    @include mdc-button-outlined-theme.theme($density-tokens);
+    @include button-base.mat-private-button-touch-target-density($density-scale);
   }
 }
 

package/button/_fab-theme.scss

@@ -2,13 +2,14 @@
 @use '@material/fab/fab-theme' as mdc-fab-theme;
 @use '@material/fab/extended-fab-theme' as mdc-extended-fab-theme;
 
-@use './button-theme-private';
 @use '../core/mdc-helpers/mdc-helpers';
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/tokens/m2/mdc/fab' as tokens-mdc-fab;
 @use '../core/tokens/m2/mdc/extended-fab' as tokens-mdc-extended-fab;
+@use '../core/tokens/m2/mat/fab' as tokens-mat-fab;
+@use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 
 @mixin base($theme) {
@@ -21,67 +22,38 @@
   }
 }
 
-@mixin _fab-variant($foreground, $background) {
-  $color-tokens: (
-    container-color: $background,
-    icon-color: $foreground
+@mixin _fab-variant($theme, $palette) {
+  $mdc-tokens: if($palette,
+    tokens-mdc-fab.private-get-color-palette-color-tokens($theme, $palette),
+    tokens-mdc-fab.get-color-tokens($theme)
   );
-  @include mdc-fab-theme.theme($color-tokens);
 
-  --mat-mdc-fab-color: #{$foreground};
-}
+  $mat-tokens: if($palette,
+    tokens-mat-fab.private-get-color-palette-color-tokens($theme, $palette),
+    tokens-mat-fab.get-color-tokens($theme)
+  );
 
-@function white-or-black($color, $is-dark) {
-  @return if(mdc-helpers.variable-safe-contrast-tone($color, $is-dark) == 'dark', #000, #fff);
+  @include mdc-fab-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mat-fab.$prefix, $mat-tokens);
 }
 
 @mixin color($theme) {
-  $is-dark: inspection.get-theme-type($theme) == dark;
-
-  $surface: inspection.get-theme-color($theme, background, card);
-  $primary: inspection.get-theme-color($theme, primary);
-  $accent: inspection.get-theme-color($theme, accent);
-  $warn: inspection.get-theme-color($theme, warn);
-
-  $on-surface: white-or-black($surface, $is-dark);
-  $on-primary: white-or-black($primary, $is-dark);
-  $on-accent: white-or-black($accent, $is-dark);
-  $on-warn: white-or-black($warn, $is-dark);
-
-  $disabled: rgba($on-surface, 0.12);
-  $on-disabled: rgba($on-surface, if($is-dark, 0.5, 0.38));
-
   @include sass-utils.current-selector-or-root() {
-    // TODO(wagnermaciel): The ripple-theme-styles mixin depends heavily on
-    // being wrapped by using-mdc-theme. This workaround needs to be
-    // revisited w/ a more holistic solution.
+    @include _fab-variant($theme, null);
+
     .mat-mdc-fab,
     .mat-mdc-mini-fab {
-      @include mdc-helpers.using-mdc-theme($theme) {
-        @include button-theme-private.ripple-theme-styles($theme, true);
+      &.mat-primary {
+        @include _fab-variant($theme, primary);
       }
-    }
 
-    :disabled, a[disabled='true'] {
-      @include button-theme-private.apply-disabled-style() {
-        @include _fab-variant($on-disabled, $disabled);
+      &.mat-accent {
+        @include _fab-variant($theme, accent);
       }
-    }
-
-    .mat-unthemed {
-      @include _fab-variant($on-surface, $surface);
-    }
-
-    .mat-primary {
-      @include _fab-variant($on-primary, $primary);
-    }
-
-    .mat-accent {
-      @include _fab-variant($on-accent, $accent);
-    }
 
-    .mat-warn {
-      @include _fab-variant($on-warn, $warn);
+      &.mat-warn {
+        @include _fab-variant($theme, warn);
+      }
     }
   }
 }

package/button/_icon-button-theme.scss

@@ -1,75 +1,57 @@
 @use 'sass:math';
 @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/tokens/m2/mdc/icon-button' as tokens-mdc-icon-button;
+@use '../core/tokens/m2/mat/icon-button' as tokens-mat-icon-button;
 
-@use './button-theme-private';
+@use '../core/style/sass-utils';
+@use './button-base';
+@use '../core/tokens/token-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 
-$_icon-size: 24px;
 
-@mixin _ripple-color($color) {
-  --mat-mdc-button-persistent-ripple-color: #{$color};
-  --mat-mdc-button-ripple-color: #{rgba($color, 0.1)};
+@mixin base($theme) {
+  // TODO(mmalerba): Move icon button base tokens here
 }
 
-@function _variable-safe-contrast-tone($value, $is-dark) {
-  @if ($value == 'dark' or $value == 'light' or type-of($value) == 'color') {
-    @return mdc-theme-color.contrast-tone($value);
-  }
+@mixin _icon-button-variant($theme, $palette) {
+  $mdc-tokens: if($palette,
+    tokens-mdc-icon-button.private-get-color-palette-color-tokens($theme, $palette),
+    tokens-mdc-icon-button.get-color-tokens($theme)
+  );
 
-  @return if($is-dark, 'light', 'dark');
-}
+  $mat-tokens: if($palette,
+    tokens-mat-icon-button.private-get-color-palette-color-tokens($theme, $palette),
+    tokens-mat-icon-button.get-color-tokens($theme)
+  );
 
-@mixin base($theme) {
-  // TODO(mmalerba): Move icon button base tokens here
+  @include mdc-icon-button-theme.theme($mdc-tokens);
+  @include token-utils.create-token-values(tokens-mat-icon-button.$prefix, $mat-tokens);
 }
 
 @mixin color($theme) {
-  $color-tokens: tokens-mdc-icon-button.get-color-tokens($theme);
-  $surface: inspection.get-theme-color($theme, background, card);
-  $is-dark: inspection.get-theme-type($theme) == dark;
-  $on-surface: if(_variable-safe-contrast-tone($surface, $is-dark) == 'dark', #000, #fff);
-
   .mat-mdc-icon-button {
-    @include button-theme-private.ripple-theme-styles($theme, false);
-    @include mdc-icon-button-theme.theme($color-tokens);
-    @include _ripple-color($on-surface);
+    @include _icon-button-variant($theme, null);
 
     &.mat-primary {
-      $color: inspection.get-theme-color($theme, primary);
-      @include mdc-icon-button-theme.theme((icon-color: $color));
-      @include _ripple-color($color);
+      @include _icon-button-variant($theme, primary);
     }
 
     &.mat-accent {
-      $color: inspection.get-theme-color($theme, accent);
-      @include mdc-icon-button-theme.theme((icon-color: $color));
-      @include _ripple-color($color);
+      @include _icon-button-variant($theme, accent);
     }
 
     &.mat-warn {
-      $color: inspection.get-theme-color($theme, warn);
-      @include mdc-icon-button-theme.theme((icon-color: $color));
-      @include _ripple-color($color);
-    }
-
-    @include button-theme-private.apply-disabled-style() {
-      $disabled-color: rgba($on-surface, if($is-dark, 0.5, 0.38));
-      @include mdc-icon-button-theme.theme((
-        icon-color: $disabled-color,
-        disabled-icon-color: $disabled-color,
-      ));
+      @include _icon-button-variant($theme, warn);
     }
   }
 }
 
-@mixin typography($theme) {
-}
+@mixin typography($theme) {}
 
 @mixin density($theme) {
+  $icon-size: 24px;
   $density-scale: inspection.get-theme-density($theme);
   // Manually apply the expected density theming, and include the padding
   // as it was applied before
@@ -100,9 +82,9 @@ $_icon-size: 24px;
     // fails validation because the variable is "undefined" in the sass stack.
     width: var(--mdc-icon-button-state-layer-size);
     height: var(--mdc-icon-button-state-layer-size);
-    padding: math.div($calculated-size - $_icon-size, 2);
+    padding: math.div($calculated-size - $icon-size, 2);
 
-    @include button-theme-private.touch-target-density($density-scale);
+    @include button-base.mat-private-button-touch-target-density($density-scale);
   }
 }
 

package/button/index.d.ts

@@ -124,8 +124,6 @@ declare class MatButtonBase implements AfterViewInit, OnDestroy {
     ngOnDestroy(): void;
     /** Focuses the button. */
     focus(_origin?: FocusOrigin, options?: FocusOptions): void;
-    /** Gets whether the button has one of the given attributes. */
-    private _hasHostAttributes;
     private _updateRippleDisabled;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonBase, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatButtonBase, never, never, { "color": { "alias": "color"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, false, never>;