feat(material-experimental/mdc-form-field): support theming through f…

…eature targeting (#18265)

src/material-experimental/mdc-form-field/BUILD.bazel

@@ -32,7 +32,10 @@ ng_module(
 
 sass_library(
     name = "mdc_form_field_scss_lib",
-    srcs = ["_mdc-form-field.scss"],
+    srcs = [
+        "_mdc-form-field.scss",
+        "_mdc-text-field-theme-variable-refresh.scss",
+    ],
     deps = [
         ":form_field_partials",
         "//src/cdk/a11y:a11y_scss_lib",

src/material-experimental/mdc-form-field/_mdc-form-field.scss

@@ -1,17 +1,40 @@
-@import '@material/textfield/variables.import';
+@use '@material/ripple/mixins' as mdc-ripple;
+
+@import '@material/textfield/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
 @import 'form-field-subscript';
 @import 'form-field-bottom-line';
+@import 'mdc-text-field-theme-variable-refresh';
 
 @mixin mat-form-field-theme-mdc($theme) {
   @include mat-using-mdc-theme($theme) {
-    @include _mat-form-field-subscript-theme();
-    @include _mat-form-field-bottom-line-theme();
+    @include _mdc-text-field-refresh-theme-variables() {
+      @include mdc-text-field-core-styles($query: $mat-theme-styles-query);
+      @include mdc-floating-label-core-styles($query: $mat-theme-styles-query);
+      @include mdc-text-field-core-styles($query: $mat-theme-styles-query);
+      @include _mat-form-field-subscript-theme();
+      @include _mat-form-field-bottom-line-theme();
+
+      // MDC text-field intends to hide the ripples in the outline appearance. The styles for
+      // this collide with other styles from the structure styles. This is because the ripples
+      // are made invisible by using the `mdc-ripple.states-base-color` mixin. The mixin makes the
+      // ripples `transparent` by generating `content: none` instead. This means that the style
+      // will collide with the default `content` for ripple pseudo elements. Depending on how
+      // themes and component styles are inserted, the ripples will not hide properly. To ensure
+      // that the ripples are not rendered in the outline appearance, we copy the mixin call but
+      // increase the specificity.
+      .mat-mdc-text-field-wrapper.mdc-text-field--outlined {
+        @include mdc-ripple.states-base-color(transparent);
+      }
+    }
   }
 }
 
 @mixin mat-form-field-typography-mdc($config) {
   @include mat-using-mdc-typography($config) {
+    @include mdc-text-field-core-styles($query: $mat-typography-styles-query);
+    @include mdc-floating-label-core-styles($query: $mat-typography-styles-query);
+    @include mdc-text-field-core-styles($query: $mat-typography-styles-query);
     @include _mat-form-field-subscript-typography($config);
   }
 }

src/material-experimental/mdc-form-field/_mdc-text-field-theme-variable-refresh.scss

@@ -0,0 +1,63 @@
+@use 'sass:color';
+@use '@material/theme/variables' as theme-variables;
+
+@import '@material/textfield/variables.import';
+
+// Mixin that refreshes the MDC text-field theming variables. This mixin should be used when
+// the base MDC theming variables have been explicitly updated, but the component specific
+// theming-based variables are still based on the old MDC base theming variables. The mixin
+// restores the previous values for the variables to avoid unexpected global side effects.
+@mixin _mdc-text-field-refresh-theme-variables() {
+  $_mdc-text-field-disabled-border-border: $mdc-text-field-disabled-border-border;
+  $mdc-text-field-disabled-border: rgba(theme-variables.prop-value(on-surface), 0.06) !global;
+  $_mdc-text-field-bottom-line-idle: $mdc-text-field-bottom-line-idle;
+  $mdc-text-field-bottom-line-idle: rgba(theme-variables.prop-value(on-surface), 0.42) !global;
+  $_mdc-text-field-label: $mdc-text-field-label;
+  $mdc-text-field-label: rgba(theme-variables.prop-value(on-surface), 0.6) !global;
+  $_mdc-text-field-ink-color: $mdc-text-field-ink-color;
+  $mdc-text-field-ink-color: rgba(theme-variables.prop-value(on-surface), 0.87) !global;
+  $_mdc-text-field-focused-label-color: $mdc-text-field-focused-label-color;
+  $mdc-text-field-focused-label-color: rgba(theme-variables.prop-value(primary), 0.87) !global;
+  $_mdc-text-field-placeholder-ink-color: $mdc-text-field-placeholder-ink-color;
+  $mdc-text-field-placeholder-ink-color: rgba(theme-variables.prop-value(on-surface), 0.54) !global;
+  $_mdc-text-field-disabled-label-color: $mdc-text-field-disabled-label-color;
+  $mdc-text-field-disabled-label-color: rgba(theme-variables.prop-value(on-surface), 0.38) !global;
+  $_mdc-text-field-disabled-ink-color: $mdc-text-field-disabled-ink-color;
+  $mdc-text-field-disabled-ink-color: rgba(theme-variables.prop-value(on-surface), 0.38) !global;
+  $_mdc-text-field-disabled-placeholder-ink-color: $mdc-text-field-disabled-placeholder-ink-color;
+  $mdc-text-field-disabled-placeholder-ink-color:
+      rgba(theme-variables.prop-value(on-surface), 0.38) !global;
+  $_mdc-text-field-background: $mdc-text-field-background;
+  $mdc-text-field-background: color.mix(
+      theme-variables.prop-value(on-surface), theme-variables.prop-value(surface), 4%) !global;
+  $_mdc-text-field-disabled-background: $mdc-text-field-disabled-background;
+  $mdc-text-field-disabled-background: color.mix(
+      theme-variables.prop-value(on-surface), theme-variables.prop-value(surface), 2%) !global;
+  $_mdc-text-field-outlined-idle-border: $mdc-text-field-outlined-idle-border;
+  $mdc-text-field-outlined-idle-border: rgba(theme-variables.prop-value(on-surface), 0.38) !global;
+  $_mdc-text-field-outlined-disabled-border: $mdc-text-field-outlined-disabled-border;
+  $mdc-text-field-outlined-disabled-border:
+      rgba(theme-variables.prop-value(on-surface), 0.06) !global;
+  $_mdc-text-field-outlined-hover-border: $mdc-text-field-outlined-hover-border;
+  $mdc-text-field-outlined-hover-border: rgba(theme-variables.prop-value(on-surface), 0.87) !global;
+
+  // The content will be generated with the refreshed MDC text-field theming variables.
+  @content;
+
+  // Reset all variables to ensure that this mixin does not cause unexpected side effects.
+  $mdc-text-field-disabled-border-border: $_mdc-text-field-disabled-border-border !global;
+  $mdc-text-field-bottom-line-idle: $_mdc-text-field-bottom-line-idle !global;
+  $mdc-text-field-label: $_mdc-text-field-label !global;
+  $mdc-text-field-ink-color: $_mdc-text-field-ink-color !global;
+  $mdc-text-field-focused-label-color: $_mdc-text-field-focused-label-color !global;
+  $mdc-text-field-placeholder-ink-color: $_mdc-text-field-placeholder-ink-color !global;
+  $mdc-text-field-disabled-label-color: $_mdc-text-field-disabled-label-color !global;
+  $mdc-text-field-disabled-ink-color: $_mdc-text-field-disabled-ink-color !global;
+  $mdc-text-field-disabled-placeholder-ink-color:
+      $_mdc-text-field-disabled-placeholder-ink-color !global;
+  $mdc-text-field-background: $_mdc-text-field-background !global;
+  $mdc-text-field-disabled-background: $_mdc-text-field-disabled-background !global;
+  $mdc-text-field-outlined-idle-border: $_mdc-text-field-outlined-idle-border !global;
+  $mdc-text-field-outlined-disabled-border: $_mdc-text-field-outlined-disabled-border !global;
+  $mdc-text-field-outlined-hover-border: $_mdc-text-field-outlined-hover-border !global;
+}

src/material-experimental/mdc-form-field/form-field.scss

@@ -1,11 +1,16 @@
-// TODO(devversion): do not import all text-field styles. Use feature targeting once available.
-@import '@material/textfield/mdc-text-field';
+@import '@material/textfield/mixins.import';
+
 @import 'form-field-sizing';
 @import 'form-field-subscript';
 @import 'form-field-bottom-line';
 @import 'mdc-text-field-textarea-overrides';
 @import 'mdc-text-field-structure-overrides';
 
+// Base styles for MDC notched-outline, MDC floating label and MDC text-field.
+@include mdc-notched-outline-core-styles($query: $mat-base-styles-query);
+@include mdc-floating-label-core-styles($query: $mat-base-styles-query);
+@include mdc-text-field-core-styles($query: $mat-base-styles-query);
+
 // MDC text-field overwrites.
 @include _mat-mdc-text-field-textarea-overrides();
 @include _mat-mdc-text-field-structure-overrides();