diff --git a/README.md b/README.md
index b84e1bca4e..f9e536ae9d 100644
--- a/README.md
+++ b/README.md
@@ -42,7 +42,7 @@ Dialog                        | 🟢     | 🟢    | 🔴
 Divider                       | 🟢     | 🟢    | 🟡
 Elevation                     | 🟢     | 🔴    | 🔴
 Focus ring                    | 🟢     | 🔴    | 🔴
-Field                         | 🟢     | 🟢    | 🔴
+Field                         | 🟢     | 🟢    | 🟡
 Icon                          | 🟢     | 🟢    | 🔴
 List                          | 🟢     | 🟢    | 🟡
 Menu                          | 🟢     | 🟢    | 🟡
diff --git a/field/lib/_content.scss b/field/lib/_content.scss
index d1a603a57b..cb0e966e83 100644
--- a/field/lib/_content.scss
+++ b/field/lib/_content.scss
@@ -33,11 +33,33 @@ $_enter-delay: $_label-duration - $_visible-duration;
     position: relative;
   }
 
+  .start {
+    color: var(--_leading-content-color);
+  }
+
+  .end {
+    color: var(--_trailing-content-color);
+  }
+
   .start,
   .end {
     justify-content: center;
   }
 
+  // TODO(b/239188049): remove when layout tokens are ready
+  .with-start .start,
+  .with-end .end {
+    min-width: 48px;
+  }
+
+  .with-start .start {
+    margin-inline-end: 4px;
+  }
+
+  .with-end .end {
+    margin-inline-start: 4px;
+  }
+
   .middle {
     // The container of the field aligns sections by "center". Only the middle
     // section opts in to baseline alignment.
@@ -51,14 +73,16 @@ $_enter-delay: $_label-duration - $_visible-duration;
   }
 
   .content {
+    // Content elements provided to the field (such as <input>) may use
+    // `currentColor` to inherit this property.
+    color: var(--_content-color);
     display: flex;
     flex: 1;
+    // Content elements provided to the field (such as <input>) may inherit font
+    font: var(--_content-type);
     opacity: 0;
     transition: opacity $_visible-duration
       map.get($_md-sys-motion, 'easing-emphasized');
-    // Content elements provided to the field (such as <input>) may use
-    // `currentColor` to inherit this property.
-    color: var(--_content-color);
   }
 
   .no-label .content,
@@ -68,33 +92,83 @@ $_enter-delay: $_label-duration - $_visible-duration;
     transition-delay: $_enter-delay;
   }
 
-  .disabled.no-label .content,
-  .disabled.focused .content,
-  .disabled.populated .content {
-    opacity: var(--_disabled-content-opacity);
-  }
-
   :hover .content {
     color: var(--_hover-content-color);
   }
 
+  :hover .start {
+    color: var(--_hover-leading-content-color);
+  }
+
+  :hover .end {
+    color: var(--_hover-trailing-content-color);
+  }
+
   .focused .content {
     color: var(--_focus-content-color);
   }
 
+  .focused .start {
+    color: var(--_focus-leading-content-color);
+  }
+
+  .focused .end {
+    color: var(--_focus-trailing-content-color);
+  }
+
   .disabled .content {
     color: var(--_disabled-content-color);
   }
 
+  .disabled.no-label .content,
+  .disabled.focused .content,
+  .disabled.populated .content {
+    opacity: var(--_disabled-content-opacity);
+  }
+
+  .disabled .start {
+    color: var(--_disabled-leading-content-color);
+    opacity: var(--_disabled-leading-content-opacity);
+  }
+
+  .disabled .end {
+    color: var(--_disabled-trailing-content-color);
+    opacity: var(--_disabled-trailing-content-opacity);
+  }
+
   .error .content {
     color: var(--_error-content-color);
   }
 
+  .error .start {
+    color: var(--_error-leading-content-color);
+  }
+
+  .error .end {
+    color: var(--_error-trailing-content-color);
+  }
+
   .error:hover .content {
     color: var(--_error-hover-content-color);
   }
 
+  .error:hover .start {
+    color: var(--_error-hover-leading-content-color);
+  }
+
+  .error:hover .end {
+    color: var(--_error-hover-trailing-content-color);
+  }
+
   .error.focused .content {
     color: var(--_error-focus-content-color);
   }
+
+  .error.focused .start {
+    color: var(--_error-focus-leading-content-color);
+  }
+
+  .error.focused .end {
+    color: var(--_error-focus-trailing-content-color);
+  }
 }
diff --git a/field/lib/_md-comp-filled-field.scss b/field/lib/_md-comp-filled-field.scss
index 619524d390..bbcd09fc49 100644
--- a/field/lib/_md-comp-filled-field.scss
+++ b/field/lib/_md-comp-filled-field.scss
@@ -11,76 +11,135 @@
 // go/keep-sorted end
 
 $_default-deps: (
-  md-sys-color: tokens.md-sys-color-values-light(),
-  md-sys-shape: tokens.md-sys-shape-values(),
-  md-sys-state: tokens.md-sys-state-values(),
-  md-sys-typescale: tokens.md-sys-typescale-values(),
+  'md-sys-color': tokens.md-sys-color-values-light(),
+  'md-sys-shape': tokens.md-sys-shape-values(),
+  'md-sys-state': tokens.md-sys-state-values(),
+  'md-sys-typescale': tokens.md-sys-typescale-values(),
 );
 
 @function values($deps: $_default-deps, $exclude-hardcoded-values: false) {
-  $text-field-values: tokens.md-comp-filled-text-field-values(
+  $text-field: tokens.md-comp-filled-text-field-values(
     $deps,
     $exclude-hardcoded-values
   );
-  // TODO(b/203778922): Remove *-type when type composite tokens are removed
-  // Remove unused tokens.
-  $values: map.remove(
-    $text-field-values,
-    caret-color,
-    disabled-input-text-color,
-    disabled-input-text-opacity,
-    error-focus-caret-color,
-    error-focus-input-text-color,
-    error-hover-input-text-color,
-    error-input-text-color,
-    focus-input-text-color,
-    hover-input-text-color,
-    input-text-color,
-    input-text-font,
-    input-text-line-height,
-    input-text-size,
-    input-text-tracking,
-    input-text-type,
-    input-text-weight,
-    input-text-placeholder-color,
-    input-text-prefix-color,
-    input-text-suffix-color,
-    label-text-font,
-    label-text-line-height,
-    label-text-size,
-    label-text-tracking,
-    label-text-weight,
-    supporting-text-font,
-    supporting-text-line-height,
-    supporting-text-size,
-    supporting-text-tracking,
-    supporting-text-weight
-  );
 
-  // Add missing tokens.
-  $values: map.merge(
-    $values,
-    (
-      container-padding-horizontal: if($exclude-hardcoded-values, null, 16px),
-      container-padding-vertical: if($exclude-hardcoded-values, null, 16px),
-      content-color: map.get($text-field-values, input-text-color),
-      disabled-content-color:
-        map.get($text-field-values, disabled-input-text-color),
-      disabled-content-opacity:
-        map.get($text-field-values, disabled-input-text-opacity),
-      error-content-color: map.get($text-field-values, error-input-text-color),
-      error-focus-content-color:
-        map.get($text-field-values, error-focus-input-text-color),
-      error-hover-content-color:
-        map.get($text-field-values, error-hover-input-text-color),
-      focus-content-color: map.get($text-field-values, focus-input-text-color),
-      hover-content-color: map.get($text-field-values, hover-input-text-color),
-      supporting-text-padding: if($exclude-hardcoded-values, null, 16px),
-      supporting-text-padding-top: if($exclude-hardcoded-values, null, 4px),
-      with-label-container-padding-vertical:
-        if($exclude-hardcoded-values, null, 8px),
-    )
+  @return (
+    // go/keep-sorted start
+    'active-indicator-color': map.get($text-field, 'active-indicator-color'),
+    'active-indicator-height': map.get($text-field, 'active-indicator-height'),
+    'container-color': map.get($text-field, 'container-color'),
+    'container-padding-horizontal': if($exclude-hardcoded-values, null, 16px),
+    'container-padding-vertical': if($exclude-hardcoded-values, null, 16px),
+    'container-shape': map.get($text-field, 'container-shape'),
+    'content-color': map.get($text-field, 'input-text-color'),
+    'content-type': map.get($text-field, 'input-text-type'),
+    'disabled-active-indicator-color':
+      map.get($text-field, 'disabled-active-indicator-color'),
+    'disabled-active-indicator-height':
+      map.get($text-field, 'disabled-active-indicator-height'),
+    'disabled-active-indicator-opacity':
+      map.get($text-field, 'disabled-active-indicator-opacity'),
+    'disabled-container-color': map.get($text-field, 'disabled-container-color'),
+    'disabled-container-opacity':
+      map.get($text-field, 'disabled-container-opacity'),
+    'disabled-content-color': map.get($text-field, 'disabled-input-text-color'),
+    'disabled-content-opacity':
+      map.get($text-field, 'disabled-input-text-opacity'),
+    'disabled-label-text-color':
+      map.get($text-field, 'disabled-label-text-color'),
+    'disabled-label-text-opacity':
+      map.get($text-field, 'disabled-label-text-opacity'),
+    'disabled-leading-content-color':
+      map.get($text-field, 'disabled-leading-icon-color'),
+    'disabled-leading-content-opacity':
+      map.get($text-field, 'disabled-leading-icon-opacity'),
+    'disabled-supporting-text-color':
+      map.get($text-field, 'disabled-supporting-text-color'),
+    'disabled-supporting-text-opacity':
+      map.get($text-field, 'disabled-supporting-text-opacity'),
+    'disabled-trailing-content-color':
+      map.get($text-field, 'disabled-trailing-icon-color'),
+    'disabled-trailing-content-opacity':
+      map.get($text-field, 'disabled-trailing-icon-opacity'),
+    'error-active-indicator-color':
+      map.get($text-field, 'error-active-indicator-color'),
+    'error-content-color': map.get($text-field, 'error-input-text-color'),
+    'error-focus-active-indicator-color':
+      map.get($text-field, 'error-focus-active-indicator-color'),
+    'error-focus-content-color':
+      map.get($text-field, 'error-focus-leading-icon-color'),
+    'error-focus-label-text-color':
+      map.get($text-field, 'error-focus-label-text-color'),
+    'error-focus-leading-content-color':
+      map.get($text-field, 'error-focus-leading-icon-color'),
+    'error-focus-supporting-text-color':
+      map.get($text-field, 'error-focus-supporting-text-color'),
+    'error-focus-trailing-content-color':
+      map.get($text-field, 'error-focus-trailing-icon-color'),
+    'error-hover-active-indicator-color':
+      map.get($text-field, 'error-hover-active-indicator-color'),
+    'error-hover-content-color':
+      map.get($text-field, 'error-hover-input-text-color'),
+    'error-hover-label-text-color':
+      map.get($text-field, 'error-hover-label-text-color'),
+    'error-hover-leading-content-color':
+      map.get($text-field, 'error-hover-leading-icon-color'),
+    'error-hover-state-layer-color':
+      map.get($text-field, 'error-hover-state-layer-color'),
+    'error-hover-state-layer-opacity':
+      map.get($text-field, 'error-hover-state-layer-opacity'),
+    'error-hover-supporting-text-color':
+      map.get($text-field, 'error-hover-supporting-text-color'),
+    'error-hover-trailing-content-color':
+      map.get($text-field, 'error-hover-trailing-icon-color'),
+    'error-label-text-color': map.get($text-field, 'error-label-text-color'),
+    'error-leading-content-color':
+      map.get($text-field, 'error-leading-icon-color'),
+    'error-supporting-text-color':
+      map.get($text-field, 'error-supporting-text-color'),
+    'error-trailing-content-color':
+      map.get($text-field, 'error-trailing-icon-color'),
+    'focus-active-indicator-color':
+      map.get($text-field, 'focus-active-indicator-color'),
+    'focus-active-indicator-height':
+      map.get($text-field, 'focus-active-indicator-height'),
+    'focus-content-color': map.get($text-field, 'focus-input-text-color'),
+    'focus-label-text-color': map.get($text-field, 'focus-label-text-color'),
+    'focus-leading-content-color':
+      map.get($text-field, 'focus-leading-icon-color'),
+    'focus-supporting-text-color':
+      map.get($text-field, 'focus-supporting-text-color'),
+    'focus-trailing-content-color':
+      map.get($text-field, 'focus-trailing-icon-color'),
+    'hover-active-indicator-color':
+      map.get($text-field, 'hover-active-indicator-color'),
+    'hover-active-indicator-height':
+      map.get($text-field, 'hover-active-indicator-height'),
+    'hover-content-color': map.get($text-field, 'hover-input-text-color'),
+    'hover-label-text-color': map.get($text-field, 'hover-label-text-color'),
+    'hover-leading-content-color':
+      map.get($text-field, 'hover-leading-icon-color'),
+    'hover-state-layer-color': map.get($text-field, 'hover-state-layer-color'),
+    'hover-state-layer-opacity':
+      map.get($text-field, 'hover-state-layer-opacity'),
+    'hover-supporting-text-color':
+      map.get($text-field, 'hover-supporting-text-color'),
+    'hover-trailing-content-color':
+      map.get($text-field, 'hover-trailing-icon-color'),
+    'label-text-color': map.get($text-field, 'label-text-color'),
+    'label-text-populated-line-height':
+      map.get($text-field, 'label-text-populated-line-height'),
+    'label-text-populated-size':
+      map.get($text-field, 'label-text-populated-size'),
+    'label-text-type': map.get($text-field, 'label-text-type'),
+    'leading-content-color': map.get($text-field, 'leading-icon-color'),
+    'supporting-text-color': map.get($text-field, 'supporting-text-color'),
+    'supporting-text-padding': if($exclude-hardcoded-values, null, 16px),
+    'supporting-text-padding-top': if($exclude-hardcoded-values, null, 4px),
+    'supporting-text-type': map.get($text-field, 'supporting-text-type'),
+    'trailing-content-color': map.get($text-field, 'trailing-icon-color'),
+    'with-label-container-padding-vertical':
+      if($exclude-hardcoded-values, null, 8px),
+    // go/keep-sorted end
   );
-
-  @return $values;
 }
diff --git a/field/lib/_md-comp-outlined-field.scss b/field/lib/_md-comp-outlined-field.scss
index 8c344622ef..d6f8ed9f38 100644
--- a/field/lib/_md-comp-outlined-field.scss
+++ b/field/lib/_md-comp-outlined-field.scss
@@ -18,68 +18,109 @@ $_default-deps: (
 );
 
 @function values($deps: $_default-deps, $exclude-hardcoded-values: false) {
-  $text-field-values: tokens.md-comp-outlined-text-field-values(
+  $text-field: tokens.md-comp-outlined-text-field-values(
     $deps,
     $exclude-hardcoded-values
   );
 
-  $values: map.remove(
-    $text-field-values,
-    caret-color,
-    disabled-input-text-color,
-    disabled-input-text-opacity,
-    error-focus-caret-color,
-    error-focus-input-text-color,
-    error-hover-input-text-color,
-    error-input-text-color,
-    focus-input-text-color,
-    hover-input-text-color,
-    input-text-color,
-    input-text-font,
-    input-text-line-height,
-    input-text-size,
-    input-text-tracking,
-    input-text-type,
-    input-text-weight,
-    input-text-placeholder-color,
-    input-text-prefix-color,
-    input-text-suffix-color,
-    label-text-font,
-    label-text-line-height,
-    label-text-size,
-    label-text-tracking,
-    label-text-weight,
-    supporting-text-font,
-    supporting-text-line-height,
-    supporting-text-size,
-    supporting-text-tracking,
-    supporting-text-weight
+  @return (
+    // go/keep-sorted start
+    'container-padding-horizontal': if($exclude-hardcoded-values, null, 16px),
+    'container-padding-vertical': if($exclude-hardcoded-values, null, 16px),
+    'container-shape': map.get($text-field, 'container-shape'),
+    'content-color': map.get($text-field, 'input-text-color'),
+    'content-type': map.get($text-field, 'input-text-type'),
+    'disabled-content-color': map.get($text-field, 'disabled-input-text-color'),
+    'disabled-content-opacity':
+      map.get($text-field, 'disabled-input-text-opacity'),
+    'disabled-label-text-color':
+      map.get($text-field, 'disabled-label-text-color'),
+    'disabled-label-text-opacity':
+      map.get($text-field, 'disabled-label-text-opacity'),
+    'disabled-leading-content-color':
+      map.get($text-field, 'disabled-leading-icon-color'),
+    'disabled-leading-content-opacity':
+      map.get($text-field, 'disabled-leading-icon-opacity'),
+    'disabled-outline-color': map.get($text-field, 'disabled-outline-color'),
+    'disabled-outline-opacity': map.get($text-field, 'disabled-outline-opacity'),
+    'disabled-outline-width': map.get($text-field, 'disabled-outline-width'),
+    'disabled-supporting-text-color':
+      map.get($text-field, 'disabled-supporting-text-color'),
+    'disabled-supporting-text-opacity':
+      map.get($text-field, 'disabled-supporting-text-opacity'),
+    'disabled-trailing-content-color':
+      map.get($text-field, 'disabled-trailing-icon-color'),
+    'disabled-trailing-content-opacity':
+      map.get($text-field, 'disabled-trailing-icon-opacity'),
+    'error-content-color': map.get($text-field, 'error-input-text-color'),
+    'error-focus-content-color':
+      map.get($text-field, 'error-focus-input-text-color'),
+    'error-focus-label-text-color':
+      map.get($text-field, 'error-focus-label-text-color'),
+    'error-focus-leading-content-color':
+      map.get($text-field, 'error-focus-leading-icon-color'),
+    'error-focus-outline-color':
+      map.get($text-field, 'error-focus-outline-color'),
+    'error-focus-supporting-text-color':
+      map.get($text-field, 'error-focus-supporting-text-color'),
+    'error-focus-trailing-content-color':
+      map.get($text-field, 'error-focus-trailing-icon-color'),
+    'error-hover-content-color':
+      map.get($text-field, 'error-hover-input-text-color'),
+    'error-hover-label-text-color':
+      map.get($text-field, 'error-hover-label-text-color'),
+    'error-hover-leading-content-color':
+      map.get($text-field, 'error-hover-leading-icon-color'),
+    'error-hover-outline-color':
+      map.get($text-field, 'error-hover-outline-color'),
+    'error-hover-supporting-text-color':
+      map.get($text-field, 'error-hover-supporting-text-color'),
+    'error-hover-trailing-content-color':
+      map.get($text-field, 'error-hover-trailing-icon-color'),
+    'error-label-text-color': map.get($text-field, 'error-label-text-color'),
+    'error-leading-content-color':
+      map.get($text-field, 'error-leading-icon-color'),
+    'error-outline-color': map.get($text-field, 'error-outline-color'),
+    'error-supporting-text-color':
+      map.get($text-field, 'error-supporting-text-color'),
+    'error-trailing-content-color':
+      map.get($text-field, 'error-trailing-icon-color'),
+    'focus-content-color': map.get($text-field, 'focus-input-text-color'),
+    'focus-label-text-color': map.get($text-field, 'focus-label-text-color'),
+    'focus-leading-content-color':
+      map.get($text-field, 'focus-leading-icon-color'),
+    'focus-outline-color': map.get($text-field, 'focus-outline-color'),
+    'focus-outline-width': map.get($text-field, 'focus-outline-width'),
+    'focus-supporting-text-color':
+      map.get($text-field, 'focus-supporting-text-color'),
+    'focus-trailing-content-color':
+      map.get($text-field, 'focus-trailing-icon-color'),
+    'hover-content-color': map.get($text-field, 'hover-input-text-color'),
+    'hover-label-text-color': map.get($text-field, 'hover-label-text-color'),
+    'hover-leading-content-color':
+      map.get($text-field, 'hover-leading-icon-color'),
+    'hover-outline-color': map.get($text-field, 'hover-outline-color'),
+    'hover-outline-width': map.get($text-field, 'hover-outline-width'),
+    'hover-supporting-text-color':
+      map.get($text-field, 'hover-supporting-text-color'),
+    'hover-trailing-content-color':
+      map.get($text-field, 'hover-trailing-icon-color'),
+    'label-text-color': map.get($text-field, 'label-text-color'),
+    'label-text-padding-bottom': if($exclude-hardcoded-values, null, 8px),
+    'label-text-populated-line-height':
+      map.get($text-field, 'label-text-populated-line-height'),
+    'label-text-populated-size':
+      map.get($text-field, 'label-text-populated-size'),
+    'label-text-type': map.get($text-field, 'label-text-type'),
+    'leading-content-color': map.get($text-field, 'leading-icon-color'),
+    'outline-color': map.get($text-field, 'outline-color'),
+    'outline-label-padding': if($exclude-hardcoded-values, null, 4px),
+    'outline-width': map.get($text-field, 'outline-width'),
+    'supporting-text-color': map.get($text-field, 'supporting-text-color'),
+    'supporting-text-padding': if($exclude-hardcoded-values, null, 16px),
+    'supporting-text-padding-top': if($exclude-hardcoded-values, null, 4px),
+    'supporting-text-type': map.get($text-field, 'supporting-text-type'),
+    'trailing-content-color': map.get($text-field, 'trailing-icon-color'),
+    // go/keep-sorted end
   );
-
-  // Add missing tokens.
-  $values: map.merge(
-    $values,
-    (
-      container-padding-horizontal: if($exclude-hardcoded-values, null, 16px),
-      container-padding-vertical: if($exclude-hardcoded-values, null, 16px),
-      content-color: map.get($text-field-values, input-text-color),
-      disabled-content-color:
-        map.get($text-field-values, disabled-input-text-color),
-      disabled-content-opacity:
-        map.get($text-field-values, disabled-input-text-opacity),
-      error-content-color: map.get($text-field-values, error-input-text-color),
-      error-focus-content-color:
-        map.get($text-field-values, error-focus-input-text-color),
-      error-hover-content-color:
-        map.get($text-field-values, error-hover-input-text-color),
-      focus-content-color: map.get($text-field-values, focus-input-text-color),
-      hover-content-color: map.get($text-field-values, hover-input-text-color),
-      label-text-padding-bottom: if($exclude-hardcoded-values, null, 8px),
-      outline-label-padding: if($exclude-hardcoded-values, null, 4px),
-      supporting-text-padding: if($exclude-hardcoded-values, null, 16px),
-      supporting-text-padding-top: if($exclude-hardcoded-values, null, 4px),
-    )
-  );
-
-  @return $values;
 }
diff --git a/field/lib/_shared.scss b/field/lib/_shared.scss
index 47aadad9c7..ea8aa7cdfb 100644
--- a/field/lib/_shared.scss
+++ b/field/lib/_shared.scss
@@ -44,7 +44,6 @@
     box-sizing: border-box;
     display: flex;
     flex: 1;
-    flex-basis: var(--_container-height);
     overflow: hidden;
     padding-top: var(--_container-padding-vertical);
     padding-bottom: var(--_container-padding-vertical);
@@ -55,20 +54,6 @@
     pointer-events: none;
   }
 
-  // TODO(b/239188049): remove when layout tokens are ready
-  .with-start .start,
-  .with-end .end {
-    min-width: 48px;
-  }
-
-  .with-start .start {
-    margin-inline-end: 4px;
-  }
-
-  .with-end .end {
-    margin-inline-start: 4px;
-  }
-
   @include content.styles;
   @include label.styles;
   @include supporting-text.styles;
diff --git a/textfield/lib/_filled-text-field.scss b/textfield/lib/_filled-text-field.scss
index a453a4e97e..94ce1fbbac 100644
--- a/textfield/lib/_filled-text-field.scss
+++ b/textfield/lib/_filled-text-field.scss
@@ -16,19 +16,8 @@
 // go/keep-sorted end
 
 @mixin theme($tokens) {
-  // Add missing tokens
-  $reference: map.merge(
-    _resolve-tokens(tokens.md-comp-filled-text-field-values()),
-    (
-      container-padding-horizontal: null,
-      container-padding-vertical: null,
-      input-text-prefix-padding: null,
-      input-text-suffix-padding: null,
-    )
-  );
-
-  $tokens: _resolve-tokens($tokens);
-
+  $reference: _resolve-tokens(tokens.md-comp-filled-text-field-values());
+  $tokens: _resolve-tokens($tokens, $exclude-hardcoded-values: true);
   $tokens: theme.validate-theme($reference, $tokens);
   $tokens: theme.create-theme-vars($tokens, 'filled-text-field');
   $tokens: shape.resolve-tokens($tokens, 'container-shape');
@@ -38,18 +27,6 @@
 
 @mixin styles() {
   $tokens: _resolve-tokens(tokens.md-comp-filled-text-field-values());
-  // Add missing tokens
-  $tokens: map.merge(
-    (
-      container-padding-horizontal: 16px,
-      container-padding-vertical: 16px,
-      input-text-prefix-padding: 2px,
-      input-text-suffix-padding: 2px,
-      with-label-container-padding-vertical: 8px,
-    ),
-    $tokens
-  );
-
   $tokens: theme.create-theme-vars($tokens, 'filled-text-field');
   $tokens: shape.resolve-tokens($tokens, 'container-shape');
 
@@ -60,90 +37,115 @@
 
     @include filled-field.theme(
       (
-        active-indicator-color: var(--_active-indicator-color),
-        active-indicator-height: var(--_active-indicator-height),
-        container-color: var(--_container-color),
-        container-padding-horizontal: var(--_container-padding-horizontal),
-        container-padding-vertical: var(--_container-padding-vertical),
-        container-shape: shape.corners-to-shape-token('--_container-shape'),
-        content-color: var(--_input-text-color),
-        disabled-active-indicator-color: var(--_disabled-active-indicator-color),
-        disabled-active-indicator-height:
+        // go/keep-sorted start
+        'active-indicator-color': var(--_active-indicator-color),
+        'active-indicator-height': var(--_active-indicator-height),
+        'container-color': var(--_container-color),
+        'container-padding-horizontal': var(--_container-padding-horizontal),
+        'container-padding-vertical': var(--_container-padding-vertical),
+        'container-shape': shape.corners-to-shape-token('--_container-shape'),
+        'content-color': var(--_input-text-color),
+        'content-type': var(--_input-text-type),
+        'disabled-active-indicator-color':
+          var(--_disabled-active-indicator-color),
+        'disabled-active-indicator-height':
           var(--_disabled-active-indicator-height),
-        disabled-active-indicator-opacity:
+        'disabled-active-indicator-opacity':
           var(--_disabled-active-indicator-opacity),
-        disabled-container-color: var(--_disabled-container-color),
-        disabled-container-opacity: var(--_disabled-container-opacity),
-        disabled-content-color: var(--_disabled-input-text-color),
-        disabled-content-opacity: var(--_disabled-input-text-opacity),
-        disabled-label-text-color: var(--_disabled-label-text-color),
-        disabled-label-text-opacity: var(--_disabled-label-text-opacity),
-        disabled-leading-icon-color: var(--_disabled-leading-icon-color),
-        disabled-leading-icon-opacity: var(--_disabled-leading-icon-opacity),
-        disabled-supporting-text-color: var(--_disabled-supporting-text-color),
-        disabled-supporting-text-opacity:
+        'disabled-container-color': var(--_disabled-container-color),
+        'disabled-container-opacity': var(--_disabled-container-opacity),
+        'disabled-content-color': var(--_disabled-input-text-color),
+        'disabled-content-opacity': var(--_disabled-input-text-opacity),
+        'disabled-label-text-color': var(--_disabled-label-text-color),
+        'disabled-label-text-opacity': var(--_disabled-label-text-opacity),
+        'disabled-leading-content-color': var(--_disabled-leading-icon-color),
+        'disabled-leading-content-opacity':
+          var(--_disabled-leading-icon-opacity),
+        'disabled-supporting-text-color': var(--_disabled-supporting-text-color),
+        'disabled-supporting-text-opacity':
           var(--_disabled-supporting-text-opacity),
-        disabled-trailing-icon-color: var(--_disabled-trailing-icon-color),
-        disabled-trailing-icon-opacity: var(--_disabled-trailing-icon-opacity),
-        error-active-indicator-color: var(--_error-active-indicator-color),
-        error-focus-active-indicator-color:
+        'disabled-trailing-content-color': var(--_disabled-trailing-icon-color),
+        'disabled-trailing-content-opacity':
+          var(--_disabled-trailing-icon-opacity),
+        'error-active-indicator-color': var(--_error-active-indicator-color),
+        'error-content-color': var(--_error-input-text-color),
+        'error-focus-active-indicator-color':
           var(--_error-focus-active-indicator-color),
-        error-focus-content-color: var(--_error-focus-input-text-color),
-        error-focus-label-text-color: var(--_error-focus-label-text-color),
-        error-focus-leading-icon-color: var(--_error-focus-leading-icon-color),
-        error-focus-supporting-text-color:
+        'error-focus-content-color': var(--_error-focus-input-text-color),
+        'error-focus-label-text-color': var(--_error-focus-label-text-color),
+        'error-focus-leading-content-color':
+          var(--_error-focus-leading-icon-color),
+        'error-focus-supporting-text-color':
           var(--_error-focus-supporting-text-color),
-        error-focus-trailing-icon-color: var(--_error-focus-trailing-icon-color),
-        error-hover-active-indicator-color:
+        'error-focus-trailing-content-color':
+          var(--_error-focus-trailing-icon-color),
+        'error-hover-active-indicator-color':
           var(--_error-hover-active-indicator-color),
-        error-hover-content-color: var(--_error-hover-input-text-color),
-        error-hover-label-text-color: var(--_error-hover-label-text-color),
-        error-hover-leading-icon-color: var(--_error-hover-leading-icon-color),
-        error-hover-state-layer-color: var(--_error-hover-state-layer-color),
-        error-hover-state-layer-opacity: var(--_error-hover-state-layer-opacity),
-        error-hover-supporting-text-color:
+        'error-hover-content-color': var(--_error-hover-input-text-color),
+        'error-hover-label-text-color': var(--_error-hover-label-text-color),
+        'error-hover-leading-content-color':
+          var(--_error-hover-leading-icon-color),
+        'error-hover-state-layer-color': var(--_error-hover-state-layer-color),
+        'error-hover-state-layer-opacity':
+          var(--_error-hover-state-layer-opacity),
+        'error-hover-supporting-text-color':
           var(--_error-hover-supporting-text-color),
-        error-hover-trailing-icon-color: var(--_error-hover-trailing-icon-color),
-        error-content-color: var(--_error-input-text-color),
-        error-label-text-color: var(--_error-label-text-color),
-        error-leading-icon-color: var(--_error-leading-icon-color),
-        error-supporting-text-color: var(--_error-supporting-text-color),
-        error-trailing-icon-color: var(--_error-trailing-icon-color),
-        focus-active-indicator-color: var(--_focus-active-indicator-color),
-        focus-active-indicator-height: var(--_focus-active-indicator-height),
-        focus-content-color: var(--_focus-input-text-color),
-        focus-label-text-color: var(--_focus-label-text-color),
-        focus-leading-icon-color: var(--_focus-leading-icon-color),
-        focus-supporting-text-color: var(--_focus-supporting-text-color),
-        focus-trailing-icon-color: var(--_focus-trailing-icon-color),
-        hover-active-indicator-color: var(--_hover-active-indicator-color),
-        hover-active-indicator-height: var(--_hover-active-indicator-height),
-        hover-content-color: var(--_hover-input-text-color),
-        hover-label-text-color: var(--_hover-label-text-color),
-        hover-leading-icon-color: var(--_hover-leading-icon-color),
-        hover-state-layer-color: var(--_hover-state-layer-color),
-        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
-        hover-supporting-text-color: var(--_hover-supporting-text-color),
-        hover-trailing-icon-color: var(--_hover-trailing-icon-color),
-        label-text-color: var(--_label-text-color),
-        label-text-type: var(--_label-text-type),
-        label-text-populated-line-height:
+        'error-hover-trailing-content-color':
+          var(--_error-hover-trailing-icon-color),
+        'error-label-text-color': var(--_error-label-text-color),
+        'error-leading-content-color': var(--_error-leading-icon-color),
+        'error-supporting-text-color': var(--_error-supporting-text-color),
+        'error-trailing-content-color': var(--_error-trailing-icon-color),
+        'focus-active-indicator-color': var(--_focus-active-indicator-color),
+        'focus-active-indicator-height': var(--_focus-active-indicator-height),
+        'focus-content-color': var(--_focus-input-text-color),
+        'focus-label-text-color': var(--_focus-label-text-color),
+        'focus-leading-content-color': var(--_focus-leading-icon-color),
+        'focus-supporting-text-color': var(--_focus-supporting-text-color),
+        'focus-trailing-content-color': var(--_focus-trailing-icon-color),
+        'hover-active-indicator-color': var(--_hover-active-indicator-color),
+        'hover-active-indicator-height': var(--_hover-active-indicator-height),
+        'hover-content-color': var(--_hover-input-text-color),
+        'hover-label-text-color': var(--_hover-label-text-color),
+        'hover-leading-content-color': var(--_hover-leading-icon-color),
+        'hover-state-layer-color': var(--_hover-state-layer-color),
+        'hover-state-layer-opacity': var(--_hover-state-layer-opacity),
+        'hover-supporting-text-color': var(--_hover-supporting-text-color),
+        'hover-trailing-content-color': var(--_hover-trailing-icon-color),
+        'label-text-color': var(--_label-text-color),
+        'label-text-populated-line-height':
           var(--_label-text-populated-line-height),
-        label-text-populated-size: var(--_label-text-populated-size),
-        leading-icon-color: var(--_leading-icon-color),
-        leading-icon-size: var(--_leading-icon-size),
-        supporting-text-color: var(--_supporting-text-color),
-        supporting-text-type: var(--_supporting-text-type),
-        trailing-icon-color: var(--_trailing-icon-color),
-        trailing-icon-size: var(--_trailing-icon-size),
-        with-label-container-padding-vertical:
-          var(--_with-label-container-padding-vertical),
+        'label-text-populated-size': var(--_label-text-populated-size),
+        'label-text-type': var(--_label-text-type),
+        'leading-content-color': var(--_leading-icon-color),
+        'supporting-text-color': var(--_supporting-text-color),
+        'supporting-text-type': var(--_supporting-text-type),
+        'trailing-content-color': var(--_trailing-icon-color),
+        'with-label-container-padding-vertical':
+          var(--_with-label-container-padding-vertical) // go/keep-sorted end
       )
     );
   }
 }
 
-@function _resolve-tokens($tokens) {
+@function _resolve-tokens($tokens, $exclude-hardcoded-values: false) {
+  @if not $exclude-hardcoded-values {
+    // Add missing tokens
+    $tokens: map.merge(
+      (
+        'container-padding-horizontal': 16px,
+        'container-padding-vertical': 16px,
+        'input-text-prefix-padding': 2px,
+        'input-text-suffix-padding': 2px,
+        'with-label-container-padding-vertical': 8px,
+        // TODO(b/270705687): remove when focus-caret-color token added
+        'focus-caret-color':
+          map.get(tokens.md-sys-color-values-light(), 'primary'),
+      ),
+      $tokens
+    );
+  }
+
   @return typography.resolve-tokens(
     $tokens,
     'input-text',
diff --git a/textfield/lib/_icon.scss b/textfield/lib/_icon.scss
index 7e76033aac..5de4258c61 100644
--- a/textfield/lib/_icon.scss
+++ b/textfield/lib/_icon.scss
@@ -5,69 +5,25 @@
 
 @mixin styles() {
   .icon {
+    color: currentColor;
     display: flex;
+    fill: currentColor;
   }
 
   .icon ::slotted(*) {
-    // Remove excess whitespace below inline elementsxs
+    // Remove excess whitespace below inline elements
     display: flex;
   }
 
-  .icon.leading {
-    color: var(--_leading-icon-color);
+  [hasstart] .icon.leading {
+    font-size: var(--_leading-icon-size);
+    height: var(--_leading-icon-size);
+    width: var(--_leading-icon-size);
   }
 
-  .icon.trailing {
-    color: var(--_trailing-icon-color);
-  }
-
-  :hover .icon.leading {
-    color: var(--_hover-leading-icon-color);
-  }
-
-  :hover .icon.trailing {
-    color: var(--_hover-trailing-icon-color);
-  }
-
-  :focus-within .icon.leading {
-    color: var(--_focus-leading-icon-color);
-  }
-
-  :focus-within .icon.trailing {
-    color: var(--_focus-trailing-icon-color);
-  }
-
-  .disabled .icon.leading {
-    color: var(--_disabled-leading-icon-color);
-    opacity: var(--_disabled-leading-icon-opacity);
-  }
-
-  .disabled .icon.trailing {
-    color: var(--_disabled-trailing-icon-color);
-    opacity: var(--_disabled-trailing-icon-opacity);
-  }
-
-  .error .icon.leading {
-    color: var(--_error-leading-icon-color);
-  }
-
-  .error .icon.trailing {
-    color: var(--_error-trailing-icon-color);
-  }
-
-  .error:hover .icon.leading {
-    color: var(--_error-hover-leading-icon-color);
-  }
-
-  .error:hover .icon.trailing {
-    color: var(--_error-hover-trailing-icon-color);
-  }
-
-  .error:focus-within .icon.leading {
-    color: var(--_error-focus-leading-icon-color);
-  }
-
-  .error:focus-within .icon.trailing {
-    color: var(--_error-focus-trailing-icon-color);
+  [hasend] .icon.trailing {
+    font-size: var(--_trailing-icon-size);
+    height: var(--_trailing-icon-size);
+    width: var(--_trailing-icon-size);
   }
 }
diff --git a/textfield/lib/_input.scss b/textfield/lib/_input.scss
index 21a14dbd7e..52e10d5de2 100644
--- a/textfield/lib/_input.scss
+++ b/textfield/lib/_input.scss
@@ -10,6 +10,7 @@
     border: none;
     caret-color: var(--_caret-color);
     color: currentColor;
+    font: inherit;
     outline: none;
     padding: 0;
     text-align: inherit;
@@ -38,15 +39,12 @@
     caret-color: var(--_error-focus-caret-color);
   }
 
-  input,
-  .prefix,
-  .suffix {
-    font: var(--_input-text-type);
+  .text-field:not(.disabled) .prefix {
+    color: var(--_input-text-prefix-color);
   }
 
-  .text-field:not(.disabled) .prefix,
   .text-field:not(.disabled) .suffix {
-    color: var(--_input-text-prefix-color);
+    color: var(--_input-text-suffix-color);
   }
 
   .text-field:not(.disabled) input::placeholder {
diff --git a/textfield/lib/_outlined-text-field.scss b/textfield/lib/_outlined-text-field.scss
index 817698aa8c..4647e1da00 100644
--- a/textfield/lib/_outlined-text-field.scss
+++ b/textfield/lib/_outlined-text-field.scss
@@ -16,19 +16,8 @@
 // go/keep-sorted end
 
 @mixin theme($tokens) {
-  // Add missing tokens
-  $reference: map.merge(
-    _resolve-tokens(tokens.md-comp-outlined-text-field-values()),
-    (
-      container-padding-horizontal: null,
-      container-padding-vertical: null,
-      input-text-prefix-padding: null,
-      input-text-suffix-padding: null,
-      outline-label-padding: null,
-    )
-  );
-
-  $tokens: _resolve-tokens($tokens);
+  $reference: _resolve-tokens(tokens.md-comp-outlined-text-field-values());
+  $tokens: _resolve-tokens($tokens, $exclude-hardcoded-values: true);
   $tokens: theme.validate-theme($reference, $tokens);
   $tokens: theme.create-theme-vars($tokens, 'outlined-text-field');
   $tokens: shape.resolve-tokens($tokens, 'container-shape');
@@ -38,18 +27,6 @@
 
 @mixin styles() {
   $tokens: _resolve-tokens(tokens.md-comp-outlined-text-field-values());
-  // Add missing tokens
-  $tokens: map.merge(
-    (
-      container-padding-horizontal: 16px,
-      container-padding-vertical: 16px,
-      input-text-prefix-padding: 2px,
-      input-text-suffix-padding: 2px,
-      outline-label-padding: 4px,
-    ),
-    $tokens
-  );
-
   $tokens: theme.create-theme-vars($tokens, 'outlined-text-field');
   $tokens: shape.resolve-tokens($tokens, 'container-shape');
 
@@ -62,78 +39,100 @@
 
     @include outlined-field.theme(
       (
-        container-padding-horizontal: var(--_container-padding-horizontal),
-        container-padding-vertical: var(--_container-padding-vertical),
-        container-shape: $container-shape,
-        disabled-content-color: var(--_disabled-input-text-color),
-        disabled-content-opacity: var(--_disabled-input-text-opacity),
-        disabled-label-text-color: var(--_disabled-label-text-color),
-        disabled-label-text-opacity: var(--_disabled-label-text-opacity),
-        disabled-leading-icon-color: var(--_disabled-leading-icon-color),
-        disabled-leading-icon-opacity: var(--_disabled-leading-icon-opacity),
-        disabled-outline-color: var(--_disabled-outline-color),
-        disabled-outline-opacity: var(--_disabled-outline-opacity),
-        disabled-outline-width: var(--_disabled-outline-width),
-        disabled-supporting-text-color: var(--_disabled-supporting-text-color),
-        disabled-supporting-text-opacity:
+        // go/keep-sorted start
+        'container-padding-horizontal': var(--_container-padding-horizontal),
+        'container-padding-vertical': var(--_container-padding-vertical),
+        'container-shape': $container-shape,
+        'content-color': var(--_input-text-color),
+        'content-type': var(--_input-text-type),
+        'disabled-content-color': var(--_disabled-input-text-color),
+        'disabled-content-opacity': var(--_disabled-input-text-opacity),
+        'disabled-label-text-color': var(--_disabled-label-text-color),
+        'disabled-label-text-opacity': var(--_disabled-label-text-opacity),
+        'disabled-leading-content-color': var(--_disabled-leading-icon-color),
+        'disabled-leading-content-opacity':
+          var(--_disabled-leading-icon-opacity),
+        'disabled-outline-color': var(--_disabled-outline-color),
+        'disabled-outline-opacity': var(--_disabled-outline-opacity),
+        'disabled-outline-width': var(--_disabled-outline-width),
+        'disabled-supporting-text-color': var(--_disabled-supporting-text-color),
+        'disabled-supporting-text-opacity':
           var(--_disabled-supporting-text-opacity),
-        disabled-trailing-icon-color: var(--_disabled-trailing-icon-color),
-        disabled-trailing-icon-opacity: var(--_disabled-trailing-icon-opacity),
-        error-focus-content-color: var(--_error-focus-input-text-color),
-        error-focus-label-text-color: var(--_error-focus-label-text-color),
-        error-focus-leading-icon-color: var(--_error-focus-leading-icon-color),
-        error-focus-outline-color: var(--_error-focus-outline-color),
-        error-focus-supporting-text-color:
+        'disabled-trailing-content-color': var(--_disabled-trailing-icon-color),
+        'disabled-trailing-content-opacity':
+          var(--_disabled-trailing-icon-opacity),
+        'error-content-color': var(--_error-input-text-color),
+        'error-focus-content-color': var(--_error-focus-input-text-color),
+        'error-focus-label-text-color': var(--_error-focus-label-text-color),
+        'error-focus-leading-content-color':
+          var(--_error-focus-leading-icon-color),
+        'error-focus-outline-color': var(--_error-focus-outline-color),
+        'error-focus-supporting-text-color':
           var(--_error-focus-supporting-text-color),
-        error-focus-trailing-icon-color: var(--_error-focus-trailing-icon-color),
-        error-hover-content-color: var(--_error-hover-input-text-color),
-        error-hover-label-text-color: var(--_error-hover-label-text-color),
-        error-hover-leading-icon-color: var(--_error-hover-leading-icon-color),
-        error-hover-outline-color: var(--_error-hover-outline-color),
-        error-hover-supporting-text-color:
+        'error-focus-trailing-content-color':
+          var(--_error-focus-trailing-icon-color),
+        'error-hover-content-color': var(--_error-hover-input-text-color),
+        'error-hover-label-text-color': var(--_error-hover-label-text-color),
+        'error-hover-leading-content-color':
+          var(--_error-hover-leading-icon-color),
+        'error-hover-outline-color': var(--_error-hover-outline-color),
+        'error-hover-supporting-text-color':
           var(--_error-hover-supporting-text-color),
-        error-hover-trailing-icon-color: var(--_error-hover-trailing-icon-color),
-        error-content-color: var(--_error-input-text-color),
-        error-label-text-color: var(--_error-label-text-color),
-        error-leading-icon-color: var(--_error-leading-icon-color),
-        error-outline-color: var(--_error-outline-color),
-        error-supporting-text-color: var(--_error-supporting-text-color),
-        error-trailing-icon-color: var(--_error-trailing-icon-color),
-        focus-content-color: var(--_focus-input-text-color),
-        focus-label-text-color: var(--_focus-label-text-color),
-        focus-leading-icon-color: var(--_focus-leading-icon-color),
-        focus-outline-color: var(--_focus-outline-color),
-        focus-outline-width: var(--_focus-outline-width),
-        focus-supporting-text-color: var(--_focus-supporting-text-color),
-        focus-trailing-icon-color: var(--_focus-trailing-icon-color),
-        hover-content-color: var(--_hover-input-text-color),
-        hover-label-text-color: var(--_hover-label-text-color),
-        hover-leading-icon-color: var(--_hover-leading-icon-color),
-        hover-outline-color: var(--_hover-outline-color),
-        hover-outline-width: var(--_hover-outline-width),
-        hover-supporting-text-color: var(--_hover-supporting-text-color),
-        hover-trailing-icon-color: var(--_hover-trailing-icon-color),
-        content-color: var(--_input-text-color),
-        label-text-color: var(--_label-text-color),
-        label-text-type: var(--_label-text-type),
-        label-text-padding-bottom: var(--_label-text-padding-bottom),
-        label-text-populated-line-height:
+        'error-hover-trailing-content-color':
+          var(--_error-hover-trailing-icon-color),
+        'error-label-text-color': var(--_error-label-text-color),
+        'error-leading-content-color': var(--_error-leading-icon-color),
+        'error-outline-color': var(--_error-outline-color),
+        'error-supporting-text-color': var(--_error-supporting-text-color),
+        'error-trailing-content-color': var(--_error-trailing-icon-color),
+        'focus-content-color': var(--_focus-input-text-color),
+        'focus-label-text-color': var(--_focus-label-text-color),
+        'focus-leading-content-color': var(--_focus-leading-icon-color),
+        'focus-outline-color': var(--_focus-outline-color),
+        'focus-outline-width': var(--_focus-outline-width),
+        'focus-supporting-text-color': var(--_focus-supporting-text-color),
+        'focus-trailing-content-color': var(--_focus-trailing-icon-color),
+        'hover-content-color': var(--_hover-input-text-color),
+        'hover-label-text-color': var(--_hover-label-text-color),
+        'hover-leading-content-color': var(--_hover-leading-icon-color),
+        'hover-outline-color': var(--_hover-outline-color),
+        'hover-outline-width': var(--_hover-outline-width),
+        'hover-supporting-text-color': var(--_hover-supporting-text-color),
+        'hover-trailing-content-color': var(--_hover-trailing-icon-color),
+        'label-text-color': var(--_label-text-color),
+        'label-text-populated-line-height':
           var(--_label-text-populated-line-height),
-        label-text-populated-size: var(--_label-text-populated-size),
-        leading-icon-color: var(--_leading-icon-color),
-        leading-icon-size: var(--_leading-icon-size),
-        outline-color: var(--_outline-color),
-        outline-width: var(--_outline-width),
-        supporting-text-type: var(--_supporting-text-type),
-        supporting-text-color: var(--_supporting-text-color),
-        trailing-icon-color: var(--_trailing-icon-color),
-        trailing-icon-size: var(--_trailing-icon-size),
+        'label-text-populated-size': var(--_label-text-populated-size),
+        'label-text-type': var(--_label-text-type),
+        'leading-content-color': var(--_leading-icon-color),
+        'outline-color': var(--_outline-color),
+        'outline-width': var(--_outline-width),
+        'supporting-text-color': var(--_supporting-text-color),
+        'supporting-text-type': var(--_supporting-text-type),
+        'trailing-content-color': var(--_trailing-icon-color),
+        // go/keep-sorted end
       )
     );
   }
 }
 
-@function _resolve-tokens($tokens) {
+@function _resolve-tokens($tokens, $exclude-hardcoded-values: false) {
+  @if not $exclude-hardcoded-values {
+    // Add missing tokens
+    $tokens: map.merge(
+      (
+        'container-padding-horizontal': 16px,
+        'container-padding-vertical': 16px,
+        'input-text-prefix-padding': 2px,
+        'input-text-suffix-padding': 2px,
+        // TODO(b/270705687): remove when focus-caret-color token added
+        'focus-caret-color':
+          map.get(tokens.md-sys-color-values-light(), 'primary'),
+      ),
+      $tokens
+    );
+  }
+
   @return typography.resolve-tokens(
     $tokens,
     'input-text',