fix(material/button-toggle): Add remaining typography tokens needed for M3 (#28578)

Author: amysorto

src/material-experimental/theming/_custom-tokens.scss

@@ -134,8 +134,10 @@
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {Map} A set of custom tokens for the mat-button-toggle
 @function button-toggle($systems, $exclude-hardcoded) {
-  @return ((
-    shape: _hardcode(9999px, $exclude-hardcoded),
+  @return mat.private-merge-all(
+    _generate-typography-tokens($systems, label-text, label-large),
+  (
+    shape: map.get($systems, md-sys-shape, corner-full),
     hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
     focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
     text-color: map.get($systems, md-sys-color, on-surface),
@@ -157,7 +159,6 @@
       $alpha: 0.12,
     ),
     divider-color: map.get($systems, md-sys-color, outline),
-    text-font: map.get($systems, md-sys-typescale, label-large-font),
   ), (
     // Color variants:
     primary: (

src/material/button-toggle/button-toggle.scss

@@ -79,7 +79,11 @@ $_standard-tokens: (
 
   @include token-utils.use-tokens($_legacy-tokens...) {
     @include token-utils.create-token-slot(color, text-color);
-    @include token-utils.create-token-slot(font-family, text-font);
+    @include token-utils.create-token-slot(font-family, label-text-font);
+    @include token-utils.create-token-slot(font-size, label-text-size);
+    @include token-utils.create-token-slot(line-height, label-text-line-height);
+    @include token-utils.create-token-slot(font-weight, label-text-weight);
+    @include token-utils.create-token-slot(letter-spacing, label-text-tracking);
 
     &.cdk-keyboard-focused .mat-button-toggle-focus-overlay {
       @include token-utils.create-token-slot(opacity, focus-state-layer-opacity);
@@ -116,7 +120,11 @@ $_standard-tokens: (
     $divider-color: var(#{token-utils.get-token-variable(divider-color)});
     @include token-utils.create-token-slot(color, text-color);
     @include token-utils.create-token-slot(background-color, background-color);
-    @include token-utils.create-token-slot(font-family, text-font);
+    @include token-utils.create-token-slot(font-family, label-text-font);
+    @include token-utils.create-token-slot(font-size, label-text-size);
+    @include token-utils.create-token-slot(line-height, label-text-line-height);
+    @include token-utils.create-token-slot(font-weight, label-text-weight);
+    @include token-utils.create-token-slot(letter-spacing, label-text-tracking);
 
     .mat-button-toggle-group-appearance-standard & + & {
       border-left: solid 1px $divider-color;

src/material/core/tokens/m2/mat/_legacy-button-toggle.scss

@@ -34,11 +34,11 @@ $prefix: (mat, legacy-button-toggle);
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
   @return (
-    // TODO(crisbeto): other components have tokens for all typography dimensions (font weight,
-    // letter spacing etc). The button toggle only has the font to match what it had in the
-    // old theming API and to reduce internal breakages. We should introduce more typography
-    // tokens at some point.
-    text-font: inspection.get-theme-typography($theme, body-1, font-family),
+    label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
+    label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
+    label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
+    label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
   );
 }
 

src/material/core/tokens/m2/mat/_standard-button-toggle.scss

@@ -52,11 +52,11 @@ $prefix: (mat, standard-button-toggle);
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
   @return (
-    // TODO(crisbeto): other components have tokens for all typography dimensions (font weight,
-    // letter spacing etc). The button toggle only has the font to match what it had in the
-    // old theming API and to reduce internal breakages. We should introduce more typography
-    // tokens at some point.
-    text-font: inspection.get-theme-typography($theme, body-1, font-family),
+    label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
+    label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
+    label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
+    label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
   );
 }