fix(material-experimental/theming): set up internal form field in M3 (#…

…28414)

Fixes that the tokens for the internal form field weren't being provided in M3. Also includes the tokens in the components where the internal form field is used.

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

@@ -384,6 +384,22 @@
   ));
 }
 
+/// Gets the token values for the MDC form field.
+/// @param {Map} $systems The MDC system tokens.
+/// @return {Map} The form field tokens.
+@function _get-form-field-tokens($systems) {
+  @return (
+    // TODO: MDC currently doesn't provide tokens for the form field so we need to
+    // define them ourselves. Clean this up once b/284340076 is resolved.
+    label-text-color: map.get($systems, 'md-sys-color', 'on-surface'),
+    label-text-font: map.get($systems, 'md-sys-typescale', 'body-medium-font'),
+    label-text-line-height: map.get($systems, 'md-sys-typescale', 'body-medium-line-height'),
+    label-text-size: map.get($systems, 'md-sys-typescale', 'body-medium-size'),
+    label-text-tracking: map.get($systems, 'md-sys-typescale', 'body-medium-tracking'),
+    label-text-weight: map.get($systems, 'md-sys-typescale', 'body-medium-weight'),
+  );
+}
+
 /// Generates a set of namespaced tokens for all components.
 /// @param {Map} $systems The MDC system tokens
 /// @param {Boolean} $include-non-systemized Whether to include non-systemized tokens
@@ -466,6 +482,11 @@
       ),
       $token-slots
     ),
+    _namespace-tokens(
+      (mdc, form-field),
+      _get-form-field-tokens($systems),
+      $token-slots
+    ),
     _namespace-tokens(
       (mdc, icon-button),
       mdc-tokens.md-comp-icon-button-values($systems, $exclude-hardcoded),

src/material/checkbox/_checkbox-theme.scss

@@ -107,5 +107,6 @@
     // TODO(mmalerba): Some of the theme styles above are not represented in terms of tokens,
     //   so this mixin is currently incomplete.
     @include mdc-checkbox-theme.theme(map.get($tokens, tokens-mdc-checkbox.$prefix));
+    @include mdc-form-field-theme.theme(map.get($tokens, tokens-mdc-form-field.$prefix));
   }
 }

src/material/core/tokens/m2/_index.scss

@@ -48,6 +48,7 @@
 @use './mdc/elevated-card' as tokens-mdc-elevated-card;
 @use './mdc/extended-fab' as tokens-mdc-extended-fab;
 @use './mdc/fab' as tokens-mdc-fab;
+@use './mdc/form-field' as tokens-mdc-form-field;
 @use './mdc/filled-text-field' as tokens-mdc-filled-text-field;
 @use './mdc/icon-button' as tokens-mdc-icon-button;
 @use './mdc/linear-progress' as tokens-mdc-linear-progress;
@@ -149,7 +150,8 @@
       _get-tokens-for-module($theme, tokens-mdc-extended-fab),
       _get-tokens-for-module($theme, tokens-mdc-fab),
       _get-tokens-for-module($theme, tokens-mdc-filled-button),
-      _get-tokens-for-module($theme, tokens-mdc-filled-text-field),
+      _get-tokens-for-module($theme, tokens-mdc-filled-button),
+      _get-tokens-for-module($theme, tokens-mdc-form-field),
       _get-tokens-for-module($theme, tokens-mdc-icon-button),
       _get-tokens-for-module($theme, tokens-mdc-linear-progress),
       _get-tokens-for-module($theme, tokens-mdc-list),

src/material/radio/_radio-theme.scss

@@ -110,6 +110,7 @@
 @mixin _theme-from-tokens($tokens) {
   @if ($tokens != ()) {
     @include mdc-radio-theme.theme(map.get($tokens, tokens-mdc-radio.$prefix));
+    @include mdc-form-field-theme.theme(map.get($tokens, tokens-mdc-form-field.$prefix));
     @include token-utils.create-token-values(
         tokens-mat-radio.$prefix, map.get($tokens, tokens-mat-radio.$prefix));
   }

src/material/slide-toggle/_slide-toggle-theme.scss

@@ -101,5 +101,6 @@
 @mixin _theme-from-tokens($tokens) {
   @if ($tokens != ()) {
     @include mdc-switch-theme.theme(map.get($tokens, tokens-mdc-switch.$prefix));
+    @include mdc-form-field-theme.theme(map.get($tokens, tokens-mdc-form-field.$prefix));
   }
 }