refactor(material/button): switch typography to tokens (#27999)

* refactor(material/button): switch typography to tokens * fixup! refactor(material/button): switch typography to tokens (cherry picked from commit 7ee07db)
angular · Dec 8, 2023 · fc67358 · fc67358
1 parent 9bee80b
commit fc67358
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 38 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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.