refactor(material/button): switch typography to tokens

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);
   }
 }
 

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,

src/material/core/tokens/m2/mdc/_filled-button.scss

@@ -35,11 +35,7 @@ $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 +77,12 @@ $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)
+  );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.

src/material/core/tokens/m2/mdc/_outlined-button.scss

@@ -49,12 +49,7 @@ $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
+    label-text-transform: null,
   );
 }
 
@@ -87,7 +82,12 @@ $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)
+  );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.

src/material/core/tokens/m2/mdc/_protected-button.scss

@@ -33,11 +33,7 @@ $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 +76,12 @@ $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)
+  );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.

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                                                       =
     // =============================================================================================
@@ -49,6 +42,7 @@ $prefix: (mdc, text-button);
     focus-ring-color: null,
     focus-ring-offset: null,
     keep-touch-target: false,
+    label-text-transform: null
   );
 }
 
@@ -59,35 +53,42 @@ $prefix: (mdc, text-button);
 
   @return (
     label-text-color: $on-surface,
-    disabled-label-text-color: rgba($on-surface, if($is-dark, 0.5, 0.38)),
+    disabled-label-text-color: rgba($on-surface, if($is-dark, 0.5, 0.38))
   );
 }
 
 // Generates the mapping for the properties that change based on the button palette color.
 @function private-get-color-palette-color-tokens($theme, $palette-name) {
   $palette: map.get($theme, $palette-name);
 
-  @return (
-    label-text-color: inspection.get-theme-color($theme, $palette-name)
-  );
+  @return (label-text-color: inspection.get-theme-color($theme, $palette-name));
 }
 
 // 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)
+  );
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
 @function get-density-tokens($theme) {
   $scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
 
   @return (
-    container-height: map.get((
-      0: 36px,
-      -1: 32px,
-      -2: 28px,
-      -3: 24px,
-    ), $scale),
+    container-height:
+      map.get(
+        (
+          0: 36px,
+          -1: 32px,
+          -2: 28px,
+          -3: 24px,
+        ),
+        $scale
+      )
   );
 }