diff --git a/src/material/button/_icon-button-theme.scss b/src/material/button/_icon-button-theme.scss index 963d568b9706..7c6039fa2c07 100644 --- a/src/material/button/_icon-button-theme.scss +++ b/src/material/button/_icon-button-theme.scss @@ -1,5 +1,3 @@ -@use 'sass:map'; -@use 'sass:math'; @use './m2-icon-button'; @use './m3-icon-button'; @use '../core/style/sass-utils'; @@ -78,42 +76,12 @@ @include token-utils.create-token-values( m3-icon-button.$prefix, m3-icon-button.get-density-tokens($theme)); } @else { - $icon-size: 24px; - $density-scale: inspection.get-theme-density($theme); - $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-mixed( m2-icon-button.$prefix, - m2-icon-button.get-density-tokens( - $theme, $exclude: (state-layer-size)) + m2-icon-button.get-density-tokens($theme) ); } - - // Use `mat-mdc-button-base` to increase the specificity over the button's structural styles. - .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). - --mdc-icon-button-state-layer-size: #{$calculated-size}; - --mat-icon-button-state-layer-size: #{$calculated-size}; - - // TODO: Switch calculated-size to "var(--mat-icon-button-state-layer-size)" - // Currently fails validation because the variable is "undefined" - // in the sass stack. - // TODO: Switch icon-size to "var(--mat-icon-button-icon-size)". Currently - // fails validation because the variable is "undefined" in the sass stack. - width: var(--mat-icon-button-state-layer-size); - height: var(--mat-icon-button-state-layer-size); - padding: math.div($calculated-size - $icon-size, 2); - } } } diff --git a/src/material/button/_m2-icon-button.scss b/src/material/button/_m2-icon-button.scss index cd4714912983..26c05b1dee92 100644 --- a/src/material/button/_m2-icon-button.scss +++ b/src/material/button/_m2-icon-button.scss @@ -54,7 +54,7 @@ $prefix: (mat, icon-button); // Tokens that can be configured through Angular Material's density theming API. @function get-density-tokens($theme, $exclude: ()) { - $scale: theming.clamp-density(inspection.get-theme-density($theme), -3); + $scale: theming.clamp-density(inspection.get-theme-density($theme), -5); $tokens: ( touch-target-display: if($scale < -1, none, block),