fix(material/badge): content incorrectly truncated in M3 (#29854)

Fixes that at some point the M3 badge regressed to where the content was always being truncated. The regression was likely, because the previous setup was very fragile and it was relying on some tokens never being emitted.

These changes remove the need to rely on fallbacks and resolve the issue by setting the correct token values.

Fixes #29788.

Author: crisbeto

src/material/badge/badge.scss

@@ -22,11 +22,11 @@ $large-size: $default-size + 6;
       // * `container-size` token - In M2 the token is emitted as `unset` to preserve the legacy
       // behavior while in M3 it targets `min-width` and `min-height` which allows the badge to
       // grow with the content.
-      width: token-utils.get-token-variable($legacy-size-var-name, $fallback: unset);
-      height: token-utils.get-token-variable($legacy-size-var-name, $fallback: unset);
-      min-width: token-utils.get-token-variable($size-var-name, $fallback: unset);
-      min-height: token-utils.get-token-variable($size-var-name, $fallback: unset);
-      line-height: token-utils.get-token-variable($legacy-size-var-name);
+      @include token-utils.create-token-slot(width, $legacy-size-var-name);
+      @include token-utils.create-token-slot(height, $legacy-size-var-name);
+      @include token-utils.create-token-slot(min-width, $size-var-name);
+      @include token-utils.create-token-slot(min-height, $size-var-name);
+      @include token-utils.create-token-slot(line-height, '#{$prefix}line-height');
       @include token-utils.create-token-slot(padding, '#{$prefix}container-padding');
       @include token-utils.create-token-slot(font-size, '#{$prefix}text-size');
       @include token-utils.create-token-slot(margin, '#{$prefix}container-offset');

src/material/core/tokens/m2/mat/_badge.scss

@@ -6,15 +6,19 @@
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 
+$_default-size: 22px;
+$_small-size: $_default-size - 6px;
+$_large-size: $_default-size + 6px;
+
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, badge);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
-  $default-size: 22px;
-  $small-size: $default-size - 6;
-  $large-size: $default-size + 6;
+  $default-size: $_default-size;
+  $small-size: $_small-size;
+  $large-size: $_large-size;
 
   @return (
     container-shape: 50%,
@@ -77,10 +81,15 @@ $prefix: (mat, badge);
 
   @return (
     text-font: inspection.get-theme-typography($theme, body-2, font-family),
+    line-height: $_default-size,
     text-size: $base-size,
     text-weight: 600,
+
     small-size-text-size: $base-size * 0.75,
+    small-size-line-height: $_small-size,
+
     large-size-text-size: $base-size * 2,
+    large-size-line-height: $_large-size,
   );
 }
 

src/material/core/tokens/m3/mat/_badge.scss

@@ -25,9 +25,11 @@ $prefix: (mat, badge);
     small-size-text-size: token-definition.hardcode(0, $exclude-hardcoded),
     container-shape: map.get($systems, md-sys-shape, corner-full),
     container-size: token-definition.hardcode(16px, $exclude-hardcoded),
-    legacy-container-size: token-definition.hardcode(16px, $exclude-hardcoded),
-    legacy-small-size-container-size: token-definition.hardcode(16px, $exclude-hardcoded),
+    line-height: token-definition.hardcode(16px, $exclude-hardcoded),
+    legacy-container-size: token-definition.hardcode(unset, $exclude-hardcoded),
+    legacy-small-size-container-size: token-definition.hardcode(unset, $exclude-hardcoded),
     small-size-container-size: token-definition.hardcode(6px, $exclude-hardcoded),
+    small-size-line-height: token-definition.hardcode(6px, $exclude-hardcoded),
     container-padding: token-definition.hardcode(0 4px, $exclude-hardcoded),
     small-size-container-padding: token-definition.hardcode(0, $exclude-hardcoded),
     container-offset: token-definition.hardcode(-12px 0, $exclude-hardcoded),
@@ -37,11 +39,12 @@ $prefix: (mat, badge);
 
     // This size isn't in the M3 spec so we emit the same values as for `medium`.
     large-size-container-size: token-definition.hardcode(16px, $exclude-hardcoded),
+    large-size-line-height: token-definition.hardcode(16px, $exclude-hardcoded),
     large-size-container-offset: token-definition.hardcode(-12px 0, $exclude-hardcoded),
     large-size-container-overlap-offset: token-definition.hardcode(-12px, $exclude-hardcoded),
     large-size-text-size: map.get($systems, md-sys-typescale, label-small-size),
     large-size-container-padding: token-definition.hardcode(0 4px, $exclude-hardcoded),
-    legacy-large-size-container-size: token-definition.hardcode(16px, $exclude-hardcoded),
+    legacy-large-size-container-size: token-definition.hardcode(unset, $exclude-hardcoded),
   ), (
     primary: (
       background-color: map.get($systems, md-sys-color, primary),