From 8b87d3ece8fd8555bb5f3b118777ae16196cfb1c Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sat, 11 Jan 2020 12:39:26 +0100
Subject: [PATCH] feat(text-field): add feature targeting for styles

Sets up feature targeting for the text field and its related styles.

Relates to #4227.
---
 packages/mdc-textfield/_mixins.scss           | 1057 +++++++++++++----
 .../character-counter/_mixins.scss            |   54 +-
 .../mdc-text-field-character-counter.scss     |   19 +-
 .../mdc-textfield/helper-text/_mixins.scss    |   68 +-
 .../mdc-text-field-helper-text.scss           |   25 +-
 packages/mdc-textfield/icon/_mixins.scss      |   82 +-
 .../icon/mdc-text-field-icon.scss             |    5 +-
 packages/mdc-textfield/mdc-text-field.scss    |  280 +----
 packages/mdc-textfield/package.json           |    1 +
 test/scss/_feature-targeting-test.scss        |   51 +
 10 files changed, 1014 insertions(+), 628 deletions(-)

diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 83c64efa1d2..3e750abafad 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -20,14 +20,22 @@
 // THE SOFTWARE.
 //
 
+@import "@material/animation/variables";
 @import "@material/density/functions";
+@import "@material/feature-targeting/functions";
+@import "@material/feature-targeting/mixins";
 @import "@material/floating-label/mixins";
 @import "@material/line-ripple/mixins";
 @import "@material/notched-outline/mixins";
 @import "@material/notched-outline/variables";
-@import "@material/theme/mixins";
-@import "@material/shape/mixins";
+@import "@material/ripple/mixins";
+@import "@material/rtl/mixins";
 @import "@material/shape/functions";
+@import "@material/shape/mixins";
+@import "@material/theme/mixins";
+@import "@material/theme/variables";
+@import "@material/typography/mixins";
+@import "@material/typography/variables";
 @import "helper-text/mixins";
 @import "character-counter/mixins";
 @import "icon/mixins";
@@ -35,20 +43,373 @@
 @import "./variables";
 @import "./functions";
 
+@mixin mdc-text-field-core-styles($query: mdc-feature-all()) {
+  @include mdc-text-field-ripple($query);
+  @include mdc-text-field-without-ripple($query);
+}
+
+@mixin mdc-text-field-without-ripple($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  // postcss-bem-linter: define text-field
+  .mdc-text-field {
+    // Text Field intentionally omits press ripple, so each state needs to be specified individually.
+    @include mdc-states-base-color($mdc-text-field-ink-color, $query: $query);
+    @include mdc-states-hover-opacity(mdc-states-opacity($mdc-text-field-ink-color, hover), $query: $query);
+    @include mdc-states-focus-opacity(mdc-states-opacity($mdc-text-field-ink-color, focus), $query: $query);
+
+    // Height
+    @include mdc-text-field-height($mdc-text-field-height, $query: $query);
+
+    // Shape
+    @include mdc-text-field-shape-radius(small, $query: $query);
+
+    // Colors
+    @include mdc-text-field-label-color($mdc-text-field-label, $query: $query);
+    @include mdc-text-field-ink-color($mdc-text-field-ink-color, $query: $query);
+    @include mdc-text-field-placeholder-color($mdc-text-field-placeholder-ink-color, $query: $query);
+    @include mdc-text-field-caret-color(primary, $query: $query);
+    @include mdc-text-field-bottom-line-color($mdc-text-field-bottom-line-idle, $query: $query);
+    @include mdc-text-field-hover-bottom-line-color($mdc-text-field-bottom-line-hover, $query: $query);
+    @include mdc-text-field-line-ripple-color_(primary, $query: $query);
+    @include mdc-text-field-helper-text-color($mdc-text-field-helper-text-color, $query: $query);
+    @include mdc-text-field-character-counter-color($mdc-text-field-helper-text-color, $query: $query);
+    @include mdc-text-field-leading-icon-color($mdc-text-field-icon-color, $query: $query);
+    @include mdc-text-field-trailing-icon-color($mdc-text-field-icon-color, $query: $query);
+    @include mdc-text-field-fill-color($mdc-text-field-background, $query: $query);
+
+    // Floating Label
+    @include mdc-text-field-floating-label_($query);
+
+    @include mdc-feature-targets($feat-structure) {
+      display: inline-flex;
+      position: relative;
+      box-sizing: border-box;
+      overflow: hidden;
+      /* @alternate */
+      will-change: opacity, transform, color;
+    }
+  }
+
+  .mdc-text-field__input {
+    @include mdc-text-field-input($query);
+  }
+
+  // stylelint-disable-next-line plugin/selector-bem-pattern
+  // Move label when text-field gets auto-filled in Chrome.
+  .mdc-text-field__input:-webkit-autofill + .mdc-floating-label {
+    @include mdc-feature-targets($feat-structure) {
+      transform: translateY(-50%) scale(.75);
+      cursor: auto;
+    }
+  }
+
+  @include mdc-text-field-outlined($query: $query);
+
+  .mdc-text-field--with-leading-icon {
+    @include mdc-text-field-with-leading-icon_($query);
+  }
+
+  .mdc-text-field--with-trailing-icon {
+    @include mdc-text-field-with-trailing-icon_($query);
+  }
+
+  .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {
+    @include mdc-text-field-with-both-icons_($query);
+  }
+
+  // stylelint-disable plugin/selector-bem-pattern
+  .mdc-text-field--dense .mdc-text-field__icon {
+    @include mdc-feature-targets($feat-structure) {
+      bottom: 16px;
+      transform: scale(.8);
+    }
+  }
+  // stylelint-enable plugin/selector-bem-pattern
+
+  .mdc-text-field--with-leading-icon.mdc-text-field--dense {
+    @include mdc-text-field-dense-with-leading-icon_($query);
+  }
+
+  .mdc-text-field--with-trailing-icon.mdc-text-field--dense {
+    @include mdc-text-field-dense-with-trailing-icon_($query);
+  }
+
+  .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--dense {
+    @include mdc-text-field-dense-with-both-icons_($query);
+  }
+
+  .mdc-text-field--dense {
+    @include mdc-text-field-dense_($query);
+  }
+
+  @include mdc-required-text-field-label-asterisk_ {
+    @include mdc-feature-targets($feat-structure) {
+      margin-left: 1px;
+      content: "*";
+    }
+  }
+
+  .mdc-text-field--textarea {
+    @include mdc-text-field-textarea_($query);
+  }
+
+  .mdc-text-field--fullwidth {
+    @include mdc-text-field-fullwidth_($query);
+  }
+
+  .mdc-text-field--fullwidth.mdc-text-field--invalid {
+    @include mdc-text-field-fullwidth-invalid_($query);
+  }
+
+  // postcss-bem-linter: define text-field-helper-text
+  // stylelint-disable plugin/selector-bem-pattern
+  .mdc-text-field-helper-line {
+    @include mdc-feature-targets($feat-structure) {
+      display: flex;
+      justify-content: space-between;
+      box-sizing: border-box;
+    }
+
+    .mdc-text-field--dense + & {
+      @include mdc-feature-targets($feat-structure) {
+        margin-bottom: 4px;
+      }
+    }
+
+    .mdc-text-field + & {
+      @include mdc-feature-targets($feat-structure) {
+        padding-right: $mdc-text-field-helper-line-padding;
+        padding-left: $mdc-text-field-helper-line-padding;
+      }
+    }
+  }
+  // stylelint-enable plugin/selector-bem-pattern
+  // postcss-bem-linter: end
+
+  // mdc-form-field tweaks to align text field label correctly
+  // stylelint-disable selector-max-type
+  .mdc-form-field > .mdc-text-field + label {
+    @include mdc-feature-targets($feat-structure) {
+      align-self: flex-start;
+    }
+  }
+  // stylelint-enable selector-max-type
+
+  .mdc-text-field--focused {
+    @include mdc-text-field-focused_($query);
+  }
+
+  .mdc-text-field--invalid {
+    @include mdc-text-field-invalid_($query);
+  }
+
+  .mdc-text-field--textarea.mdc-text-field--invalid {
+    @include mdc-text-field-textarea-invalid_($query);
+  }
+
+  .mdc-text-field--disabled {
+    @include mdc-text-field-disabled_($query);
+  }
+
+  .mdc-text-field--textarea.mdc-text-field--disabled {
+    @include mdc-text-field-textarea-disabled_($query);
+  }
+
+  .mdc-text-field--end-aligned {
+    @include mdc-text-field-end-aligned_($query);
+  }
+
+
+  @include mdc-floating-label-shake-keyframes(
+    text-field-dense,
+    $mdc-text-field-dense-label-position-y,
+    0%,
+    $mdc-text-field-dense-label-scale,
+    $query: $query
+  );
+  @include mdc-floating-label-shake-keyframes(
+    text-field-outlined,
+    $mdc-text-field-outlined-label-position-y,
+    $query: $query
+  );
+  @include mdc-floating-label-shake-keyframes(
+    text-field-outlined-dense,
+    $mdc-text-field-outlined-dense-label-position-y,
+    0%,
+    $mdc-text-field-dense-label-scale,
+    $query: $query
+  );
+  @include mdc-floating-label-shake-keyframes(
+    text-field-outlined-leading-icon,
+    $mdc-text-field-outlined-label-position-y,
+    $mdc-text-field-outlined-with-leading-icon-label-position-x,
+    $query: $query
+  );
+  @include mdc-floating-label-shake-keyframes(
+    text-field-outlined-leading-icon-dense,
+    $mdc-text-field-outlined-dense-label-position-y,
+    $mdc-text-field-outlined-dense-with-leading-icon-label-position-x,
+    $mdc-text-field-dense-label-scale,
+    $query: $query
+  );
+  @include mdc-floating-label-shake-keyframes(
+    text-field-outlined-leading-icon-rtl,
+    $mdc-text-field-outlined-label-position-y,
+    -$mdc-text-field-outlined-with-leading-icon-label-position-x,
+    $query: $query
+  );
+  @include mdc-floating-label-shake-keyframes(
+    text-field-outlined-leading-icon-dense-rtl,
+    $mdc-text-field-outlined-dense-label-position-y,
+    -$mdc-text-field-outlined-dense-with-leading-icon-label-position-x,
+    $mdc-text-field-dense-label-scale,
+    $query: $query
+  );
+  @include mdc-floating-label-shake-keyframes(
+    textarea,
+    $mdc-text-field-textarea-label-position-y,
+    0%,
+    $query: $query
+  );
+}
+
+// This API is intended for use by frameworks that may want to separate the ripple-related styles
+// from the other text field styles. It is recommended that most users use `mdc-text-field-core-styles` instead.
+@mixin mdc-text-field-ripple($query: mdc-feature-all()) {
+  @include mdc-ripple-common($query); // COPYBARA_COMMENT_THIS_LINE
+
+  .mdc-text-field {
+    @include mdc-ripple-surface($query: $query);
+    @include mdc-ripple-radius-bounded($query: $query);
+  }
+}
+
+@mixin mdc-text-field-input($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+  $feat-color: mdc-feature-create-target($query, color);
+  $feat-animation: mdc-feature-create-target($query, animation);
+
+  // Exclude setting line-height to keep caret (text cursor) same height as the input text in iOS browser.
+  @include mdc-typography(subtitle1, $exclude-props: (line-height), $query: $query);
+
+  @include mdc-feature-targets($feat-structure) {
+    align-self: flex-end;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    padding:
+      $mdc-text-field-input-padding-top
+      $mdc-text-field-input-padding
+      $mdc-text-field-input-padding-bottom;
+    border: none;
+    border-bottom: 1px solid;
+    border-radius: 0;
+    background: none;
+    appearance: none;
+  }
+
+  @include mdc-feature-targets($feat-animation) {
+    transition: mdc-text-field-transition(opacity);
+  }
+
+  &::placeholder {
+    @include mdc-feature-targets($feat-animation) {
+      transition: mdc-text-field-transition(opacity, $duration: 67ms);
+    }
+
+    @include mdc-feature-targets($feat-structure) {
+      opacity: 0;
+    }
+  }
+
+  // Always show placeholder for text fields that has no label and show only on focused state when label is present.
+  .mdc-text-field--fullwidth &::placeholder,
+  .mdc-text-field--no-label &::placeholder,
+  .mdc-text-field--focused &::placeholder {
+    @include mdc-feature-targets($feat-animation) {
+      transition-delay: 40ms;
+      transition-duration: 110ms;
+    }
+
+    @include mdc-feature-targets($feat-structure) {
+      opacity: 1;
+    }
+  }
+
+  &:focus {
+    @include mdc-feature-targets($feat-structure) {
+      outline: none;
+    }
+  }
+
+  // Remove red outline on firefox
+  &:invalid {
+    @include mdc-feature-targets($feat-structure) {
+      box-shadow: none;
+    }
+  }
+
+  // Keep Chrome autofill behind the notched outline
+  &:-webkit-autofill {
+    @include mdc-feature-targets($feat-structure) {
+      z-index: auto !important;
+    }
+  }
+
+  // Vertically center aligns the text input placeholder and value for only filled variant.
+  .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) & {
+    @include mdc-feature-targets($feat-structure) {
+      padding-top: 16px;
+      padding-bottom: 16px;
+    }
+  }
+}
+
+@mixin mdc-text-field-outlined($query: mdc-feature-all()) {
+  .mdc-text-field--outlined {
+    @include mdc-text-field-outlined_($query);
+  }
+
+  .mdc-text-field--outlined.mdc-text-field--focused {
+    @include mdc-text-field-outlined-focused_($query);
+  }
+
+  .mdc-text-field--outlined.mdc-text-field--disabled {
+    @include mdc-text-field-outlined-disabled_($query);
+  }
+
+  .mdc-text-field--outlined.mdc-text-field--dense {
+    @include mdc-text-field-outlined-dense_($query);
+  }
+
+  .mdc-text-field--with-leading-icon.mdc-text-field--outlined {
+    @include mdc-text-field-outlined-with-leading-icon_($query);
+  }
+
+  .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense {
+    @include mdc-text-field-outlined-dense-with-leading-icon_($query);
+  }
+
+  .mdc-text-field--outlined.mdc-text-field--invalid {
+    @include mdc-text-field-outlined-invalid_($query);
+  }
+}
+
 ///
 /// Sets density scale for default text field variant.
 ///
 /// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,
 ///     `-3`, `-2`, `-1`, `0`. Default is `0`.
 ///
-@mixin mdc-text-field-density($density-scale) {
+@mixin mdc-text-field-density($density-scale, $query: mdc-feature-all()) {
   $height: mdc-density-prop-value(
     $density-config: $mdc-text-field-density-config,
     $density-scale: $density-scale,
     $property-name: height,
   );
 
-  @include mdc-text-field-height($height);
+  @include mdc-text-field-height($height, $query: $query);
 }
 
 ///
@@ -57,14 +418,14 @@
 /// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,
 ///     `-3`, `-2`, `-1`, `0`. Default is `0`.
 ///
-@mixin mdc-text-field-outlined-density($density-scale) {
+@mixin mdc-text-field-outlined-density($density-scale, $query: mdc-feature-all()) {
   $height: mdc-density-prop-value(
     $density-config: $mdc-text-field-density-config,
     $density-scale: $density-scale,
     $property-name: height,
   );
 
-  @include mdc-text-field-outlined-height($height);
+  @include mdc-text-field-outlined-height($height, $query: $query);
 }
 
 ///
@@ -73,14 +434,14 @@
 /// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,
 ///     `-3`, `-2`, `-1`, `0`. Default is `0`.
 ///
-@mixin mdc-text-field-outlined-with-leading-icon-density($density-scale) {
+@mixin mdc-text-field-outlined-with-leading-icon-density($density-scale, $query: mdc-feature-all()) {
   $height: mdc-density-prop-value(
     $density-config: $mdc-text-field-density-config,
     $density-scale: $density-scale,
     $property-name: height,
   );
 
-  @include mdc-text-field-outlined-with-leading-icon-height($height);
+  @include mdc-text-field-outlined-with-leading-icon-height($height, $query: $query);
 }
 
 ///
@@ -89,20 +450,26 @@
 /// @param {Number} $height
 /// @access public
 ///
-@mixin mdc-text-field-height($height) {
-  height: $height;
+@mixin mdc-text-field-height($height, $query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-feature-targets($feat-structure) {
+    height: $height;
+  }
 
   // Target only dense text field.
   @if $height <= 40px {
     // Target only IE 11.
     @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
       .mdc-text-field__input {
-        // Set line-height to the height of input element excluding padding & border.
-        line-height:
-          $height
-          - $mdc-text-field-input-padding-top
-          - $mdc-text-field-input-padding-bottom
-          - $mdc-text-field-input-border-bottom;
+        @include mdc-feature-targets($feat-structure) {
+          // Set line-height to the height of input element excluding padding & border.
+          line-height:
+            $height
+            - $mdc-text-field-input-padding-top
+            - $mdc-text-field-input-padding-bottom
+            - $mdc-text-field-input-border-bottom;
+        }
       }
     }
   }
@@ -114,18 +481,18 @@
 /// @param {Number} $height
 /// @access public
 ///
-@mixin mdc-text-field-outlined-height($height) {
+@mixin mdc-text-field-outlined-height($height, $query: mdc-feature-all()) {
   $keyframe-suffix: text-field-outlined-#{$height};
   $positionY: mdc-text-field-get-outlined-label-position-y($height);
 
-  @include mdc-notched-outline-floating-label-float-position-absolute($positionY);
+  @include mdc-notched-outline-floating-label-float-position-absolute($positionY, $query: $query);
 
   @at-root {
-    @include mdc-floating-label-shake-keyframes($keyframe-suffix, $positionY);
+    @include mdc-floating-label-shake-keyframes($keyframe-suffix, $positionY, $query: $query);
   }
 
-  @include mdc-floating-label-shake-animation($keyframe-suffix);
-  @include mdc-text-field-height($height);
+  @include mdc-floating-label-shake-animation($keyframe-suffix, $query: $query);
+  @include mdc-text-field-height($height, $query: $query);
 }
 
 ///
@@ -134,24 +501,25 @@
 /// @param {Number} $height
 /// @access public
 ///
-@mixin mdc-text-field-outlined-with-leading-icon-height($height) {
+@mixin mdc-text-field-outlined-with-leading-icon-height($height, $query: mdc-feature-all()) {
   $keyframe-suffix: text-field-outlined-with-leading-icon-#{$height};
   $positionY: mdc-text-field-get-outlined-label-position-y($height);
 
   // For specificity
   &.mdc-text-field--outlined {
-    @include mdc-notched-outline-floating-label-float-position-absolute($positionY, 32px);
+    @include mdc-notched-outline-floating-label-float-position-absolute($positionY, 32px, $query: $query);
   }
 
   @at-root {
     @include mdc-floating-label-shake-keyframes(
       $keyframe-suffix,
       $positionY,
-      $mdc-text-field-outlined-with-leading-icon-label-position-x
+      $mdc-text-field-outlined-with-leading-icon-label-position-x,
+      $query: $query
     );
   }
 
-  @include mdc-floating-label-shake-animation($keyframe-suffix);
+  @include mdc-floating-label-shake-animation($keyframe-suffix, $query: $query);
 
   $keyframe-suffix-rtl: #{$keyframe-suffix}-rtl;
 
@@ -159,15 +527,16 @@
     @include mdc-floating-label-shake-keyframes(
       $keyframe-suffix-rtl,
       $positionY,
-      -$mdc-text-field-outlined-with-leading-icon-label-position-x
+      -$mdc-text-field-outlined-with-leading-icon-label-position-x,
+      $query: $query
     );
   }
 
   @include mdc-rtl {
-    @include mdc-floating-label-shake-animation($keyframe-suffix);
+    @include mdc-floating-label-shake-animation($keyframe-suffix, $query: $query);
   }
 
-  @include mdc-text-field-height($height);
+  @include mdc-text-field-height($height, $query: $query);
 }
 
 ///
@@ -178,7 +547,8 @@
 ///     percentage unit and if text field has custom height. Defaults to `$mdc-text-field-height`.
 /// @param {Boolean} $rtl-reflexive Set to true to flip shape radius in RTL context. Defaults to `false`.
 ///
-@mixin mdc-text-field-shape-radius($radius, $density-scale: $mdc-text-field-density-scale, $rtl-reflexive: false) {
+@mixin mdc-text-field-shape-radius(
+  $radius, $density-scale: $mdc-text-field-density-scale, $rtl-reflexive: false, $query: mdc-feature-all()) {
   @if length($radius) > 2 {
     @error "Invalid radius: '#{$radius}' component doesn't allow customizing all corners";
   }
@@ -193,21 +563,22 @@
 
   @include mdc-shape-radius(
     mdc-shape-resolve-percentage-radius($height, $masked-radius),
-    $rtl-reflexive
+    $rtl-reflexive,
+    $query: $query
   );
 }
 
-@mixin mdc-text-field-textarea-shape-radius($radius, $rtl-reflexive: false) {
-  @include mdc-notched-outline-shape-radius($radius, $rtl-reflexive);
+@mixin mdc-text-field-textarea-shape-radius($radius, $rtl-reflexive: false, $query: mdc-feature-all()) {
+  @include mdc-notched-outline-shape-radius($radius, $rtl-reflexive, $query: $query);
 }
 
 ///
 /// Customizes the color of the text entered into an enabled text field.
 /// @param {Color} $color - The desired input text color.
 ///
-@mixin mdc-text-field-ink-color($color) {
+@mixin mdc-text-field-ink-color($color, $query: mdc-feature-all()) {
   @include mdc-text-field-if-enabled_ {
-    @include mdc-text-field-ink-color_($color);
+    @include mdc-text-field-ink-color_($color, $query);
   }
 }
 
@@ -215,9 +586,9 @@
 /// Customizes the color of the entered text in a disabled text field.
 /// @param {Color} $color - The desired input text color.
 ///
-@mixin mdc-text-field-disabled-ink-color($color) {
+@mixin mdc-text-field-disabled-ink-color($color, $query: mdc-feature-all()) {
   @include mdc-text-field-if-disabled_ {
-    @include mdc-text-field-ink-color_($color);
+    @include mdc-text-field-ink-color_($color, $query);
   }
 }
 
@@ -225,9 +596,9 @@
 /// Customizes the color of the placeholder in an enabled text field.
 /// @param {Color} $color - The desired placeholder text color.
 ///
-@mixin mdc-text-field-placeholder-color($color) {
+@mixin mdc-text-field-placeholder-color($color, $query: mdc-feature-all()) {
   @include mdc-text-field-if-enabled_ {
-    @include mdc-text-field-placeholder-color_($color);
+    @include mdc-text-field-placeholder-color_($color, $query: $query);
   }
 }
 
@@ -235,9 +606,9 @@
 /// Customizes the color of the placeholder in a disabled text field.
 /// @param {Color} $color - The desired placeholder text color.
 ///
-@mixin mdc-text-field-disabled-placeholder-color($color) {
+@mixin mdc-text-field-disabled-placeholder-color($color, $query: mdc-feature-all()) {
   @include mdc-text-field-if-disabled_ {
-    @include mdc-text-field-placeholder-color_($color);
+    @include mdc-text-field-placeholder-color_($color, $query: $query);
   }
 }
 
@@ -245,9 +616,9 @@
 /// Customizes the background color of the text field or textarea when enabled.
 /// @param {Color} $color - The desired background color.
 ///
-@mixin mdc-text-field-fill-color($color) {
+@mixin mdc-text-field-fill-color($color, $query: mdc-feature-all()) {
   @include mdc-text-field-if-enabled_ {
-    @include mdc-text-field-fill-color_($color);
+    @include mdc-text-field-fill-color_($color, $query);
   }
 }
 
@@ -255,9 +626,9 @@
 /// Customizes the background color of the text field or textarea when disabled.
 /// @param {Color} $color - The desired background color.
 ///
-@mixin mdc-text-field-disabled-fill-color($color) {
+@mixin mdc-text-field-disabled-fill-color($color, $query: mdc-feature-all()) {
   @include mdc-text-field-if-disabled_ {
-    @include mdc-text-field-fill-color_($color);
+    @include mdc-text-field-fill-color_($color, $query);
   }
 }
 
@@ -265,9 +636,9 @@
 /// Customizes the text field bottom line color for the filled variant.
 /// @param {Color} $color - The desired bottom line color.
 ///
-@mixin mdc-text-field-bottom-line-color($color) {
+@mixin mdc-text-field-bottom-line-color($color, $query: mdc-feature-all()) {
   @include mdc-text-field-if-enabled_ {
-    @include mdc-text-field-bottom-line-color_($color);
+    @include mdc-text-field-bottom-line-color_($color, $query);
   }
 }
 
@@ -275,9 +646,9 @@
 /// Customizes the disabled text field bottom line color for the filled variant.
 /// @param {Color} $color - The desired bottom line color.
 ///
-@mixin mdc-text-field-disabled-bottom-line-color($color) {
+@mixin mdc-text-field-disabled-bottom-line-color($color, $query: mdc-feature-all()) {
   @include mdc-text-field-if-disabled_ {
-    @include mdc-text-field-bottom-line-color_($color);
+    @include mdc-text-field-bottom-line-color_($color, $query);
   }
 }
 
@@ -285,9 +656,9 @@
 /// Customizes the hover text field bottom line color for the filled variant.
 /// @param {Color} $color - The desired bottom line color.
 ///
-@mixin mdc-text-field-hover-bottom-line-color($color) {
+@mixin mdc-text-field-hover-bottom-line-color($color, $query: mdc-feature-all()) {
   @include mdc-text-field-if-enabled_ {
-    @include mdc-text-field-hover-bottom-line-color_($color);
+    @include mdc-text-field-hover-bottom-line-color_($color, $query);
   }
 }
 
@@ -295,9 +666,9 @@
 /// Customizes the color of the default line ripple of the text field.
 /// @param {Color} $color - The desired line ripple color.
 ///
-@mixin mdc-text-field-line-ripple-color($color) {
+@mixin mdc-text-field-line-ripple-color($color, $query: mdc-feature-all()) {
   @include mdc-text-field-if-enabled_ {
-    @include mdc-text-field-line-ripple-color_($color);
+    @include mdc-text-field-line-ripple-color_($color, $query);
   }
 }
 
@@ -305,9 +676,9 @@
 /// Customizes the text color of the label in an enabled text field.
 /// @param {Color} $color - The desired label text color.
 ///
-@mixin mdc-text-field-label-color($color) {
+@mixin mdc-text-field-label-color($color, $query: mdc-feature-all()) {
   @include mdc-text-field-if-enabled_ {
-    @include mdc-text-field-label-ink-color_($color);
+    @include mdc-text-field-label-ink-color_($color, $query);
   }
 }
 
@@ -315,9 +686,9 @@
 /// Customizes the text color of the label in a disabled text field.
 /// @param {Color} $color - The desired label text color.
 ///
-@mixin mdc-text-field-disabled-label-color($color) {
+@mixin mdc-text-field-disabled-label-color($color, $query: mdc-feature-all()) {
   @include mdc-text-field-if-disabled_ {
-    @include mdc-text-field-label-ink-color_($color);
+    @include mdc-text-field-label-ink-color_($color, $query);
   }
 }
 
@@ -325,9 +696,9 @@
 /// Customizes the border color of the outlined text field or textarea.
 /// @param {Color} $color - The desired outline border color.
 ///
-@mixin mdc-text-field-outline-color($color) {
+@mixin mdc-text-field-outline-color($color, $query: mdc-feature-all()) {
   @include mdc-text-field-if-enabled_ {
-    @include mdc-notched-outline-color($color);
+    @include mdc-notched-outline-color($color, $query);
   }
 }
 
@@ -335,9 +706,9 @@
 /// Customizes the outline border color when the text field or textarea is hovered.
 /// @param {Color} $color - The desired outline border color.
 ///
-@mixin mdc-text-field-hover-outline-color($color) {
+@mixin mdc-text-field-hover-outline-color($color, $query: mdc-feature-all()) {
   @include mdc-text-field-if-enabled_ {
-    @include mdc-text-field-hover-outline-color_($color);
+    @include mdc-text-field-hover-outline-color_($color, $query);
   }
 }
 
@@ -345,9 +716,9 @@
 /// Customizes the outline border color when the text field or textarea is focused.
 /// @param {Color} $color - The desired outline border color.
 ///
-@mixin mdc-text-field-focused-outline-color($color) {
+@mixin mdc-text-field-focused-outline-color($color, $query: mdc-feature-all()) {
   @include mdc-text-field-if-enabled_ {
-    @include mdc-text-field-focused-outline-color_($color);
+    @include mdc-text-field-focused-outline-color_($color, $query);
   }
 }
 
@@ -355,9 +726,9 @@
 /// Customizes the outline border color when the text field or textarea is disabled.
 /// @param {Color} $color - The desired outline border color.
 ///
-@mixin mdc-text-field-disabled-outline-color($color) {
+@mixin mdc-text-field-disabled-outline-color($color, $query: mdc-feature-all()) {
   @include mdc-text-field-if-disabled_ {
-    @include mdc-notched-outline-color($color);
+    @include mdc-notched-outline-color($color, $query);
   }
 }
 
@@ -365,9 +736,13 @@
 /// Customizes the caret color of the text field or textarea.
 /// @param {Color} $color - The desired caret color.
 ///
-@mixin mdc-text-field-caret-color($color) {
+@mixin mdc-text-field-caret-color($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
   .mdc-text-field__input {
-    @include mdc-theme-prop(caret-color, $color);
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(caret-color, $color);
+    }
   }
 }
 
@@ -375,69 +750,93 @@
 
 // Baseline
 
-@mixin mdc-text-field-disabled_ {
-  @include mdc-text-field-bottom-line-color_($mdc-text-field-disabled-border);
-  @include mdc-text-field-ink-color_($mdc-text-field-disabled-ink-color);
-  @include mdc-text-field-placeholder-color_($mdc-text-field-disabled-placeholder-ink-color);
-  @include mdc-text-field-label-ink-color_($mdc-text-field-disabled-label-color);
-  @include mdc-text-field-helper-text-color_($mdc-text-field-disabled-helper-text-color);
-  @include mdc-text-field-character-counter-color_($mdc-text-field-disabled-helper-text-color);
-  @include mdc-text-field-leading-icon-color_($mdc-text-field-disabled-icon);
-  @include mdc-text-field-trailing-icon-color_($mdc-text-field-disabled-icon);
-  @include mdc-text-field-fill-color_($mdc-text-field-disabled-background);
+@mixin mdc-text-field-disabled_($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
 
-  border-bottom: none;
-  pointer-events: none;
+  @include mdc-text-field-bottom-line-color_($mdc-text-field-disabled-border, $query: $query);
+  @include mdc-text-field-ink-color_($mdc-text-field-disabled-ink-color, $query: $query);
+  @include mdc-text-field-placeholder-color_($mdc-text-field-disabled-placeholder-ink-color, $query: $query);
+  @include mdc-text-field-label-ink-color_($mdc-text-field-disabled-label-color, $query: $query);
+  @include mdc-text-field-helper-text-color_($mdc-text-field-disabled-helper-text-color, $query: $query);
+  @include mdc-text-field-character-counter-color_($mdc-text-field-disabled-helper-text-color, $query: $query);
+  @include mdc-text-field-leading-icon-color_($mdc-text-field-disabled-icon, $query: $query);
+  @include mdc-text-field-trailing-icon-color_($mdc-text-field-disabled-icon, $query: $query);
+  @include mdc-text-field-fill-color_($mdc-text-field-disabled-background, $query: $query);
+
+  @include mdc-feature-targets($feat-structure) {
+    border-bottom: none;
+    pointer-events: none;
+  }
 
   .mdc-floating-label {
-    cursor: default;
+    @include mdc-feature-targets($feat-structure) {
+      cursor: default;
+    }
   }
 }
 
-@mixin mdc-text-field-invalid_ {
-  @include mdc-text-field-bottom-line-color($mdc-text-field-error);
-  @include mdc-text-field-hover-bottom-line-color($mdc-text-field-error);
-  @include mdc-text-field-line-ripple-color($mdc-text-field-error);
-  @include mdc-text-field-label-color($mdc-text-field-error);
-  @include mdc-text-field-helper-text-validation-color($mdc-text-field-error);
-  @include mdc-text-field-caret-color($mdc-text-field-error);
-  @include mdc-text-field-trailing-icon-color($mdc-text-field-error);
+@mixin mdc-text-field-invalid_($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-text-field-bottom-line-color($mdc-text-field-error, $query: $query);
+  @include mdc-text-field-hover-bottom-line-color($mdc-text-field-error, $query: $query);
+  @include mdc-text-field-line-ripple-color($mdc-text-field-error, $query: $query);
+  @include mdc-text-field-label-color($mdc-text-field-error, $query: $query);
+  @include mdc-text-field-helper-text-validation-color($mdc-text-field-error, $query: $query);
+  @include mdc-text-field-caret-color($mdc-text-field-error, $query: $query);
+  @include mdc-text-field-trailing-icon-color($mdc-text-field-error, $query: $query);
 
   + .mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg {
-    opacity: 1;
+    @include mdc-feature-targets($feat-structure) {
+      opacity: 1;
+    }
   }
 }
 
-@mixin mdc-text-field-focused_ {
-  @include mdc-text-field-label-color($mdc-text-field-focused-label-color);
+@mixin mdc-text-field-focused_($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-text-field-label-color($mdc-text-field-focused-label-color, $query: $query);
 
   + .mdc-text-field-helper-line .mdc-text-field-helper-text:not(.mdc-text-field-helper-text--validation-msg) {
-    opacity: 1;
+    @include mdc-feature-targets($feat-structure) {
+      opacity: 1;
+    }
   }
 }
 
-@mixin mdc-text-field-dense_ {
+@mixin mdc-text-field-dense_($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+  $feat-typography: mdc-feature-create-target($query, typography);
+
   @include mdc-floating-label-float-position(
     $mdc-text-field-dense-label-position-y,
     0%,
-    $mdc-text-field-dense-label-scale
+    $mdc-text-field-dense-label-scale,
+    $query: $query
   );
-  @include mdc-floating-label-shake-animation(text-field-dense);
+  @include mdc-floating-label-shake-animation(text-field-dense, $query: $query);
 
   .mdc-text-field__input {
-    padding: 12px 12px 0;
+    @include mdc-feature-targets($feat-structure) {
+      padding: 12px 12px 0;
+    }
   }
 
   .mdc-floating-label {
-    font-size: .813rem;
+    @include mdc-feature-targets($feat-typography) {
+      font-size: .813rem;
+    }
 
     &--float-above {
-      font-size: .813rem;
+      @include mdc-feature-targets($feat-typography) {
+        font-size: .813rem;
+      }
     }
   }
 }
 
-@mixin mdc-required-text-field-label-asterisk_() {
+@mixin mdc-required-text-field-label-asterisk_ {
   .mdc-text-field__input:required ~ {
     .mdc-floating-label::after,
     .mdc-notched-outline .mdc-floating-label::after {
@@ -457,13 +856,15 @@
 @mixin mdc-text-field-outline-shape-radius(
   $radius,
   $density-scale: $mdc-text-field-density-scale,
-  $rtl-reflexive: false) {
+  $rtl-reflexive: false,
+  $query: mdc-feature-all()) {
   $height: mdc-density-prop-value(
     $density-config: $mdc-text-field-density-config,
     $density-scale: $density-scale,
     $property-name: height,
   );
 
+  $feat-structure: mdc-feature-create-target($query, structure);
   $resolved-radius: nth(mdc-shape-resolve-percentage-radius($height, mdc-shape-prop-value($radius)), 1);
 
   @if (length(mdc-shape-prop-value($radius)) > 1) {
@@ -473,53 +874,72 @@
   }
 
   .mdc-notched-outline {
-    @include mdc-notched-outline-shape-radius($resolved-radius, $rtl-reflexive);
+    @include mdc-notched-outline-shape-radius($resolved-radius, $rtl-reflexive, $query: $query);
   }
 
   @if ($resolved-radius > $mdc-notched-outline-leading-width) {
     .mdc-text-field__input {
-      @include mdc-rtl-reflexive-property(padding, $resolved-radius + $mdc-notched-outline-padding, 0);
+      @include mdc-feature-targets($feat-structure) {
+        @include mdc-rtl-reflexive-property(padding, $resolved-radius + $mdc-notched-outline-padding, 0);
+      }
     }
 
     + .mdc-text-field-helper-line {
-      @include mdc-rtl-reflexive-property(padding, $resolved-radius + $mdc-notched-outline-padding, $resolved-radius);
+      @include mdc-feature-targets($feat-structure) {
+        @include mdc-rtl-reflexive-property(padding, $resolved-radius + $mdc-notched-outline-padding, $resolved-radius);
+      }
     }
   }
 }
 
-@mixin mdc-text-field-floating-label_ {
+@mixin mdc-text-field-floating-label_($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
   .mdc-floating-label {
-    @include mdc-rtl-reflexive-position(left, $mdc-text-field-label-offset);
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-rtl-reflexive-position(left, $mdc-text-field-label-offset);
 
-    top: 50%;
-    transform: translateY(-50%);
-    pointer-events: none;
+      top: 50%;
+      transform: translateY(-50%);
+      pointer-events: none;
+    }
   }
 
   // Include these mixins to override above `transform` property.
   //TODO: Remove these from here when floating label is center aligned in all position - this lowers specificity.
-  @include mdc-floating-label-float-position($mdc-text-field-label-position-y);
+  @include mdc-floating-label-float-position($mdc-text-field-label-position-y, $query: $query);
 
   &--textarea {
     .mdc-floating-label {
-      @include mdc-rtl-reflexive-position(left, $mdc-notched-outline-padding);
+      @include mdc-feature-targets($feat-structure) {
+        @include mdc-rtl-reflexive-position(left, $mdc-notched-outline-padding);
+      }
     }
   }
 
   &--outlined {
     .mdc-floating-label {
-      @include mdc-rtl-reflexive-position(left, $mdc-notched-outline-padding);
+      @include mdc-feature-targets($feat-structure) {
+        @include mdc-rtl-reflexive-position(left, $mdc-notched-outline-padding);
+      }
     }
 
     &--with-leading-icon {
       .mdc-floating-label {
-        @include mdc-rtl-reflexive-position(left, ($mdc-text-field-icon-padding - $mdc-notched-outline-leading-width));
+        @include mdc-feature-targets($feat-structure) {
+          @include mdc-rtl-reflexive-position(
+            left, ($mdc-text-field-icon-padding - $mdc-notched-outline-leading-width));
+        }
 
         &--float-above {
-          @include mdc-rtl-reflexive-position(
-            left,
-            ($mdc-text-field-icon-padding - $mdc-notched-outline-leading-width) + $mdc-notched-outline-padding
-          );
+          // stylelint-disable max-nesting-depth
+          @include mdc-feature-targets($feat-structure) {
+            @include mdc-rtl-reflexive-position(
+              left,
+              ($mdc-text-field-icon-padding - $mdc-notched-outline-leading-width) + $mdc-notched-outline-padding
+            );
+          }
+          // stylelint-enable max-nesting-depth
         }
       }
     }
@@ -528,350 +948,469 @@
 
 // Outlined
 
-@mixin mdc-text-field-outlined-disabled_ {
-  @include mdc-notched-outline-color($mdc-text-field-outlined-disabled-border);
-  @include mdc-text-field-fill-color_(transparent);
+@mixin mdc-text-field-outlined-disabled_($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-notched-outline-color($mdc-text-field-outlined-disabled-border, $query: $query);
+  @include mdc-text-field-fill-color_(transparent, $query);
 
   .mdc-text-field__input {
-    border-bottom: none;
+    @include mdc-feature-targets($feat-structure) {
+      border-bottom: none;
+    }
   }
 }
 
-@mixin mdc-text-field-outlined-invalid_ {
-  @include mdc-text-field-outline-color($mdc-text-field-error);
-  @include mdc-text-field-hover-outline-color($mdc-text-field-error);
-  @include mdc-text-field-focused-outline-color($mdc-text-field-error);
+@mixin mdc-text-field-outlined-invalid_($query: mdc-feature-all()) {
+  @include mdc-text-field-outline-color($mdc-text-field-error, $query: $query);
+  @include mdc-text-field-hover-outline-color($mdc-text-field-error, $query: $query);
+  @include mdc-text-field-focused-outline-color($mdc-text-field-error, $query: $query);
 }
 
-@mixin mdc-text-field-outlined-focused_ {
-  @include mdc-notched-outline-stroke-width($mdc-text-field-outlined-stroke-width);
+@mixin mdc-text-field-outlined-focused_($query: mdc-feature-all()) {
+  @include mdc-notched-outline-stroke-width($mdc-text-field-outlined-stroke-width, $query: $query);
 }
 
-@mixin mdc-text-field-outlined-dense_ {
+@mixin mdc-text-field-outlined-dense_($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
   @include mdc-notched-outline-floating-label-float-position(
     $mdc-text-field-outlined-dense-label-position-y,
     0%,
-    $mdc-text-field-dense-label-scale
+    $mdc-text-field-dense-label-scale,
+    $query: $query
   );
-  @include mdc-floating-label-shake-animation(text-field-outlined-dense);
+  @include mdc-floating-label-shake-animation(text-field-outlined-dense, $query: $query);
 
-  height: 48px;
+  @include mdc-feature-targets($feat-structure) {
+    height: 48px;
+  }
 
   .mdc-text-field__input {
-    padding: 12px 12px 7px;
+    @include mdc-feature-targets($feat-structure) {
+      padding: 12px 12px 7px;
+    }
   }
 
   .mdc-floating-label {
-    top: 14px;
+    @include mdc-feature-targets($feat-structure) {
+      top: 14px;
+    }
   }
 
   .mdc-text-field__icon {
-    top: 12px;
+    @include mdc-feature-targets($feat-structure) {
+      top: 12px;
+    }
   }
 }
 
-@mixin mdc-text-field-outlined_ {
-  @include mdc-text-field-outline-color($mdc-text-field-outlined-idle-border);
-  @include mdc-text-field-hover-outline-color($mdc-text-field-outlined-hover-border);
-  @include mdc-text-field-focused-outline-color(primary);
-  @include mdc-floating-label-shake-animation(text-field-outlined);
-  @include mdc-text-field-outline-shape-radius(small);
-  @include mdc-notched-outline-floating-label-float-position-absolute($mdc-text-field-outlined-label-position-y);
-  @include mdc-notched-outline-notch-offset($mdc-notched-outline-border-width);
-  @include mdc-states-base-color(transparent);
-  @include mdc-text-field-fill-color(transparent);
-
-  border: none;
-  overflow: visible;
+@mixin mdc-text-field-outlined_($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-text-field-outline-color($mdc-text-field-outlined-idle-border, $query: $query);
+  @include mdc-text-field-hover-outline-color($mdc-text-field-outlined-hover-border, $query: $query);
+  @include mdc-text-field-focused-outline-color(primary, $query: $query);
+  @include mdc-floating-label-shake-animation(text-field-outlined, $query: $query);
+  @include mdc-text-field-outline-shape-radius(small, $query: $query);
+  @include mdc-notched-outline-floating-label-float-position-absolute(
+    $mdc-text-field-outlined-label-position-y, $query: $query);
+  @include mdc-notched-outline-notch-offset($mdc-notched-outline-border-width, $query: $query);
+  @include mdc-states-base-color(transparent, $query: $query);
+  @include mdc-text-field-fill-color(transparent, $query: $query);
+
+  @include mdc-feature-targets($feat-structure) {
+    border: none;
+    overflow: visible;
+  }
 
   .mdc-text-field__input {
-    display: flex;
-    padding: 12px 16px 14px;
-    border: none !important; // FF adds unwanted border in HC mode on windows.
-    background-color: transparent;
-    z-index: 1;
+    @include mdc-feature-targets($feat-structure) {
+      display: flex;
+      padding: 12px 16px 14px;
+      border: none !important; // FF adds unwanted border in HC mode on windows.
+      background-color: transparent;
+      z-index: 1;
+    }
   }
 
   .mdc-text-field__icon {
-    z-index: 2;
+    @include mdc-feature-targets($feat-structure) {
+      z-index: 2;
+    }
   }
 
   &.mdc-text-field--focused {
-    @include mdc-notched-outline-notch-offset($mdc-text-field-outlined-stroke-width);
+    @include mdc-notched-outline-notch-offset($mdc-text-field-outlined-stroke-width, $query: $query);
   }
 }
 
-@mixin mdc-text-field-hover-outline-color_($color) {
+@mixin mdc-text-field-hover-outline-color_($color, $query: mdc-feature-all()) {
   &:not(.mdc-text-field--focused) {
     // stylelint-disable-next-line selector-combinator-space-after
     .mdc-text-field__input:hover ~,
     .mdc-text-field__icon:hover ~ {
       .mdc-notched-outline {
-        @include mdc-notched-outline-color($color);
+        @include mdc-notched-outline-color($color, $query: $query);
       }
     }
   }
 }
 
-@mixin mdc-text-field-focused-outline-color_($color) {
+@mixin mdc-text-field-focused-outline-color_($color, $query: mdc-feature-all()) {
   &.mdc-text-field--focused {
-    @include mdc-notched-outline-color($color);
+    @include mdc-notched-outline-color($color, $query: $query);
   }
 }
 
 // Icons
 
-@mixin mdc-text-field-with-leading-icon_ {
-  @include mdc-text-field-leading-icon-horizontal-position_($mdc-text-field-icon-position);
+@mixin mdc-text-field-with-leading-icon_($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-text-field-leading-icon-horizontal-position_($mdc-text-field-icon-position, $query: $query);
 
   .mdc-text-field__input {
-    @include mdc-rtl-reflexive-property(padding, $mdc-text-field-icon-padding, $mdc-text-field-input-padding);
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-rtl-reflexive-property(padding, $mdc-text-field-icon-padding, $mdc-text-field-input-padding);
+    }
   }
 
   .mdc-floating-label {
-    @include mdc-rtl-reflexive-position(left, $mdc-text-field-icon-padding);
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-rtl-reflexive-position(left, $mdc-text-field-icon-padding);
+    }
   }
 }
 
-@mixin mdc-text-field-dense-with-leading-icon_ {
-  @include mdc-text-field-leading-icon-horizontal-position_($mdc-text-field-dense-icon-position);
+@mixin mdc-text-field-dense-with-leading-icon_($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-text-field-leading-icon-horizontal-position_($mdc-text-field-dense-icon-position, $query: $query);
 
   .mdc-text-field__input {
-    @include mdc-rtl-reflexive-property(padding, $mdc-text-field-dense-icon-padding, $mdc-text-field-input-padding);
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-rtl-reflexive-property(padding, $mdc-text-field-dense-icon-padding, $mdc-text-field-input-padding);
+    }
   }
 
   .mdc-floating-label {
-    @include mdc-rtl-reflexive-position(left, $mdc-text-field-dense-icon-padding);
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-rtl-reflexive-position(left, $mdc-text-field-dense-icon-padding);
+    }
   }
 }
 
-@mixin mdc-text-field-outlined-with-leading-icon_ {
-  @include mdc-text-field-leading-icon-horizontal-position_($mdc-text-field-icon-position);
-  @include mdc-notched-outline-floating-label-float-position-absolute($mdc-text-field-outlined-label-position-y, 32px);
-  @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon);
+@mixin mdc-text-field-outlined-with-leading-icon_($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-text-field-leading-icon-horizontal-position_($mdc-text-field-icon-position, $query: $query);
+  @include mdc-notched-outline-floating-label-float-position-absolute($mdc-text-field-outlined-label-position-y, 32px, $query: $query);
+  @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon, $query: $query);
 
   @include mdc-rtl {
-    @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon-rtl);
+    @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon-rtl, $query: $query);
   }
 
   .mdc-floating-label {
-    @include mdc-rtl-reflexive-position(left, $mdc-text-field-icon-padding - $mdc-notched-outline-leading-width);
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-rtl-reflexive-position(left, $mdc-text-field-icon-padding - $mdc-notched-outline-leading-width);
+    }
   }
 }
 
-@mixin mdc-text-field-outlined-dense-with-leading-icon_ {
+@mixin mdc-text-field-outlined-dense-with-leading-icon_($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
   @include mdc-notched-outline-floating-label-float-position(
     $mdc-text-field-outlined-dense-label-position-y,
     $mdc-text-field-outlined-dense-with-leading-icon-label-position-x,
-    $mdc-text-field-dense-label-scale
+    $mdc-text-field-dense-label-scale,
+    $query: $query
   );
-  @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon-dense);
+  @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon-dense, $query: $query);
 
   @include mdc-rtl {
-    @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon-dense-rtl);
+    @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon-dense-rtl, $query: $query);
   }
 
   .mdc-floating-label {
-    @include mdc-rtl-reflexive-position(left, $mdc-text-field-dense-icon-padding - $mdc-notched-outline-leading-width);
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-rtl-reflexive-position(
+        left, $mdc-text-field-dense-icon-padding - $mdc-notched-outline-leading-width);
+    }
   }
 }
 
-@mixin mdc-text-field-with-trailing-icon_ {
-  @include mdc-text-field-trailing-icon-horizontal-position_($mdc-text-field-trailing-icon-position);
+@mixin mdc-text-field-with-trailing-icon_($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-text-field-trailing-icon-horizontal-position_($mdc-text-field-trailing-icon-position, $query: $query);
 
   .mdc-text-field__input {
-    @include mdc-rtl-reflexive-property(padding, $mdc-text-field-input-padding, $mdc-text-field-icon-padding);
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-rtl-reflexive-property(padding, $mdc-text-field-input-padding, $mdc-text-field-icon-padding);
+    }
   }
 
   // Outlined uses 16px for text alignment when using a trailing icon.
   &.mdc-text-field--outlined {
-    @include mdc-text-field-trailing-icon-horizontal-position_($mdc-text-field-icon-position);
+    @include mdc-text-field-trailing-icon-horizontal-position_($mdc-text-field-icon-position, $query: $query);
   }
 }
 
-@mixin mdc-text-field-dense-with-trailing-icon_ {
-  @include mdc-text-field-trailing-icon-horizontal-position_($mdc-text-field-dense-icon-position);
+@mixin mdc-text-field-dense-with-trailing-icon_($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-text-field-trailing-icon-horizontal-position_($mdc-text-field-dense-icon-position, $query: $query);
 
   .mdc-text-field__input {
-    @include mdc-rtl-reflexive-property(padding, $mdc-text-field-input-padding, $mdc-text-field-dense-icon-padding);
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-rtl-reflexive-property(padding, $mdc-text-field-input-padding, $mdc-text-field-dense-icon-padding);
+    }
   }
 }
 
-@mixin mdc-text-field-with-both-icons_ {
+@mixin mdc-text-field-with-both-icons_($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
   @include mdc-text-field-icon-horizontal-position-two-icons_(
     $mdc-text-field-icon-position,
-    $mdc-text-field-trailing-icon-position
+    $mdc-text-field-trailing-icon-position,
+    $query: $query
   );
 
   .mdc-text-field__input {
-    padding-right: $mdc-text-field-icon-padding;
-    padding-left: $mdc-text-field-icon-padding;
+    @include mdc-feature-targets($feat-structure) {
+      padding-right: $mdc-text-field-icon-padding;
+      padding-left: $mdc-text-field-icon-padding;
+    }
   }
 }
 
-@mixin mdc-text-field-dense-with-both-icons_ {
+@mixin mdc-text-field-dense-with-both-icons_($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
   @include mdc-text-field-icon-horizontal-position-two-icons_(
     $mdc-text-field-dense-icon-position,
-    $mdc-text-field-dense-icon-position
+    $mdc-text-field-dense-icon-position,
+    $query: $query
   );
 
   .mdc-text-field__input {
-    padding-right: $mdc-text-field-dense-icon-padding;
-    padding-left: $mdc-text-field-dense-icon-padding;
+    @include mdc-feature-targets($feat-structure) {
+      padding-right: $mdc-text-field-dense-icon-padding;
+      padding-left: $mdc-text-field-dense-icon-padding;
+    }
   }
 }
 
 // Full Width
-@mixin mdc-text-field-fullwidth_ {
-  @include mdc-text-field-bottom-line-color($mdc-text-field-bottom-line-idle);
-  @include mdc-text-field-disabled-bottom-line-color($mdc-text-field-bottom-line-idle);
+@mixin mdc-text-field-fullwidth_($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
 
-  width: 100%;
+  @include mdc-text-field-bottom-line-color($mdc-text-field-bottom-line-idle, $query: $query);
+  @include mdc-text-field-disabled-bottom-line-color($mdc-text-field-bottom-line-idle, $query: $query);
+
+  @include mdc-feature-targets($feat-structure) {
+    width: 100%;
+  }
 
   &:not(.mdc-text-field--textarea) {
-    @include mdc-states-base-color(transparent);
-    @include mdc-text-field-fill-color(transparent);
+    @include mdc-states-base-color(transparent, $query: $query);
+    @include mdc-text-field-fill-color(transparent, $query: $query);
 
-    display: block;
+    @include mdc-feature-targets($feat-structure) {
+      display: block;
+    }
 
     .mdc-text-field__input {
-      padding: 0;
+      @include mdc-feature-targets($feat-structure) {
+        padding: 0;
+      }
     }
   }
 
   &.mdc-text-field--textarea .mdc-text-field__input {
-    resize: vertical;
+    @include mdc-feature-targets($feat-structure) {
+      resize: vertical;
+    }
   }
 }
 
-@mixin mdc-text-field-fullwidth-invalid_ {
-  @include mdc-text-field-bottom-line-color($mdc-text-field-error);
+@mixin mdc-text-field-fullwidth-invalid_($query: mdc-feature-all()) {
+  @include mdc-text-field-bottom-line-color($mdc-text-field-error, $query: $query);
 }
 
 // Textarea
-@mixin mdc-text-field-textarea-disabled_ {
-  @include mdc-text-field-outlined-disabled_;
+@mixin mdc-text-field-textarea-disabled_($query: mdc-feature-all()) {
+  @include mdc-text-field-outlined-disabled_($query);
   /* @alternate */
-  @include mdc-text-field-fill-color_($mdc-textarea-disabled-background);
+  @include mdc-text-field-fill-color_($mdc-textarea-disabled-background, $query: $query);
 }
 
-@mixin mdc-text-field-textarea-invalid_ {
-  @include mdc-text-field-outline-color($mdc-text-field-error);
-  @include mdc-text-field-hover-outline-color($mdc-text-field-error);
-  @include mdc-text-field-focused-outline-color($mdc-text-field-error);
+@mixin mdc-text-field-textarea-invalid_($query: mdc-feature-all()) {
+  @include mdc-text-field-outline-color($mdc-text-field-error, $query: $query);
+  @include mdc-text-field-hover-outline-color($mdc-text-field-error, $query: $query);
+  @include mdc-text-field-focused-outline-color($mdc-text-field-error, $query: $query);
 }
 
-@mixin mdc-text-field-textarea_ {
+@mixin mdc-text-field-textarea_($query: mdc-feature-all()) {
   // Note: The refactor to add the filled textarea style will result in a lot of the specificity issues that the
   // textarea has being resolved by using the same --outlined variant class as the text field.
-  @include mdc-text-field-outline-color($mdc-text-field-outlined-idle-border);
-  @include mdc-text-field-hover-outline-color($mdc-text-field-outlined-hover-border);
-  @include mdc-text-field-focused-outline-color(primary);
-  @include mdc-floating-label-shake-animation(textarea);
-  @include mdc-text-field-outline-shape-radius(small);
-  @include mdc-states-base-color(transparent);
-  @include mdc-text-field-fill-color(transparent);
-  @include mdc-notched-outline-floating-label-float-position($mdc-text-field-textarea-label-position-y);
-  @include mdc-text-field-character-counter-position(16px, 13px);
+  @include mdc-text-field-outline-color($mdc-text-field-outlined-idle-border, $query: $query);
+  @include mdc-text-field-hover-outline-color($mdc-text-field-outlined-hover-border, $query: $query);
+  @include mdc-text-field-focused-outline-color(primary, $query: $query);
+  @include mdc-floating-label-shake-animation(textarea, $query: $query);
+  @include mdc-text-field-outline-shape-radius(small, $query: $query);
+  @include mdc-states-base-color(transparent, $query: $query);
+  @include mdc-text-field-fill-color(transparent, $query: $query);
+  @include mdc-notched-outline-floating-label-float-position($mdc-text-field-textarea-label-position-y, $query: $query);
+  @include mdc-text-field-character-counter-position(16px, 13px, $query: $query);
 
   $padding-inset: 16px;
+  $feat-structure: mdc-feature-create-target($query, structure);
+  $feat-animation: mdc-feature-create-target($query, animation);
+  $feat-typography: mdc-feature-create-target($query, typography);
+
+  @include mdc-feature-targets($feat-structure) {
+    display: inline-flex;
+    width: auto;
+    height: auto;
+    overflow: visible;
+  }
 
-  display: inline-flex;
-  width: auto;
-  height: auto;
-  transition: none;
-  overflow: visible;
+  @include mdc-feature-targets($feat-structure) {
+    transition: none;
+  }
 
   .mdc-text-field__input {
-    align-self: auto;
-    box-sizing: border-box;
-    height: auto;
-    margin: $padding-inset / 2 1px 1px 0;
-    padding: 0 $padding-inset $padding-inset;
-    border: none;
-    line-height: 1.75rem; // 28sp
+    @include mdc-feature-targets($feat-structure) {
+      align-self: auto;
+      box-sizing: border-box;
+      height: auto;
+      margin: $padding-inset / 2 1px 1px 0;
+      padding: 0 $padding-inset $padding-inset;
+      border: none;
+    }
+
+    @include mdc-feature-targets($feat-typography) {
+      line-height: 1.75rem; // 28sp
+    }
   }
 
   .mdc-text-field-character-counter + .mdc-text-field__input {
-    margin-bottom: 28px; // Leaves space for character counter if it exists.
-    padding-bottom: 0;
+    @include mdc-feature-targets($feat-structure) {
+      margin-bottom: 28px; // Leaves space for character counter if it exists.
+      padding-bottom: 0;
+    }
   }
 
   .mdc-floating-label {
-    top: 17px;
-    width: auto;
-    pointer-events: none;
+    @include mdc-feature-targets($feat-structure) {
+      top: 17px;
+      width: auto;
+      pointer-events: none;
+    }
 
     // Resets center aligning the floating label.
     &:not(.mdc-floating-label--float-above) {
-      transform: none;
+      @include mdc-feature-targets($feat-structure) {
+        transform: none;
+      }
     }
   }
 
   &.mdc-text-field--focused {
-    @include mdc-text-field-outlined-focused_;
+    @include mdc-text-field-outlined-focused_($query);
   }
 }
 
 // End aligned
-@mixin mdc-text-field-end-aligned_ {
-  .mdc-text-field__input {
-    // IE11 does not support text-align: end
-    /* @noflip */
-    text-align: right;
+@mixin mdc-text-field-end-aligned_($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
 
-    @include mdc-rtl {
+  .mdc-text-field__input {
+    @include mdc-feature-targets($feat-structure) {
+      // IE11 does not support text-align: end
       /* @noflip */
-      text-align: left;
+      text-align: right;
+
+      @include mdc-rtl {
+        /* @noflip */
+        text-align: left;
+      }
     }
   }
 }
 
 // Customization
 
-@mixin mdc-text-field-ink-color_($color) {
+@mixin mdc-text-field-ink-color_($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
   .mdc-text-field__input {
-    @include mdc-theme-prop(color, $color);
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(color, $color);
+    }
   }
 }
 
-@mixin mdc-text-field-placeholder-color_($color) {
+@mixin mdc-text-field-placeholder-color_($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
   .mdc-text-field__input::placeholder {
-    @include mdc-theme-prop(color, $color);
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(color, $color);
+    }
   }
 
   // Override the placeholder styles in IE with important rule to improve specificity.
   // stylelint-disable-next-line selector-no-vendor-prefix
   .mdc-text-field__input:-ms-input-placeholder {
-    @include mdc-theme-prop(color, $color, $important: true);
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(color, $color, $important: true);
+    }
   }
 }
 
-@mixin mdc-text-field-fill-color_($color) {
-  @include mdc-theme-prop(background-color, $color);
+@mixin mdc-text-field-fill-color_($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
+  @include mdc-feature-targets($feat-color) {
+    @include mdc-theme-prop(background-color, $color);
+  }
 }
 
-@mixin mdc-text-field-bottom-line-color_($color) {
+@mixin mdc-text-field-bottom-line-color_($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
   .mdc-text-field__input {
-    @include mdc-theme-prop(border-bottom-color, $color);
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(border-bottom-color, $color);
+    }
   }
 }
 
-@mixin mdc-text-field-hover-bottom-line-color_($color) {
+@mixin mdc-text-field-hover-bottom-line-color_($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
   .mdc-text-field__input:hover {
-    @include mdc-theme-prop(border-bottom-color, $color);
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(border-bottom-color, $color);
+    }
   }
 }
 
-@mixin mdc-text-field-line-ripple-color_($color) {
+@mixin mdc-text-field-line-ripple-color_($color, $query: mdc-feature-all()) {
   .mdc-line-ripple {
-    @include mdc-line-ripple-color($color);
+    @include mdc-line-ripple-color($color, $query: $query);
   }
 }
 
-@mixin mdc-text-field-label-ink-color_($color) {
+@mixin mdc-text-field-label-ink-color_($color, $query: mdc-feature-all()) {
   .mdc-floating-label {
-    @include mdc-floating-label-ink-color($color);
+    @include mdc-floating-label-ink-color($color, $query: $query);
   }
 }
 
diff --git a/packages/mdc-textfield/character-counter/_mixins.scss b/packages/mdc-textfield/character-counter/_mixins.scss
index a86d376f620..187f42efd26 100644
--- a/packages/mdc-textfield/character-counter/_mixins.scss
+++ b/packages/mdc-textfield/character-counter/_mixins.scss
@@ -20,17 +20,41 @@
 // THE SOFTWARE.
 //
 
+@import "@material/feature-targeting/functions";
+@import "@material/feature-targeting/mixins";
 @import "@material/rtl/mixins";
+@import "@material/typography/mixins";
 
 // Public mixins
 
+@mixin mdc-text-field-character-counter-core-styles($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  // postcss-bem-linter: define text-field-character-counter
+
+  .mdc-text-field-character-counter {
+    @include mdc-typography(caption, $query: $query);
+    @include mdc-typography-baseline-top(16px, $query: $query);
+
+    @include mdc-feature-targets($feat-structure) {
+      // Keep flex item align to trailing side on absence of helper text.
+      @include mdc-rtl-reflexive-box(margin, left, auto);
+      @include mdc-rtl-reflexive-box(padding, left, 16px);
+
+      white-space: nowrap;
+    }
+  }
+
+  // postcss-bem-linter: end
+}
+
 ///
 /// Customizes the color of the character counter associated with an enabled text field.
 /// @param {Color} $color - The desired character counter color.
 ///
-@mixin mdc-text-field-character-counter-color($color) {
+@mixin mdc-text-field-character-counter-color($color, $query: mdc-feature-all()) {
   &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-character-counter-color_($color);
+    @include mdc-text-field-character-counter-color_($color, $query: $query);
   }
 }
 
@@ -38,28 +62,36 @@
 /// Customizes the color of the character counter associated with a disabled text field.
 /// @param {Color} $color - The desired character counter color.
 ///
-@mixin mdc-text-field-disabled-character-counter-color($color) {
+@mixin mdc-text-field-disabled-character-counter-color($color, $query: mdc-feature-all()) {
   &.mdc-text-field--disabled {
-    @include mdc-text-field-character-counter-color_($color);
+    @include mdc-text-field-character-counter-color_($color, $query: $query);
   }
 }
 
-@mixin mdc-text-field-character-counter-position($xOffset, $yOffset) {
+@mixin mdc-text-field-character-counter-position($xOffset, $yOffset, $query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
   .mdc-text-field-character-counter {
-    @include mdc-rtl-reflexive-position(right, $xOffset);
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-rtl-reflexive-position(right, $xOffset);
 
-    position: absolute;
-    bottom: $yOffset;
+      position: absolute;
+      bottom: $yOffset;
+    }
   }
 }
 
 // Private mixins
 
-@mixin mdc-text-field-character-counter-color_($color) {
-  // Character counter is placed inside mdc-textfield element (for textarea variant ) or
+@mixin mdc-text-field-character-counter-color_($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
+  // Character counter is placed inside mdc-textfield element (for textarea variant) or
   // inside helper line which is sibling to mdc-textfield.
   .mdc-text-field-character-counter,
   + .mdc-text-field-helper-line .mdc-text-field-character-counter {
-    @include mdc-theme-prop(color, $color);
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(color, $color);
+    }
   }
 }
diff --git a/packages/mdc-textfield/character-counter/mdc-text-field-character-counter.scss b/packages/mdc-textfield/character-counter/mdc-text-field-character-counter.scss
index 2ffe9ed6238..a0904b5159e 100644
--- a/packages/mdc-textfield/character-counter/mdc-text-field-character-counter.scss
+++ b/packages/mdc-textfield/character-counter/mdc-text-field-character-counter.scss
@@ -20,20 +20,5 @@
 // THE SOFTWARE.
 //
 
-@import "../functions";
-@import "@material/rtl/mixins";
-@import "@material/typography/mixins";
-
-// postcss-bem-linter: define text-field-character-counter
-
-.mdc-text-field-character-counter {
-  @include mdc-typography(caption);
-  @include mdc-typography-baseline-top(16px);
-  // Keep flex item align to trailing side on absence of helper text.
-  @include mdc-rtl-reflexive-box(margin, left, auto);
-  @include mdc-rtl-reflexive-box(padding, left, 16px);
-
-  white-space: nowrap;
-}
-
-// postcss-bem-linter: end
+@import "./mixins";
+@include mdc-text-field-character-counter-core-styles;
diff --git a/packages/mdc-textfield/helper-text/_mixins.scss b/packages/mdc-textfield/helper-text/_mixins.scss
index d78eaaa0179..4ce98d70056 100644
--- a/packages/mdc-textfield/helper-text/_mixins.scss
+++ b/packages/mdc-textfield/helper-text/_mixins.scss
@@ -20,15 +20,55 @@
 // THE SOFTWARE.
 //
 
+@import "@material/theme/mixins";
+@import "@material/typography/mixins";
+@import "@material/feature-targeting/functions";
+@import "@material/feature-targeting/mixins";
+
 // Public mixins
 
+@mixin mdc-text-field-helper-text-core-styles($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+  $feat-animation: mdc-feature-create-target($query, animation);
+
+  // postcss-bem-linter: define text-field-helper-text
+
+  .mdc-text-field-helper-text {
+    @include mdc-typography(caption, $query: $query);
+    @include mdc-typography-baseline-top(16px, $query: $query);
+
+    @include mdc-feature-targets($feat-structure) {
+      margin: 0;
+      opacity: 0;
+      will-change: opacity;
+    }
+
+    @include mdc-feature-targets($feat-animation) {
+      transition: mdc-text-field-transition(opacity);
+    }
+  }
+
+  .mdc-text-field-helper-text--persistent {
+    @include mdc-feature-targets($feat-structure) {
+      opacity: 1;
+      will-change: initial;
+    }
+
+    @include mdc-feature-targets($feat-animation) {
+      transition: none;
+    }
+  }
+
+  // postcss-bem-linter: end
+}
+
 ///
 /// Customizes the color of the helper text following an enabled text-field.
 /// @param {Color} $color - The desired helper text color.
 ///
-@mixin mdc-text-field-helper-text-color($color) {
+@mixin mdc-text-field-helper-text-color($color, $query: mdc-feature-all()) {
   &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-helper-text-color_($color);
+    @include mdc-text-field-helper-text-color_($color, $query: $query);
   }
 }
 
@@ -36,28 +76,36 @@
 /// Customizes the color of the helper text following a disabled text-field.
 /// @param {Color} $color - The desired helper text color.
 ///
-@mixin mdc-text-field-disabled-helper-text-color($color) {
+@mixin mdc-text-field-disabled-helper-text-color($color, $query: mdc-feature-all()) {
   &.mdc-text-field--disabled {
-    @include mdc-text-field-helper-text-color_($color);
+    @include mdc-text-field-helper-text-color_($color, $query: $query);
   }
 }
 
-@mixin mdc-text-field-helper-text-validation-color($color) {
+@mixin mdc-text-field-helper-text-validation-color($color, $query: mdc-feature-all()) {
   &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-helper-text-validation-color_($color);
+    @include mdc-text-field-helper-text-validation-color_($color, $query);
   }
 }
 
 // Private mixins
 
-@mixin mdc-text-field-helper-text-color_($color) {
+@mixin mdc-text-field-helper-text-color_($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
   + .mdc-text-field-helper-line .mdc-text-field-helper-text {
-    @include mdc-theme-prop(color, $color);
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(color, $color);
+    }
   }
 }
 
-@mixin mdc-text-field-helper-text-validation-color_($color) {
+@mixin mdc-text-field-helper-text-validation-color_($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
   &.mdc-text-field--invalid + .mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg {
-    @include mdc-theme-prop(color, $color);
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(color, $color);
+    }
   }
 }
diff --git a/packages/mdc-textfield/helper-text/mdc-text-field-helper-text.scss b/packages/mdc-textfield/helper-text/mdc-text-field-helper-text.scss
index 0abd76509f3..de79c278ef9 100644
--- a/packages/mdc-textfield/helper-text/mdc-text-field-helper-text.scss
+++ b/packages/mdc-textfield/helper-text/mdc-text-field-helper-text.scss
@@ -20,26 +20,5 @@
 // THE SOFTWARE.
 //
 
-@import "../functions";
-@import "@material/theme/mixins";
-@import "@material/typography/mixins";
-
-// postcss-bem-linter: define text-field-helper-text
-
-.mdc-text-field-helper-text {
-  @include mdc-typography(caption);
-  @include mdc-typography-baseline-top(16px);
-
-  margin: 0;
-  transition: mdc-text-field-transition(opacity);
-  opacity: 0;
-  will-change: opacity;
-}
-
-.mdc-text-field-helper-text--persistent {
-  transition: none;
-  opacity: 1;
-  will-change: initial;
-}
-
-// postcss-bem-linter: end
+@import "./mixins";
+@include mdc-text-field-helper-text-core-styles;
diff --git a/packages/mdc-textfield/icon/_mixins.scss b/packages/mdc-textfield/icon/_mixins.scss
index 52fd6128553..58ee7af29b9 100644
--- a/packages/mdc-textfield/icon/_mixins.scss
+++ b/packages/mdc-textfield/icon/_mixins.scss
@@ -20,19 +20,27 @@
 // THE SOFTWARE.
 //
 
-@import "@material/rtl/mixins";
 @import "@material/theme/variables";
 @import "@material/theme/mixins";
+@import "@material/rtl/mixins";
+@import "@material/feature-targeting/functions";
+@import "@material/feature-targeting/mixins";
 
 // Public mixins
 
+@mixin mdc-text-field-icon-core-styles($query: mdc-feature-all()) {
+  .mdc-text-field__icon {
+    @include mdc-text-field-icon_($query: $query);
+  }
+}
+
 ///
 /// Customizes the color for the leading icon in an enabled text-field.
 /// @param {Color} $color - The desired icon color.
 ///
-@mixin mdc-text-field-leading-icon-color($color) {
+@mixin mdc-text-field-leading-icon-color($color, $query: mdc-feature-all()) {
   &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-leading-icon-color_($color);
+    @include mdc-text-field-leading-icon-color_($color, $query: $query);
   }
 }
 
@@ -40,9 +48,9 @@
 /// Customizes the color for the trailing icon in an enabled text-field.
 /// @param {Color} $color - The desired icon color.
 ///
-@mixin mdc-text-field-trailing-icon-color($color) {
+@mixin mdc-text-field-trailing-icon-color($color, $query: mdc-feature-all()) {
   &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-trailing-icon-color_($color);
+    @include mdc-text-field-trailing-icon-color_($color, $query: $query);
   }
 }
 
@@ -50,53 +58,75 @@
 /// Customizes the color for the leading/trailing icons in a disabled text-field.
 /// @param {Color} $color - The desired icon color.
 ///
-@mixin mdc-text-field-disabled-icon-color($color) {
+@mixin mdc-text-field-disabled-icon-color($color, $query: mdc-feature-all()) {
   &.mdc-text-field--disabled {
-    @include mdc-text-field-leading-icon-color_($color);
-    @include mdc-text-field-trailing-icon-color_($color);
+    @include mdc-text-field-leading-icon-color_($color, $query: $query);
+    @include mdc-text-field-trailing-icon-color_($color, $query: $query);
   }
 }
 
 // Private mixins
 
-@mixin mdc-text-field-leading-icon-horizontal-position_($position) {
+@mixin mdc-text-field-leading-icon-horizontal-position_($position, $query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
   .mdc-text-field__icon--leading {
-    @include mdc-rtl-reflexive-position(left, $position);
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-rtl-reflexive-position(left, $position);
+    }
   }
 }
 
-@mixin mdc-text-field-trailing-icon-horizontal-position_($position) {
+@mixin mdc-text-field-trailing-icon-horizontal-position_($position, $query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
   .mdc-text-field__icon--trailing {
-    @include mdc-rtl-reflexive-position(right, $position);
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-rtl-reflexive-position(right, $position);
+    }
   }
 }
 
-@mixin mdc-text-field-icon-horizontal-position-two-icons_($position-left, $position-right) {
-  @include mdc-text-field-leading-icon-horizontal-position_($position-left);
-  @include mdc-text-field-trailing-icon-horizontal-position_($position-right);
+@mixin mdc-text-field-icon-horizontal-position-two-icons_($position-left, $position-right, $query: mdc-feature-all()) {
+  @include mdc-text-field-leading-icon-horizontal-position_($position-left, $query: $query);
+  @include mdc-text-field-trailing-icon-horizontal-position_($position-right, $query: $query);
 }
 
-@mixin mdc-text-field-icon_ {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  cursor: pointer;
+@mixin mdc-text-field-icon_($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-feature-targets($feat-structure) {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+  }
 
   &:not([tabindex]),
   &[tabindex="-1"] {
-    cursor: default;
-    pointer-events: none;
+    @include mdc-feature-targets($feat-structure) {
+      cursor: default;
+      pointer-events: none;
+    }
   }
 }
 
-@mixin mdc-text-field-leading-icon-color_($color) {
+@mixin mdc-text-field-leading-icon-color_($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
   .mdc-text-field__icon--leading {
-    @include mdc-theme-prop(color, $color);
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(color, $color);
+    }
   }
 }
 
-@mixin mdc-text-field-trailing-icon-color_($color) {
+@mixin mdc-text-field-trailing-icon-color_($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
   .mdc-text-field__icon--trailing {
-    @include mdc-theme-prop(color, $color);
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(color, $color);
+    }
   }
 }
diff --git a/packages/mdc-textfield/icon/mdc-text-field-icon.scss b/packages/mdc-textfield/icon/mdc-text-field-icon.scss
index d898e3ede76..a426273613d 100644
--- a/packages/mdc-textfield/icon/mdc-text-field-icon.scss
+++ b/packages/mdc-textfield/icon/mdc-text-field-icon.scss
@@ -21,7 +21,4 @@
 //
 
 @import "./mixins";
-
-.mdc-text-field__icon {
-  @include mdc-text-field-icon_;
-}
+@include mdc-text-field-icon-core-styles;
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index 574e1df6f39..213e9fd2497 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -20,287 +20,11 @@
 // THE SOFTWARE.
 //
 
-@import "@material/animation/variables";
 @import "@material/floating-label/mdc-floating-label";
 @import "@material/line-ripple/mdc-line-ripple";
 @import "@material/notched-outline/mdc-notched-outline";
-@import "@material/ripple/common";
-@import "@material/ripple/mixins";
-@import "@material/rtl/mixins";
-@import "@material/theme/variables";
-@import "@material/typography/mixins";
-@import "@material/typography/variables";
-@import "./functions";
-@import "./helper-text/mdc-text-field-helper-text";
 @import "./character-counter/mdc-text-field-character-counter";
+@import "./helper-text/mdc-text-field-helper-text";
 @import "./icon/mdc-text-field-icon";
 @import "./mixins";
-@import "./variables";
-
-// postcss-bem-linter: define text-field
-
-.mdc-text-field {
-  @include mdc-ripple-surface;
-  // Text Field intentionally omits press ripple, so each state needs to be specified individually.
-  @include mdc-states-base-color($mdc-text-field-ink-color);
-  @include mdc-states-hover-opacity(mdc-states-opacity($mdc-text-field-ink-color, hover));
-  @include mdc-states-focus-opacity(mdc-states-opacity($mdc-text-field-ink-color, focus));
-  @include mdc-ripple-radius-bounded;
-
-  // Height
-  @include mdc-text-field-height($mdc-text-field-height);
-
-  // Shape
-  @include mdc-text-field-shape-radius(small);
-
-  // Colors
-  @include mdc-text-field-label-color($mdc-text-field-label);
-  @include mdc-text-field-ink-color($mdc-text-field-ink-color);
-  @include mdc-text-field-placeholder-color($mdc-text-field-placeholder-ink-color);
-  @include mdc-text-field-caret-color(primary);
-  @include mdc-text-field-bottom-line-color($mdc-text-field-bottom-line-idle);
-  @include mdc-text-field-hover-bottom-line-color($mdc-text-field-bottom-line-hover);
-  @include mdc-text-field-line-ripple-color_(primary);
-  @include mdc-text-field-helper-text-color($mdc-text-field-helper-text-color);
-  @include mdc-text-field-character-counter-color($mdc-text-field-helper-text-color);
-  @include mdc-text-field-leading-icon-color($mdc-text-field-icon-color);
-  @include mdc-text-field-trailing-icon-color($mdc-text-field-icon-color);
-  @include mdc-text-field-fill-color($mdc-text-field-background);
-
-  // Floating Label
-  @include mdc-text-field-floating-label_;
-
-  display: inline-flex;
-  position: relative;
-  box-sizing: border-box;
-  overflow: hidden;
-  /* @alternate */
-  will-change: opacity, transform, color;
-}
-
-.mdc-text-field__input {
-  // Exclude setting line-height to keep caret (text cursor) same height as the input text in iOS browser.
-  @include mdc-typography(subtitle1, $exclude-props: (line-height));
-
-  align-self: flex-end;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  padding:
-    $mdc-text-field-input-padding-top
-    $mdc-text-field-input-padding
-    $mdc-text-field-input-padding-bottom;
-  transition: mdc-text-field-transition(opacity);
-  border: none;
-  border-bottom: 1px solid;
-  border-radius: 0;
-  background: none;
-  appearance: none;
-
-  &::placeholder {
-    transition: mdc-text-field-transition(opacity, $duration: 67ms);
-    opacity: 0;
-  }
-
-  // Always show placeholder for text fields that has no label and show only on focused state when label is present.
-  .mdc-text-field--fullwidth &::placeholder,
-  .mdc-text-field--no-label &::placeholder,
-  .mdc-text-field--focused &::placeholder {
-    transition-delay: 40ms;
-    transition-duration: 110ms;
-    opacity: 1;
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  // Remove red outline on firefox
-  &:invalid {
-    box-shadow: none;
-  }
-
-  // Keep Chrome autofill behind the notched outline
-  &:-webkit-autofill {
-    z-index: auto !important;
-  }
-
-  // Vertically center aligns the text input placeholder and value for only filled variant.
-  .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) & {
-    padding-top: 16px;
-    padding-bottom: 16px;
-  }
-}
-// stylelint-disable-next-line plugin/selector-bem-pattern
-// Move label when text-field gets auto-filled in Chrome.
-.mdc-text-field__input:-webkit-autofill + .mdc-floating-label {
-  transform: translateY(-50%) scale(.75);
-  cursor: auto;
-}
-
-.mdc-text-field--outlined {
-  @include mdc-text-field-outlined_;
-}
-
-.mdc-text-field--outlined.mdc-text-field--focused {
-  @include mdc-text-field-outlined-focused_;
-}
-
-.mdc-text-field--outlined.mdc-text-field--disabled {
-  @include mdc-text-field-outlined-disabled_;
-}
-
-.mdc-text-field--outlined.mdc-text-field--dense {
-  @include mdc-text-field-outlined-dense_;
-}
-
-.mdc-text-field--with-leading-icon {
-  @include mdc-text-field-with-leading-icon_;
-}
-
-.mdc-text-field--with-leading-icon.mdc-text-field--outlined {
-  @include mdc-text-field-outlined-with-leading-icon_;
-}
-
-.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-text-field--dense {
-  @include mdc-text-field-outlined-dense-with-leading-icon_;
-}
-
-.mdc-text-field--with-trailing-icon {
-  @include mdc-text-field-with-trailing-icon_;
-}
-
-.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {
-  @include mdc-text-field-with-both-icons_;
-}
-
-// stylelint-disable plugin/selector-bem-pattern
-.mdc-text-field--dense .mdc-text-field__icon {
-  bottom: 16px;
-  transform: scale(.8);
-}
-// stylelint-enable plugin/selector-bem-pattern
-
-.mdc-text-field--with-leading-icon.mdc-text-field--dense {
-  @include mdc-text-field-dense-with-leading-icon_;
-}
-
-.mdc-text-field--with-trailing-icon.mdc-text-field--dense {
-  @include mdc-text-field-dense-with-trailing-icon_;
-}
-
-.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--dense {
-  @include mdc-text-field-dense-with-both-icons_;
-}
-
-.mdc-text-field--dense {
-  @include mdc-text-field-dense_;
-}
-
-@include mdc-required-text-field-label-asterisk_ {
-  margin-left: 1px;
-  content: "*";
-}
-
-.mdc-text-field--textarea {
-  @include mdc-text-field-textarea_;
-}
-
-.mdc-text-field--fullwidth {
-  @include mdc-text-field-fullwidth_;
-}
-
-.mdc-text-field--fullwidth.mdc-text-field--invalid {
-  @include mdc-text-field-fullwidth-invalid_;
-}
-
-// postcss-bem-linter: define text-field-helper-text
-// stylelint-disable plugin/selector-bem-pattern
-.mdc-text-field-helper-line {
-  display: flex;
-  justify-content: space-between;
-  box-sizing: border-box;
-
-  .mdc-text-field--dense + & {
-    margin-bottom: 4px;
-  }
-
-  .mdc-text-field + & {
-    padding-right: $mdc-text-field-helper-line-padding;
-    padding-left: $mdc-text-field-helper-line-padding;
-  }
-}
-// stylelint-enable plugin/selector-bem-pattern
-// postcss-bem-linter: end
-
-// mdc-form-field tweaks to align text field label correctly
-// stylelint-disable selector-max-type
-.mdc-form-field > .mdc-text-field + label {
-  align-self: flex-start;
-}
-// stylelint-enable selector-max-type
-
-.mdc-text-field--focused {
-  @include mdc-text-field-focused_;
-}
-
-.mdc-text-field--invalid {
-  @include mdc-text-field-invalid_;
-}
-
-.mdc-text-field--textarea.mdc-text-field--invalid {
-  @include mdc-text-field-textarea-invalid_;
-}
-
-.mdc-text-field--outlined.mdc-text-field--invalid {
-  @include mdc-text-field-outlined-invalid_;
-}
-
-.mdc-text-field--disabled {
-  @include mdc-text-field-disabled_;
-}
-
-.mdc-text-field--textarea.mdc-text-field--disabled {
-  @include mdc-text-field-textarea-disabled_;
-}
-
-.mdc-text-field--end-aligned {
-  @include mdc-text-field-end-aligned_;
-}
-
-@include mdc-floating-label-shake-keyframes(
-  text-field-dense,
-  $mdc-text-field-dense-label-position-y,
-  0%,
-  $mdc-text-field-dense-label-scale
-);
-@include mdc-floating-label-shake-keyframes(text-field-outlined, $mdc-text-field-outlined-label-position-y);
-@include mdc-floating-label-shake-keyframes(
-  text-field-outlined-dense,
-  $mdc-text-field-outlined-dense-label-position-y,
-  0%,
-  $mdc-text-field-dense-label-scale
-);
-@include mdc-floating-label-shake-keyframes(
-  text-field-outlined-leading-icon,
-  $mdc-text-field-outlined-label-position-y,
-  $mdc-text-field-outlined-with-leading-icon-label-position-x
-);
-@include mdc-floating-label-shake-keyframes(
-  text-field-outlined-leading-icon-dense,
-  $mdc-text-field-outlined-dense-label-position-y,
-  $mdc-text-field-outlined-dense-with-leading-icon-label-position-x,
-  $mdc-text-field-dense-label-scale
-);
-@include mdc-floating-label-shake-keyframes(
-  text-field-outlined-leading-icon-rtl,
-  $mdc-text-field-outlined-label-position-y,
-  -$mdc-text-field-outlined-with-leading-icon-label-position-x
-);
-@include mdc-floating-label-shake-keyframes(
-  text-field-outlined-leading-icon-dense-rtl,
-  $mdc-text-field-outlined-dense-label-position-y,
-  -$mdc-text-field-outlined-dense-with-leading-icon-label-position-x,
-  $mdc-text-field-dense-label-scale
-);
-@include mdc-floating-label-shake-keyframes(textarea, $mdc-text-field-textarea-label-position-y, 0%);
+@include mdc-text-field-core-styles;
diff --git a/packages/mdc-textfield/package.json b/packages/mdc-textfield/package.json
index aae72e13be1..58d8875574a 100644
--- a/packages/mdc-textfield/package.json
+++ b/packages/mdc-textfield/package.json
@@ -23,6 +23,7 @@
     "@material/base": "^4.0.0",
     "@material/density": "^4.0.0",
     "@material/dom": "^4.0.0",
+    "@material/feature-targeting": "^4.0.0",
     "@material/floating-label": "^4.0.0",
     "@material/line-ripple": "^4.0.0",
     "@material/notched-outline": "^4.0.0",
diff --git a/test/scss/_feature-targeting-test.scss b/test/scss/_feature-targeting-test.scss
index 2aab1102f6f..b73fcfeb3f0 100644
--- a/test/scss/_feature-targeting-test.scss
+++ b/test/scss/_feature-targeting-test.scss
@@ -27,6 +27,10 @@
 @import "@material/tab-scroller/mixins";
 @import "@material/tab-indicator/mixins";
 @import "@material/tab/mixins";
+@import "@material/textfield/mixins";
+@import "@material/textfield/character-counter/mixins";
+@import "@material/textfield/helper-text/mixins";
+@import "@material/textfield/icon/mixins";
 @import "@material/theme/mixins";
 @import "@material/touch-target/mixins";
 @import "@material/typography/mixins";
@@ -334,6 +338,53 @@
     @include mdc-tab-bar-stacked-density(0, $query: $query);
     @include mdc-tab-bar-tab-scroller-transition(0, $query: $query);
 
+    // Text field
+    @include mdc-text-field-core-styles($query: $query);
+    @include mdc-text-field-without-ripple($query: $query);
+    @include mdc-text-field-ripple($query: $query);
+    @include mdc-text-field-input($query: $query);
+    @include mdc-text-field-outlined($query: $query);
+    @include mdc-text-field-density(0, $query: $query);
+    @include mdc-text-field-outlined-density(0, $query: $query);
+    @include mdc-text-field-outlined-with-leading-icon-density(0, $query: $query);
+    @include mdc-text-field-height(42px, $query: $query);
+    @include mdc-text-field-outlined-height(42px, $query: $query);
+    @include mdc-text-field-outlined-with-leading-icon-height(42px, $query: $query);
+    @include mdc-text-field-shape-radius(42px, $query: $query);
+    @include mdc-text-field-textarea-shape-radius(42px, $query: $query);
+    @include mdc-text-field-ink-color(red, $query: $query);
+    @include mdc-text-field-disabled-ink-color(red, $query: $query);
+    @include mdc-text-field-placeholder-color(red, $query: $query);
+    @include mdc-text-field-disabled-placeholder-color(red, $query: $query);
+    @include mdc-text-field-fill-color(red, $query: $query);
+    @include mdc-text-field-disabled-fill-color(red, $query: $query);
+    @include mdc-text-field-bottom-line-color(red, $query: $query);
+    @include mdc-text-field-disabled-bottom-line-color(red, $query: $query);
+    @include mdc-text-field-hover-bottom-line-color(red, $query: $query);
+    @include mdc-text-field-line-ripple-color(red, $query: $query);
+    @include mdc-text-field-label-color(red, $query: $query);
+    @include mdc-text-field-disabled-label-color(red, $query: $query);
+    @include mdc-text-field-outline-color(red, $query: $query);
+    @include mdc-text-field-hover-outline-color(red, $query: $query);
+    @include mdc-text-field-focused-outline-color(red, $query: $query);
+    @include mdc-text-field-disabled-outline-color(red, $query: $query);
+    @include mdc-text-field-caret-color(red, $query: $query);
+
+    @include mdc-text-field-character-counter-core-styles($query: $query);
+    @include mdc-text-field-character-counter-color(red, $query: $query);
+    @include mdc-text-field-disabled-character-counter-color(red, $query: $query);
+    @include mdc-text-field-character-counter-position(100%, 100%, $query: $query);
+
+    @include mdc-text-field-helper-text-core-styles($query: $query);
+    @include mdc-text-field-helper-text-color(red, $query: $query);
+    @include mdc-text-field-disabled-helper-text-color(red, $query: $query);
+    @include mdc-text-field-helper-text-validation-color(red, $query: $query);
+
+    @include mdc-text-field-icon-core-styles($query: $query);
+    @include mdc-text-field-leading-icon-color(red, $query: $query);
+    @include mdc-text-field-trailing-icon-color(red, $query: $query);
+    @include mdc-text-field-disabled-icon-color(red, $query: $query);
+
     // Theme
     @include mdc-theme-core-styles($query: $query);