diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss index c01c25a39509..7943e00fe3e6 100644 --- a/src/material/button/_button-theme.scss +++ b/src/material/button/_button-theme.scss @@ -1,4 +1,3 @@ -@use '@material/button/button' as mdc-button; @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; @@ -19,7 +18,7 @@ @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; - +@use '../core/style/sass-utils'; @mixin _text-button-variant($theme, $palette) { $mdc-tokens: if($palette, @@ -165,15 +164,16 @@ } @mixin typography($theme) { - @include mdc-helpers.using-mdc-typography($theme) { - @include mdc-button.without-ripple($query: mdc-helpers.$mdc-typography-styles-query); - } - - .mat-mdc-button, - .mat-mdc-raised-button, - .mat-mdc-outlined-button, - .mat-mdc-unelevated-button { - line-height: inherit; + @include sass-utils.current-selector-or-root() { + $text-typography-tokens: tokens-mdc-text-button.get-typography-tokens($theme); + $filled-typography-tokens: tokens-mdc-filled-button.get-typography-tokens($theme); + $outlined-typography-tokens: tokens-mdc-outlined-button.get-typography-tokens($theme); + $protected-typography-tokens: tokens-mdc-protected-button.get-typography-tokens($theme); + + @include mdc-button-text-theme.theme($text-typography-tokens); + @include mdc-button-filled-theme.theme($filled-typography-tokens); + @include mdc-button-outlined-theme.theme($outlined-typography-tokens); + @include mdc-button-protected-theme.theme($protected-typography-tokens); } } diff --git a/src/material/button/button.scss b/src/material/button/button.scss index 0f159ce4860e..8dfdf9722e27 100644 --- a/src/material/button/button.scss +++ b/src/material/button/button.scss @@ -107,6 +107,10 @@ } } +.mat-mdc-button-base { + text-decoration: none; +} + .mat-mdc-button, .mat-mdc-unelevated-button, .mat-mdc-raised-button, diff --git a/src/material/core/tokens/m2/mdc/_filled-button.scss b/src/material/core/tokens/m2/mdc/_filled-button.scss index 04318a9ce937..45ae62b97863 100644 --- a/src/material/core/tokens/m2/mdc/_filled-button.scss +++ b/src/material/core/tokens/m2/mdc/_filled-button.scss @@ -35,11 +35,6 @@ $prefix: (mdc, filled-button); container-shadow-color: null, focus-label-text-color: null, hover-label-text-color: null, - label-text-font: null, - label-text-size: null, - label-text-tracking: null, - label-text-transform: null, - label-text-weight: null, pressed-label-text-color: null, with-icon-disabled-icon-color: null, with-icon-focus-icon-color: null, @@ -81,7 +76,13 @@ $prefix: (mdc, filled-button); // Tokens that can be configured through Angular Material's typography theming API. @function get-typography-tokens($theme) { - @return (); + @return ( + label-text-font: inspection.get-theme-typography($theme, button, font-family), + label-text-size: inspection.get-theme-typography($theme, button, font-size), + label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing), + label-text-weight: inspection.get-theme-typography($theme, button, font-weight), + label-text-transform: none, + ); } // Tokens that can be configured through Angular Material's density theming API. diff --git a/src/material/core/tokens/m2/mdc/_outlined-button.scss b/src/material/core/tokens/m2/mdc/_outlined-button.scss index f837c3d817a3..2795a94ac186 100644 --- a/src/material/core/tokens/m2/mdc/_outlined-button.scss +++ b/src/material/core/tokens/m2/mdc/_outlined-button.scss @@ -49,12 +49,6 @@ $prefix: (mdc, outlined-button); with-icon-focus-icon-color: null, with-icon-pressed-icon-color: null, with-icon-disabled-icon-color: null, - - label-text-size: null, - label-text-font: null, - label-text-weight: null, - label-text-tracking: null, - label-text-transform: null ); } @@ -87,7 +81,13 @@ $prefix: (mdc, outlined-button); // Tokens that can be configured through Angular Material's typography theming API. @function get-typography-tokens($theme) { - @return (); + @return ( + label-text-font: inspection.get-theme-typography($theme, button, font-family), + label-text-size: inspection.get-theme-typography($theme, button, font-size), + label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing), + label-text-weight: inspection.get-theme-typography($theme, button, font-weight), + label-text-transform: none, + ); } // Tokens that can be configured through Angular Material's density theming API. diff --git a/src/material/core/tokens/m2/mdc/_protected-button.scss b/src/material/core/tokens/m2/mdc/_protected-button.scss index ba9b0f9b1ae1..42d20c241403 100644 --- a/src/material/core/tokens/m2/mdc/_protected-button.scss +++ b/src/material/core/tokens/m2/mdc/_protected-button.scss @@ -33,11 +33,6 @@ $prefix: (mdc, protected-button); disabled-container-elevation: null, focus-container-elevation: null, pressed-container-elevation: null, - label-text-font: null, - label-text-size: null, - label-text-tracking: null, - label-text-transform: null, - label-text-weight: null, with-icon-icon-size: null, focus-label-text-color: null, hover-label-text-color: null, @@ -80,7 +75,13 @@ $prefix: (mdc, protected-button); // Tokens that can be configured through Angular Material's typography theming API. @function get-typography-tokens($theme) { - @return (); + @return ( + label-text-font: inspection.get-theme-typography($theme, button, font-family), + label-text-size: inspection.get-theme-typography($theme, button, font-size), + label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing), + label-text-weight: inspection.get-theme-typography($theme, button, font-weight), + label-text-transform: none, + ); } // Tokens that can be configured through Angular Material's density theming API. diff --git a/src/material/core/tokens/m2/mdc/_text-button.scss b/src/material/core/tokens/m2/mdc/_text-button.scss index adb58aba85b9..a2083c5fbc02 100644 --- a/src/material/core/tokens/m2/mdc/_text-button.scss +++ b/src/material/core/tokens/m2/mdc/_text-button.scss @@ -21,13 +21,6 @@ $prefix: (mdc, text-button); // prevent the buttons from collapsing if a density mixin isn't included. container-height: 36px, - // TODO: handle these through the typography styles eventually. - label-text-font: null, - label-text-size: null, - label-text-tracking: null, - label-text-transform: null, - label-text-weight: null, - // ============================================================================================= // = TOKENS NOT USED IN ANGULAR MATERIAL = // ============================================================================================= @@ -74,7 +67,13 @@ $prefix: (mdc, text-button); // Tokens that can be configured through Angular Material's typography theming API. @function get-typography-tokens($theme) { - @return (); + @return ( + label-text-font: inspection.get-theme-typography($theme, button, font-family), + label-text-size: inspection.get-theme-typography($theme, button, font-size), + label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing), + label-text-weight: inspection.get-theme-typography($theme, button, font-weight), + label-text-transform: none, + ); } // Tokens that can be configured through Angular Material's density theming API.