refactor(material/form-field): simplify structural styles (#29400)

Reworks the form field styles to make them smaller and easier to mainta.

Author: crisbeto

src/material/core/tokens/m2/mat/_form-field.scss

@@ -1,6 +1,5 @@
 @use 'sass:math';
 @use 'sass:map';
-@use '@material/textfield' as mdc-textfield;
 @use '../../token-utils';
 @use '../../../style/sass-utils';
 @use '../../../theming/theming';
@@ -114,14 +113,14 @@ $prefix: (mat, form-field);
     -5: 36px,
   );
   $height: map.get($size-scale, $density-scale);
-  $hide-label: $height < mdc-textfield.$minimum-height-for-filled-label;
+  $hide-label: $height < 52px;
 
   // We computed the desired height of the form-field using the density configuration. The
   // spec only describes vertical spacing/alignment in non-dense mode. This means that we
   // cannot update the spacing to explicit numbers based on the density scale. Instead, we
   // determine the height reduction and equally subtract it from the default `top` and `bottom`
   // padding that is provided by the Material Design specification.
-  $vertical-deduction: math.div(mdc-textfield.$height - $height, 2);
+  $vertical-deduction: math.div(56px - $height, 2);
 
   // Note: these calculations are trivial enough that we could do them at runtime with `calc`
   // and the value of the `height` token. The problem is that because we need to hide the label

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

@@ -1,6 +1,5 @@
 @use 'sass:math';
 @use 'sass:map';
-@use '@material/textfield' as mdc-textfield;
 @use '../../token-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
@@ -66,7 +65,7 @@ $prefix: (mat, paginator);
   // cannot update the spacing to explicit numbers based on the density scale. Instead, we
   // determine the height reduction and equally subtract it from the default `top` and `bottom`
   // padding that is provided by the Material Design specification.
-  $form-field-vertical-deduction: math.div(mdc-textfield.$height - $form-field-height, 2);
+  $form-field-vertical-deduction: math.div(56px - $form-field-height, 2);
   $form-field-vertical-padding: 16px - $form-field-vertical-deduction;
 
   @return (

src/material/form-field/BUILD.bazel

@@ -57,6 +57,7 @@ sass_library(
         "_form-field-native-select.scss",
         "_form-field-subscript.scss",
         "_mdc-text-field-density-overrides.scss",
+        "_mdc-text-field-structure.scss",
         "_mdc-text-field-structure-overrides.scss",
         "_mdc-text-field-textarea-overrides.scss",
         "_user-agent-overrides.scss",

src/material/form-field/_form-field-subscript.scss

@@ -1,5 +1,3 @@
-@use '@material/textfield/variables' as mdc-textfield-variables;
-
 @use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field;
 @use '../core/style/vendor-prefixes';
 @use '../core/tokens/token-utils';
@@ -18,7 +16,7 @@
     top: 0;
     left: 0;
     right: 0;
-    padding: 0 mdc-textfield-variables.$padding-horizontal;
+    padding: 0 16px;
   }
 
   .mat-mdc-form-field-subscript-dynamic-size {

src/material/form-field/_form-field-theme.scss

@@ -1,5 +1,3 @@
-@use '@material/textfield/filled-text-field-theme' as mdc-filled-text-field-theme;
-@use '@material/textfield/outlined-text-field-theme' as mdc-outlined-text-field-theme;
 @use '../core/tokens/m2/mdc/filled-text-field' as tokens-mdc-filled-text-field;
 @use '../core/tokens/m2/mdc/outlined-text-field' as tokens-mdc-outlined-text-field;
 @use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field;
@@ -43,28 +41,28 @@
   }
   @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-filled-text-field-theme.theme(
-          tokens-mdc-filled-text-field.get-color-tokens($theme));
-      @include mdc-outlined-text-field-theme.theme(
-          tokens-mdc-outlined-text-field.get-color-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix,
+        tokens-mdc-filled-text-field.get-color-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
+        tokens-mdc-outlined-text-field.get-color-tokens($theme));
       @include token-utils.create-token-values(tokens-mat-form-field.$prefix,
         tokens-mat-form-field.get-color-tokens($theme));
     }
 
     .mat-mdc-form-field.mat-accent {
-      @include mdc-filled-text-field-theme.theme(
-          tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, accent));
-      @include mdc-outlined-text-field-theme.theme(
-          tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, accent));
+      @include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix,
+        tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, accent));
+      @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
+        tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, accent));
       @include token-utils.create-token-values(tokens-mat-form-field.$prefix,
         tokens-mat-form-field.private-get-color-palette-color-tokens($theme, accent));
     }
 
     .mat-mdc-form-field.mat-warn {
-      @include mdc-filled-text-field-theme.theme(
-          tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, warn));
-      @include mdc-outlined-text-field-theme.theme(
-          tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, warn));
+      @include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix,
+        tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, warn));
+      @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
+        tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, warn));
       @include token-utils.create-token-values(tokens-mat-form-field.$prefix,
         tokens-mat-form-field.private-get-color-palette-color-tokens($theme, warn));
     }
@@ -79,10 +77,10 @@
   }
   @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-filled-text-field-theme.theme(
-          tokens-mdc-filled-text-field.get-typography-tokens($theme));
-      @include mdc-outlined-text-field-theme.theme(
-          tokens-mdc-outlined-text-field.get-typography-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix,
+        tokens-mdc-filled-text-field.get-typography-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
+        tokens-mdc-outlined-text-field.get-typography-tokens($theme));
       @include token-utils.create-token-values(tokens-mat-form-field.$prefix,
         tokens-mat-form-field.get-typography-tokens($theme));
     }
@@ -152,7 +150,9 @@
     token-utils.get-tokens-for($tokens, tokens-mdc-outlined-text-field.$prefix, $options...);
   $mat-form-field-tokens:
     token-utils.get-tokens-for($tokens, tokens-mat-form-field.$prefix, $options...);
-  @include mdc-filled-text-field-theme.theme($mdc-filled-text-field-tokens);
-  @include mdc-outlined-text-field-theme.theme($mdc-outlined-text-field-tokens);
+  @include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix,
+    $mdc-filled-text-field-tokens);
+  @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
+    $mdc-outlined-text-field-tokens);
   @include token-utils.create-token-values(tokens-mat-form-field.$prefix, $mat-form-field-tokens);
 }

src/material/form-field/_mdc-text-field-density-overrides.scss

@@ -1,4 +1,3 @@
-@use '@material/textfield' as mdc-textfield;
 @use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field;
 @use '../core/tokens/token-utils';
 
@@ -51,7 +50,8 @@
     .mdc-floating-label--float-above {
       // Needs to be in a string form to work around an internal check that incorrectly flags this
       // interpolation in `calc` as unnecessary. If we don't have it, Sass won't evaluate it.
-      $translate: 'calc(#{mdc-textfield.get-outlined-label-position-y(var(#{$height}))} * -1)';
+      $offset: 'calc(6.75px + var(#{$height}) / 2)';
+      $translate: 'calc(#{$offset} * -1)';
       --mat-mdc-form-field-label-transform: translateY(#{$translate})
         scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
       transform: var(--mat-mdc-form-field-label-transform);

src/material/form-field/_mdc-text-field-structure-overrides.scss

@@ -1,4 +1,3 @@
-@use '@material/textfield/variables' as mdc-textfield-variables;
 @use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field;
 @use '../core/tokens/token-utils';
 @use '../core/style/vendor-prefixes';
@@ -101,8 +100,8 @@ $_enable-form-field-will-change-reset: true;
   [dir='rtl'] {
     // Undo the above padding removals which only apply in LTR languages.
     .mat-mdc-text-field-wrapper {
-      padding-left: mdc-textfield-variables.$padding-horizontal;
-      padding-right: mdc-textfield-variables.$padding-horizontal;
+      padding-left: 16px;
+      padding-right: 16px;
     }
     // ...and apply the correct padding resets for RTL languages.
     .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper {
@@ -164,16 +163,6 @@ $_enable-form-field-will-change-reset: true;
     padding-top: 0;
   }
 
-  // Unset the baseline adjustment styles that are applied to the `.mdc-text-field` before
-  // pseudo element. We control the vertical alignment of form field controls using infix
-  // spacing since we support custom form-field controls. Those don't necessarily have an
-  // explicit height that matches with the Material Design specification. If the height isn't
-  // explicitly set to a specific value by MDC, the control will not align correctly vertically.
-  // e.g. No vertical spacing to the bottom-line if the control is too large.
-  .mat-mdc-text-field-wrapper::before {
-    content: none;
-  }
-
   // This fixes an issue where the notch appears to be thicker than the rest of the outline when
   // zoomed in on Chrome. The border inconsistency seems to be some kind of rendering artifact
   // that arises from a combination of the fact that the notch contains text, while the leading