diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss index e4932052b81a..34c8785f5d4d 100644 --- a/src/material/button/_button-theme.scss +++ b/src/material/button/_button-theme.scss @@ -232,8 +232,13 @@ @include button-theme-private.touch-target-density($density-scale); } + .mat-mdc-unelevated-button { + $density-tokens: tokens-mdc-button-filled.get-density-tokens($theme); + @include mdc-button-filled-theme.theme($density-tokens); + @include button-theme-private.touch-target-density($density-scale); + } + .mat-mdc-button, - .mat-mdc-unelevated-button, .mat-mdc-outlined-button { // Use `mat-mdc-button-base` to increase the specificity over the button's structural styles. &.mat-mdc-button-base { diff --git a/src/material/core/tokens/m2/mdc/_button-filled.scss b/src/material/core/tokens/m2/mdc/_button-filled.scss index 69a0e8823f15..b9d7780c1fa3 100644 --- a/src/material/core/tokens/m2/mdc/_button-filled.scss +++ b/src/material/core/tokens/m2/mdc/_button-filled.scss @@ -1,7 +1,9 @@ +@use 'sass:map'; @use '../../token-utils'; @use '../../../mdc-helpers/mdc-helpers'; @use '../../../style/sass-utils'; @use '../../../theming/inspection'; +@use '../../../theming/theming'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mdc, button-filled); @@ -14,15 +16,16 @@ $prefix: (mdc, button-filled); // our CSS. @function get-unthemable-tokens() { @return ( - container-elevation: 0, - container-height: 36px, container-shape: 4px, + container-elevation: 0, disabled-container-elevation: 0, focus-container-elevation: 0, hover-container-elevation: 0, keep-touch-target: false, pressed-container-elevation: 0, + focus-ring-color: null, + focus-ring-offset: null, focus-state-layer-opacity: null, hover-state-layer-opacity: null, pressed-state-layer-opacity: null, @@ -77,7 +80,20 @@ $prefix: (mdc, button-filled); // Tokens that can be configured through Angular Material's density theming API. @function get-density-tokens($theme) { - @return (); + $scale: theming.clamp-density(inspection.get-theme-density($theme), -3); + + @return ( + container-height: + map.get( + ( + 0: 36px, + -1: 32px, + -2: 28px, + -3: 24px, + ), + $scale + ) + ); } // Combines the tokens generated by the above functions into a single map with placeholder values. diff --git a/src/material/core/tokens/tests/test-validate-tokens.scss b/src/material/core/tokens/tests/test-validate-tokens.scss index 8fd00ce826ed..9e630d2ad40e 100644 --- a/src/material/core/tokens/tests/test-validate-tokens.scss +++ b/src/material/core/tokens/tests/test-validate-tokens.scss @@ -2,6 +2,7 @@ @use 'sass:map'; @use '@material/button/button-protected-theme' as mdc-button-protected-theme; +@use '@material/button/button-filled-theme' as mdc-button-filled-theme; @use '@material/card/elevated-card-theme' as mdc-elevated-card-theme; @use '@material/card/outlined-card-theme' as mdc-outlined-card-theme; @use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme; @@ -25,6 +26,7 @@ @use '@material/theme/validate' as mdc-validate; @use '../m2/mdc/button-protected' as tokens-mdc-button-protected; +@use '../m2/mdc/button-filled' as tokens-mdc-button-filled; @use '../m2/mdc/circular-progress' as tokens-mdc-circular-progress; @use '../m2/mdc/linear-progress' as tokens-mdc-linear-progress; @use '../m2/mdc/elevated-card' as tokens-mdc-elevated-card; @@ -160,8 +162,8 @@ ); @include validate-slots( $component: 'm2.mdc.button-filled', - $slots: tokens-mdc-extended-fab.get-token-slots(), - $reference: mdc-extended-fab-theme.$extended-light-theme + $slots: tokens-mdc-button-filled.get-token-slots(), + $reference: mdc-button-filled-theme.$light-theme ); @include validate-slots( $component: 'm2.mdc.button-protected',