diff --git a/src/material/button/_icon-button-theme.scss b/src/material/button/_icon-button-theme.scss index 580de6c2280b..a348658d41e5 100644 --- a/src/material/button/_icon-button-theme.scss +++ b/src/material/button/_icon-button-theme.scss @@ -1,7 +1,5 @@ @use 'sass:map'; @use 'sass:math'; -@use '@material/density/functions' as mdc-density-functions; -@use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme; @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 '../core/style/sass-utils'; @@ -18,7 +16,8 @@ @else { // 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()); + @include token-utils.create-token-values(tokens-mdc-icon-button.$prefix, + tokens-mdc-icon-button.get-unthemable-tokens()); } } } @@ -34,7 +33,7 @@ tokens-mat-icon-button.get-color-tokens($theme) ); - @include mdc-icon-button-theme.theme($mdc-tokens); + @include token-utils.create-token-values(tokens-mdc-icon-button.$prefix, $mdc-tokens); @include token-utils.create-token-values(tokens-mat-icon-button.$prefix, $mat-tokens); } @@ -82,19 +81,15 @@ @else { $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 - $calculated-size: mdc-density-functions.prop-value( - $density-config: ( - size: ( - default: 48px, - maximum: 48px, - minimum: 28px, - ), - ), - $density-scale: $density-scale, - $property-name: size, + $size-map: ( + 0: 48px, + -1: 44px, + -2: 40px, + -3: 36px, + -4: 32px, + -5: 28px, ); + $calculated-size: map.get($size-map, $density-scale); @include sass-utils.current-selector-or-root() { @include token-utils.create-token-values(tokens-mat-icon-button.$prefix, @@ -105,9 +100,7 @@ .mat-mdc-icon-button.mat-mdc-button-base { // Match the styles that used to be present. This is necessary for backwards // compat to match the previous implementations selector count (two classes). - @include mdc-icon-button-theme.theme(( - state-layer-size: $calculated-size, - )); + --mdc-icon-button-state-layer-size: #{$calculated-size}; // TODO: Switch calculated-size to "var(--mdc-icon-button-state-layer-size)" // Currently fails validation because the variable is "undefined" @@ -153,7 +146,8 @@ @include validation.selector-defined( 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'); @if ($tokens != ()) { - @include mdc-icon-button-theme.theme(map.get($tokens, tokens-mdc-icon-button.$prefix)); + @include token-utils.create-token-values( + tokens-mdc-icon-button.$prefix, map.get($tokens, tokens-mdc-icon-button.$prefix)); @include token-utils.create-token-values( tokens-mat-icon-button.$prefix, map.get($tokens, tokens-mat-icon-button.$prefix)); } diff --git a/src/material/button/icon-button.scss b/src/material/button/icon-button.scss index c16af087f0a7..f10bc5384d35 100644 --- a/src/material/button/icon-button.scss +++ b/src/material/button/icon-button.scss @@ -1,32 +1,27 @@ -@use 'sass:map'; -@use '@material/icon-button/icon-button' as mdc-icon-button; -@use '@material/icon-button/icon-button-theme' as mdc-icon-button-theme; -@use '@material/theme/custom-properties' as mdc-custom-properties; - @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-base'; @use '../core/style/private'; +@use '../core/style/vendor-prefixes'; @use '../core/tokens/token-utils'; -// The slots for tokens that will be configured in the theme can be emitted with no fallback. -@include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) { - $token-slots: tokens-mdc-icon-button.get-token-slots(); - - // Add the MDC component static styles. - @include mdc-icon-button.static-styles(); - - .mat-mdc-icon-button { - // Add the official slots for the MDC component. - @include mdc-icon-button-theme.theme-styles(map.merge($token-slots, ( - // Exclude the state layer size since we'll re-emit it below with a default value. - state-layer-size: null, - ))); - } -} .mat-mdc-icon-button { + @include vendor-prefixes.user-select(none); + display: inline-block; + position: relative; + box-sizing: border-box; + border: none; + outline: none; + background-color: transparent; + fill: currentColor; + color: inherit; + text-decoration: none; + cursor: pointer; + z-index: 0; + overflow: visible; + // Border radius is inherited by ripple to know its shape. Set to 50% so the ripple is round. border-radius: 50%; @@ -36,10 +31,6 @@ // Ensure the icons are centered. text-align: center; - svg { - vertical-align: baseline; - } - @include token-utils.use-tokens( tokens-mdc-icon-button.$prefix, tokens-mdc-icon-button.get-token-slots()) { $button-size: var(#{token-utils.get-token-variable(state-layer-size)}, 48px); @@ -57,12 +48,18 @@ // Icon size used to be placed on the host element. Now, in `theme-styles` it is placed on // the unused `.mdc-button__icon` class. Explicitly set the font-size here. @include token-utils.create-token-slot(font-size, icon-size); + @include token-utils.create-token-slot(color, icon-color); @include button-base.mat-private-button-disabled { - // MDC's disabled styles target the `:disabled` selector which doesn't work on links. - // We re-apply the disabled icon color here since we support Material buttons on links too. @include token-utils.create-token-slot(color, disabled-icon-color); }; + + img, + svg { + @include token-utils.create-token-slot(width, icon-size); + @include token-utils.create-token-slot(height, icon-size); + vertical-align: baseline; + } } @include button-base.mat-private-button-interactive(); @@ -76,6 +73,11 @@ border-radius: 50%; } + // MDC used to include this and it seems like a lot of apps depend on it. + &[hidden] { + display: none; + } + // MDC adds some styles to icon buttons that conflict with some of our focus indicator styles // and don't actually do anything. This undoes those conflicting styles. &.mat-unthemed,