From cc5a7db27d4a2ee58eab1dcd59da59847b94344c Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Thu, 16 Feb 2023 09:50:50 -0800
Subject: [PATCH] fix(field & dependents)!: convert to use text-type tokens

PiperOrigin-RevId: 510171224
---
 autocomplete/lib/_filled-autocomplete.scss   | 32 +++++++------------
 autocomplete/lib/_outlined-autocomplete.scss | 33 +++++++-------------
 autocomplete/lib/_shared.scss                | 11 +++++++
 field/lib/_filled-field.scss                 |  6 ----
 field/lib/_label.scss                        | 28 ++---------------
 field/lib/_md-comp-filled-field.scss         | 12 +++++--
 field/lib/_md-comp-outlined-field.scss       | 15 ++++++---
 field/lib/_outlined-field.scss               |  5 ---
 field/lib/_shared.scss                       | 14 ---------
 field/lib/_supporting-text.scss              | 15 +--------
 textfield/lib/_filled-text-field.scss        | 31 +++++++++---------
 textfield/lib/_input.scss                    | 10 +-----
 textfield/lib/_outlined-text-field.scss      | 30 +++++++++---------
 textfield/lib/_shared.scss                   | 14 ---------
 14 files changed, 91 insertions(+), 165 deletions(-)

diff --git a/autocomplete/lib/_filled-autocomplete.scss b/autocomplete/lib/_filled-autocomplete.scss
index c9999e51a4..2b08effedf 100644
--- a/autocomplete/lib/_filled-autocomplete.scss
+++ b/autocomplete/lib/_filled-autocomplete.scss
@@ -15,8 +15,10 @@
 @use '../../menusurface/menu-surface';
 @use '../../sass/shape';
 @use '../../sass/theme';
+@use '../../sass/typography';
 @use '../../textfield/filled-text-field';
 @use '../../tokens';
+@use './shared';
 // go/keep-sorted end
 
 $custom-property-prefix: 'filled-autocomplete';
@@ -28,10 +30,11 @@ $dark-theme: tokens.md-comp-filled-autocomplete-values(
 );
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(
-    tokens.md-comp-filled-autocomplete-values(),
-    $tokens
+  $reference: shared.resolve-typography-tokens(
+    tokens.md-comp-filled-autocomplete-values()
   );
+  $tokens: shared.resolve-typography-tokens($tokens);
+  $tokens: theme.validate-theme($reference, $tokens);
   $tokens: elevation.resolve-tokens($tokens, 'menu-container-elevation');
   $tokens: theme.create-theme-vars($tokens, $custom-property-prefix);
   $tokens: shape.resolve-tokens($tokens, 'text-field-container-shape');
@@ -40,7 +43,9 @@ $dark-theme: tokens.md-comp-filled-autocomplete-values(
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-filled-autocomplete-values();
+  $tokens: shared.resolve-typography-tokens(
+    tokens.md-comp-filled-autocomplete-values()
+  );
   $tokens: elevation.resolve-tokens($tokens, 'menu-container-elevation');
   $tokens: theme.create-theme-vars($tokens, $custom-property-prefix);
   $tokens: shape.resolve-tokens($tokens, 'text-field-container-shape');
@@ -145,31 +150,16 @@ $dark-theme: tokens.md-comp-filled-autocomplete-values(
           var(--_text-field-hover-supporting-text-color),
         hover-trailing-icon-color: var(--_text-field-hover-trailing-icon-color),
         input-text-color: var(--_text-field-input-text-color),
-        input-text-font: var(--_text-field-input-text-font),
-        input-text-line-height: var(--_text-field-input-text-line-height),
-        input-text-size: var(--_text-field-input-text-size),
-        input-text-tracking: var(--_text-field-input-text-tracking),
         input-text-type: var(--_text-field-input-text-type),
-        input-text-weight: var(--_text-field-input-text-weight),
         label-text-color: var(--_text-field-label-text-color),
-        label-text-font: var(--_text-field-label-text-font),
-        label-text-line-height: var(--_text-field-label-text-line-height),
+        label-text-type: var(--_label-text-type),
         label-text-populated-line-height:
           var(--_text-field-label-text-populated-line-height),
         label-text-populated-size: var(--_text-field-label-text-populated-size),
-        label-text-size: var(--_text-field-label-text-size),
-        label-text-tracking: var(--_text-field-label-text-tracking),
-        label-text-type: var(--_text-field-label-text-type),
-        label-text-weight: var(--_text-field-label-text-weight),
         leading-icon-color: var(--_text-field-leading-icon-color),
         leading-icon-size: var(--_text-field-leading-icon-size),
         supporting-text-color: var(--_text-field-supporting-text-color),
-        supporting-text-font: var(--_text-field-supporting-text-font),
-        supporting-text-line-height:
-          var(--_text-field-supporting-text-line-height),
-        supporting-text-size: var(--_text-field-supporting-text-size),
-        supporting-text-tracking: var(--_text-field-supporting-text-tracking),
-        supporting-text-weight: var(--_text-field-supporting-text-weight),
+        supporting-text-type: var(--_supporting-text-type),
         trailing-icon-color: var(--_text-field-trailing-icon-color),
         trailing-icon-size: var(--_text-field-trailing-icon-size),
       )
diff --git a/autocomplete/lib/_outlined-autocomplete.scss b/autocomplete/lib/_outlined-autocomplete.scss
index 0abd59567c..7d4f582ac1 100644
--- a/autocomplete/lib/_outlined-autocomplete.scss
+++ b/autocomplete/lib/_outlined-autocomplete.scss
@@ -15,8 +15,10 @@
 @use '../../menusurface/menu-surface';
 @use '../../sass/shape';
 @use '../../sass/theme';
+@use '../../sass/typography';
 @use '../../textfield/outlined-text-field';
 @use '../../tokens';
+@use './shared';
 // go/keep-sorted end
 
 $custom-property-prefix: 'outlined-autocomplete';
@@ -28,10 +30,12 @@ $dark-theme: tokens.md-comp-outlined-autocomplete-values(
 );
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(
-    tokens.md-comp-outlined-autocomplete-values(),
-    $theme
+  $reference: shared.resolve-typography-tokens(
+    tokens.md-comp-outlined-autocomplete-values()
   );
+
+  $tokens: shared.resolve-typography-tokens($tokens);
+  $tokens: theme.validate-theme($reference, $theme);
   $tokens: elevation.resolve-tokens($tokens, 'menu-container-elevation');
   $tokens: theme.create-theme-vars($tokens, $custom-property-prefix);
   $tokens: shape.resolve-tokens($tokens, 'text-field-container-shape');
@@ -40,7 +44,9 @@ $dark-theme: tokens.md-comp-outlined-autocomplete-values(
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-outlined-autocomplete-values();
+  $tokens: shared.resolve-typography-tokens(
+    tokens.md-comp-outlined-autocomplete-values()
+  );
   // TODO(b/251183088): Clean up container-shape once token is correct.
   $tokens: map.merge(
     $tokens,
@@ -130,33 +136,18 @@ $dark-theme: tokens.md-comp-outlined-autocomplete-values(
           var(--_text-field-hover-supporting-text-color),
         hover-trailing-icon-color: var(--_text-field-hover-trailing-icon-color),
         input-text-color: var(--_text-field-input-text-color),
-        input-text-font: var(--_text-field-input-text-font),
-        input-text-line-height: var(--_text-field-input-text-line-height),
-        input-text-size: var(--_text-field-input-text-size),
-        input-text-tracking: var(--_text-field-input-text-tracking),
         input-text-type: var(--_text-field-input-text-type),
-        input-text-weight: var(--_text-field-input-text-weight),
         label-text-color: var(--_text-field-label-text-color),
-        label-text-font: var(--_text-field-label-text-font),
-        label-text-line-height: var(--_text-field-label-text-line-height),
+        label-text-type: var(--_label-text-type),
         label-text-populated-line-height:
           var(--_text-field-label-text-populated-line-height),
         label-text-populated-size: var(--_text-field-label-text-populated-size),
-        label-text-size: var(--_text-field-label-text-size),
-        label-text-tracking: var(--_text-field-label-text-tracking),
-        label-text-type: var(--_text-field-label-text-type),
-        label-text-weight: var(--_text-field-label-text-weight),
         leading-icon-color: var(--_text-field-leading-icon-color),
         leading-icon-size: var(--_text-field-leading-icon-size),
         outline-color: var(--_text-field-outline-color),
         outline-width: var(--_text-field-outline-width),
         supporting-text-color: var(--_text-field-supporting-text-color),
-        supporting-text-font: var(--_text-field-supporting-text-font),
-        supporting-text-line-height:
-          var(--_text-field-supporting-text-line-height),
-        supporting-text-size: var(--_text-field-supporting-text-size),
-        supporting-text-tracking: var(--_text-field-supporting-text-tracking),
-        supporting-text-weight: var(--_text-field-supporting-text-weight),
+        supporting-text-type: var(--_supporting-text-type),
         trailing-icon-color: var(--_text-field-trailing-icon-color),
         trailing-icon-size: var(--_text-field-trailing-icon-size),
       )
diff --git a/autocomplete/lib/_shared.scss b/autocomplete/lib/_shared.scss
index f89c6dea2e..3a6cb8a48a 100644
--- a/autocomplete/lib/_shared.scss
+++ b/autocomplete/lib/_shared.scss
@@ -6,9 +6,20 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
+@use '../../sass/typography';
+
 @mixin styles() {
   .md3-autocomplete {
     display: inline-flex;
     flex: 1;
   }
 }
+
+@function resolve-typography-tokens($tokens) {
+  @return typography.resolve-tokens(
+    $tokens,
+    'input-text',
+    'label-text',
+    'supporting-text'
+  );
+}
diff --git a/field/lib/_filled-field.scss b/field/lib/_filled-field.scss
index acf3ddcc00..19652479a7 100644
--- a/field/lib/_filled-field.scss
+++ b/field/lib/_filled-field.scss
@@ -8,21 +8,16 @@
 // go/keep-sorted end
 // go/keep-sorted start
 @use '../../motion/animation';
-@use '../../sass/resolvers';
 @use '../../sass/shape';
 @use '../../sass/theme';
 @use './md-comp-filled-field';
-@use './shared';
 // go/keep-sorted end
 
 $_animation-duration: 150ms;
 
 @mixin theme($tokens) {
   $reference: md-comp-filled-field.values();
-  // Add resolved tokens so that $theme may specify them.
-  $reference: map.merge($reference, shared.resolve-tokens($reference));
   $tokens: theme.validate-theme($reference, $tokens);
-  $tokens: shared.resolve-tokens($tokens);
   $tokens: theme.create-theme-vars($tokens, 'filled-field');
   $tokens: shape.resolve-tokens($tokens, 'container-shape');
 
@@ -31,7 +26,6 @@ $_animation-duration: 150ms;
 
 @mixin styles() {
   $tokens: md-comp-filled-field.values();
-  $tokens: shared.resolve-tokens($tokens);
   $tokens: theme.create-theme-vars($tokens, 'filled-field');
   $tokens: shape.resolve-tokens($tokens, 'container-shape');
 
diff --git a/field/lib/_label.scss b/field/lib/_label.scss
index f7d9e269eb..4405e07039 100644
--- a/field/lib/_label.scss
+++ b/field/lib/_label.scss
@@ -3,10 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// go/keep-sorted start
-@use '../../sass/typography';
-// go/keep-sorted end
-
 @mixin styles() {
   .label {
     color: var(--_label-text-color);
@@ -25,14 +21,7 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     z-index: 1;
-
-    @include typography.theme-styles(
-      (
-        font: var(--_label-text-font),
-        tracking: var(--_label-text-tracking),
-        weight: var(--_label-text-weight),
-      )
-    );
+    font: var(--_label-text-type);
   }
 
   .label.resting {
@@ -41,22 +30,11 @@
     transform: translateY(-50%);
     /*rtl:ignore*/
     transform-origin: top left;
-
-    @include typography.theme-styles(
-      (
-        size: var(--_label-text-size),
-        line-height: var(--_label-text-line-height),
-      )
-    );
   }
 
   .label.floating {
-    @include typography.theme-styles(
-      (
-        size: var(--_label-text-populated-size),
-        line-height: var(--_label-text-populated-line-height),
-      )
-    );
+    font-size: var(--_label-text-populated-size);
+    line-height: var(--_label-text-populated-line-height);
   }
 
   .label.hidden {
diff --git a/field/lib/_md-comp-filled-field.scss b/field/lib/_md-comp-filled-field.scss
index 4ed7652d0a..619524d390 100644
--- a/field/lib/_md-comp-filled-field.scss
+++ b/field/lib/_md-comp-filled-field.scss
@@ -45,8 +45,16 @@ $_default-deps: (
     input-text-placeholder-color,
     input-text-prefix-color,
     input-text-suffix-color,
-    label-text-type,
-    supporting-text-type
+    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.
diff --git a/field/lib/_md-comp-outlined-field.scss b/field/lib/_md-comp-outlined-field.scss
index ba85733e6b..8c344622ef 100644
--- a/field/lib/_md-comp-outlined-field.scss
+++ b/field/lib/_md-comp-outlined-field.scss
@@ -22,8 +22,7 @@ $_default-deps: (
     $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,
@@ -45,8 +44,16 @@ $_default-deps: (
     input-text-placeholder-color,
     input-text-prefix-color,
     input-text-suffix-color,
-    label-text-type,
-    supporting-text-type
+    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.
diff --git a/field/lib/_outlined-field.scss b/field/lib/_outlined-field.scss
index f433eacc88..fe580db059 100644
--- a/field/lib/_outlined-field.scss
+++ b/field/lib/_outlined-field.scss
@@ -11,17 +11,13 @@
 @use '../../sass/shape';
 @use '../../sass/theme';
 @use './md-comp-outlined-field';
-@use './shared';
 // go/keep-sorted end
 
 $_animation-duration: 150ms;
 
 @mixin theme($tokens) {
   $reference: md-comp-outlined-field.values();
-  // Add resolved tokens so that $theme may specify them.
-  $reference: map.merge($reference, shared.resolve-tokens($reference));
   $tokens: theme.validate-theme($reference, $tokens);
-  $tokens: shared.resolve-tokens($tokens);
   $tokens: theme.create-theme-vars($tokens, 'outlined-field');
   $tokens: shape.resolve-tokens($tokens, 'container-shape');
 
@@ -30,7 +26,6 @@ $_animation-duration: 150ms;
 
 @mixin styles() {
   $tokens: md-comp-outlined-field.values();
-  $tokens: shared.resolve-tokens($tokens);
   $tokens: theme.create-theme-vars($tokens, 'outlined-field');
   $tokens: shape.resolve-tokens($tokens, 'container-shape');
 
diff --git a/field/lib/_shared.scss b/field/lib/_shared.scss
index 36946ba5ec..415e5e7e2e 100644
--- a/field/lib/_shared.scss
+++ b/field/lib/_shared.scss
@@ -7,8 +7,6 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../sass/resolvers';
-@use '../../sass/typography';
 @use './content';
 @use './label';
 @use './supporting-text';
@@ -61,15 +59,3 @@
   @include label.styles;
   @include supporting-text.styles;
 }
-
-@function resolve-tokens($tokens) {
-  $tokens: typography.resolve-theme(
-    $tokens,
-    map.get(resolvers.$material, typography),
-    label-text,
-    label-text-populated,
-    supporting-text
-  );
-
-  @return $tokens;
-}
diff --git a/field/lib/_supporting-text.scss b/field/lib/_supporting-text.scss
index 9858348412..3044ca1ae6 100644
--- a/field/lib/_supporting-text.scss
+++ b/field/lib/_supporting-text.scss
@@ -3,26 +3,13 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// go/keep-sorted start
-@use '../../sass/typography';
-// go/keep-sorted end
-
 @mixin styles() {
   .supporting-text {
     color: var(--_supporting-text-color);
     display: flex;
     justify-content: space-between;
     padding: 0 var(--_supporting-text-padding);
-
-    @include typography.theme-styles(
-      (
-        font: var(--_supporting-text-font),
-        tracking: var(--_supporting-text-tracking),
-        weight: var(--_supporting-text-weight),
-        size: var(--_supporting-text-size),
-        line-height: var(--_supporting-text-line-height),
-      )
-    );
+    font: var(--_supporting-text-type);
   }
 
   .supporting-text-start,
diff --git a/textfield/lib/_filled-text-field.scss b/textfield/lib/_filled-text-field.scss
index 1161d47574..a453a4e97e 100644
--- a/textfield/lib/_filled-text-field.scss
+++ b/textfield/lib/_filled-text-field.scss
@@ -8,9 +8,9 @@
 // go/keep-sorted end
 // go/keep-sorted start
 @use '../../field/filled-field';
-@use '../../sass/resolvers';
 @use '../../sass/shape';
 @use '../../sass/theme';
+@use '../../sass/typography';
 @use '../../tokens';
 @use './shared';
 // go/keep-sorted end
@@ -18,7 +18,7 @@
 @mixin theme($tokens) {
   // Add missing tokens
   $reference: map.merge(
-    tokens.md-comp-filled-text-field-values(),
+    _resolve-tokens(tokens.md-comp-filled-text-field-values()),
     (
       container-padding-horizontal: null,
       container-padding-vertical: null,
@@ -27,8 +27,9 @@
     )
   );
 
+  $tokens: _resolve-tokens($tokens);
+
   $tokens: theme.validate-theme($reference, $tokens);
-  $tokens: shared.resolve-tokens($tokens);
   $tokens: theme.create-theme-vars($tokens, 'filled-text-field');
   $tokens: shape.resolve-tokens($tokens, 'container-shape');
 
@@ -36,7 +37,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-filled-text-field-values();
+  $tokens: _resolve-tokens(tokens.md-comp-filled-text-field-values());
   // Add missing tokens
   $tokens: map.merge(
     (
@@ -49,7 +50,6 @@
     $tokens
   );
 
-  $tokens: shared.resolve-tokens($tokens);
   $tokens: theme.create-theme-vars($tokens, 'filled-text-field');
   $tokens: shape.resolve-tokens($tokens, 'container-shape');
 
@@ -126,22 +126,14 @@
         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-font: var(--_label-text-font),
-        label-text-line-height: var(--_label-text-line-height),
+        label-text-type: var(--_label-text-type),
         label-text-populated-line-height:
           var(--_label-text-populated-line-height),
         label-text-populated-size: var(--_label-text-populated-size),
-        label-text-size: var(--_label-text-size),
-        label-text-tracking: var(--_label-text-tracking),
-        label-text-weight: var(--_label-text-weight),
         leading-icon-color: var(--_leading-icon-color),
         leading-icon-size: var(--_leading-icon-size),
         supporting-text-color: var(--_supporting-text-color),
-        supporting-text-font: var(--_supporting-text-font),
-        supporting-text-line-height: var(--_supporting-text-line-height),
-        supporting-text-size: var(--_supporting-text-size),
-        supporting-text-tracking: var(--_supporting-text-tracking),
-        supporting-text-weight: var(--_supporting-text-weight),
+        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:
@@ -150,3 +142,12 @@
     );
   }
 }
+
+@function _resolve-tokens($tokens) {
+  @return typography.resolve-tokens(
+    $tokens,
+    'input-text',
+    'label-text',
+    'supporting-text'
+  );
+}
diff --git a/textfield/lib/_input.scss b/textfield/lib/_input.scss
index 7368a6ac24..cfc48bb746 100644
--- a/textfield/lib/_input.scss
+++ b/textfield/lib/_input.scss
@@ -52,15 +52,7 @@
   .md3-text-field__input,
   .md3-text-field__prefix,
   .md3-text-field__suffix {
-    @include typography.theme-styles(
-      (
-        font: var(--_input-text-font),
-        line-height: var(--_input-text-line-height),
-        size: var(--_input-text-size),
-        tracking: var(--_input-text-tracking),
-        weight: var(--_input-text-weight),
-      )
-    );
+    font: var(--_input-text-type);
   }
 
   .md3-text-field:not(.md3-text-field--disabled) {
diff --git a/textfield/lib/_outlined-text-field.scss b/textfield/lib/_outlined-text-field.scss
index b62ae7a4ec..817698aa8c 100644
--- a/textfield/lib/_outlined-text-field.scss
+++ b/textfield/lib/_outlined-text-field.scss
@@ -8,9 +8,9 @@
 // go/keep-sorted end
 // go/keep-sorted start
 @use '../../field/outlined-field';
-@use '../../sass/resolvers';
 @use '../../sass/shape';
 @use '../../sass/theme';
+@use '../../sass/typography';
 @use '../../tokens';
 @use './shared';
 // go/keep-sorted end
@@ -18,7 +18,7 @@
 @mixin theme($tokens) {
   // Add missing tokens
   $reference: map.merge(
-    tokens.md-comp-outlined-text-field-values(),
+    _resolve-tokens(tokens.md-comp-outlined-text-field-values()),
     (
       container-padding-horizontal: null,
       container-padding-vertical: null,
@@ -28,8 +28,8 @@
     )
   );
 
+  $tokens: _resolve-tokens($tokens);
   $tokens: theme.validate-theme($reference, $tokens);
-  $tokens: shared.resolve-tokens($tokens);
   $tokens: theme.create-theme-vars($tokens, 'outlined-text-field');
   $tokens: shape.resolve-tokens($tokens, 'container-shape');
 
@@ -37,7 +37,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-outlined-text-field-values();
+  $tokens: _resolve-tokens(tokens.md-comp-outlined-text-field-values());
   // Add missing tokens
   $tokens: map.merge(
     (
@@ -50,7 +50,6 @@
     $tokens
   );
 
-  $tokens: shared.resolve-tokens($tokens);
   $tokens: theme.create-theme-vars($tokens, 'outlined-text-field');
   $tokens: shape.resolve-tokens($tokens, 'container-shape');
 
@@ -116,28 +115,29 @@
         hover-trailing-icon-color: var(--_hover-trailing-icon-color),
         content-color: var(--_input-text-color),
         label-text-color: var(--_label-text-color),
-        label-text-font: var(--_label-text-font),
-        label-text-line-height: var(--_label-text-line-height),
+        label-text-type: var(--_label-text-type),
         label-text-padding-bottom: var(--_label-text-padding-bottom),
         label-text-populated-line-height:
           var(--_label-text-populated-line-height),
         label-text-populated-size: var(--_label-text-populated-size),
-        label-text-size: var(--_label-text-size),
-        label-text-tracking: var(--_label-text-tracking),
-        label-text-weight: var(--_label-text-weight),
         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),
-        supporting-text-font: var(--_supporting-text-font),
-        supporting-text-line-height: var(--_supporting-text-line-height),
-        supporting-text-size: var(--_supporting-text-size),
-        supporting-text-tracking: var(--_supporting-text-tracking),
-        supporting-text-weight: var(--_supporting-text-weight),
         trailing-icon-color: var(--_trailing-icon-color),
         trailing-icon-size: var(--_trailing-icon-size),
       )
     );
   }
 }
+
+@function _resolve-tokens($tokens) {
+  @return typography.resolve-tokens(
+    $tokens,
+    'input-text',
+    'label-text',
+    'supporting-text'
+  );
+}
diff --git a/textfield/lib/_shared.scss b/textfield/lib/_shared.scss
index ba2a8d9952..279ba6cefb 100644
--- a/textfield/lib/_shared.scss
+++ b/textfield/lib/_shared.scss
@@ -10,8 +10,6 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../sass/resolvers';
-@use '../../sass/typography';
 @use './icon';
 @use './input';
 // go/keep-sorted end
@@ -44,15 +42,3 @@
   @include icon.styles;
   @include input.styles;
 }
-
-@function resolve-tokens($tokens) {
-  $tokens: typography.resolve-theme(
-    $tokens,
-    map.get(resolvers.$material, typography),
-    input-text,
-    label-text,
-    supporting-text
-  );
-
-  @return $tokens;
-}