fix(field & dependents)!: convert to use text-type tokens

PiperOrigin-RevId: 510171224
material-components · Feb 16, 2023 · cc5a7db · cc5a7db
1 parent 527203e
commit cc5a7db
Show file tree

Hide file tree

Showing 14 changed files with 91 additions and 165 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,