chore(textfield): move newly added tokens into Sass component tokens

PiperOrigin-RevId: 601397525

Author: asyncliz

textfield/internal/_filled-text-field.scss

@@ -20,16 +20,7 @@
       'container-shape-start-start',
       'container-shape-start-end',
       'container-shape-end-end',
-      'container-shape-end-start',
-      'leading-space',
-      'trailing-space',
-      'top-space',
-      'bottom-space',
-      'with-label-top-space',
-      'with-label-bottom-space',
-      'input-text-prefix-trailing-space',
-      'input-text-suffix-leading-space',
-      'focus-caret-color'
+      'container-shape-end-start'
     )
   );
 
@@ -50,23 +41,6 @@
 
 @mixin styles() {
   $tokens: tokens.md-comp-filled-text-field-values();
-  // Add missing tokens
-  $tokens: map.merge(
-    (
-      'leading-space': 16px,
-      'trailing-space': 16px,
-      'top-space': 16px,
-      'bottom-space': 16px,
-      'input-text-prefix-trailing-space': 2px,
-      'input-text-suffix-leading-space': 2px,
-      'with-label-top-space': 8px,
-      'with-label-bottom-space': 8px,
-      // TODO(b/270705687): remove when focus-caret-color token added
-      'focus-caret-color':
-        map.get(tokens.md-sys-color-values-light(), 'primary'),
-    ),
-    $tokens
-  );
 
   :host {
     @each $token, $value in $tokens {

textfield/internal/_outlined-text-field.scss

@@ -19,14 +19,7 @@
       'container-shape-start-start',
       'container-shape-start-end',
       'container-shape-end-end',
-      'container-shape-end-start',
-      'leading-space',
-      'trailing-space',
-      'top-space',
-      'bottom-space',
-      'input-text-prefix-trailing-space',
-      'input-text-suffix-leading-space',
-      'focus-caret-color'
+      'container-shape-end-start'
     )
   );
 
@@ -43,21 +36,6 @@
 
 @mixin styles() {
   $tokens: tokens.md-comp-outlined-text-field-values();
-  // Add missing tokens
-  $tokens: map.merge(
-    (
-      'leading-space': 16px,
-      'trailing-space': 16px,
-      'top-space': 16px,
-      'bottom-space': 16px,
-      'input-text-prefix-trailing-space': 2px,
-      'input-text-suffix-leading-space': 2px,
-      // TODO(b/270705687): remove when focus-caret-color token added
-      'focus-caret-color':
-        map.get(tokens.md-sys-color-values-light(), 'primary'),
-    ),
-    $tokens
-  );
 
   :host {
     @each $token, $value in $tokens {

tokens/_md-comp-filled-text-field.scss

@@ -19,6 +19,7 @@ $supported-tokens: (
   // go/keep-sorted start
   'active-indicator-color',
   'active-indicator-height',
+  'bottom-space',
   'caret-color',
   'container-color',
   'container-shape',
@@ -60,6 +61,7 @@ $supported-tokens: (
   'error-trailing-icon-color',
   'focus-active-indicator-color',
   'focus-active-indicator-height',
+  'focus-caret-color',
   'focus-input-text-color',
   'focus-label-text-color',
   'focus-leading-icon-color',
@@ -79,8 +81,10 @@ $supported-tokens: (
   'input-text-line-height',
   'input-text-placeholder-color',
   'input-text-prefix-color',
+  'input-text-prefix-trailing-space',
   'input-text-size',
   'input-text-suffix-color',
+  'input-text-suffix-leading-space',
   'input-text-weight',
   'label-text-color',
   'label-text-font',
@@ -91,13 +95,18 @@ $supported-tokens: (
   'label-text-weight',
   'leading-icon-color',
   'leading-icon-size',
+  'leading-space',
   'supporting-text-color',
   'supporting-text-font',
   'supporting-text-line-height',
   'supporting-text-size',
   'supporting-text-weight',
+  'top-space',
   'trailing-icon-color',
   'trailing-icon-size',
+  'trailing-space',
+  'with-label-bottom-space',
+  'with-label-top-space',
   // go/keep-sorted end
 );
 
@@ -123,7 +132,21 @@ $_default: (
   $tokens: validate.values(
     md-comp-filled-text-field.values($deps, $exclude-hardcoded-values),
     $supported-tokens: $supported-tokens,
-    $unsupported-tokens: $unsupported-tokens
+    $unsupported-tokens: $unsupported-tokens,
+    $new-tokens: (
+      'leading-space': if($exclude-hardcoded-values, null, 16px),
+      'trailing-space': if($exclude-hardcoded-values, null, 16px),
+      'top-space': if($exclude-hardcoded-values, null, 16px),
+      'bottom-space': if($exclude-hardcoded-values, null, 16px),
+      'input-text-prefix-trailing-space':
+        if($exclude-hardcoded-values, null, 2px),
+      'input-text-suffix-leading-space':
+        if($exclude-hardcoded-values, null, 2px),
+      'with-label-top-space': if($exclude-hardcoded-values, null, 8px),
+      'with-label-bottom-space': if($exclude-hardcoded-values, null, 8px),
+      // TODO(b/270705687): remove when focus-caret-color token added
+      'focus-caret-color': map.get($deps, 'md-sys-color', 'primary'),
+    )
   );
 
   $tokens: map.merge(

tokens/_md-comp-outlined-text-field.scss

@@ -16,6 +16,7 @@
 
 $supported-tokens: (
   // go/keep-sorted start
+  'bottom-space',
   'caret-color',
   'container-shape',
   'disabled-input-text-color',
@@ -50,6 +51,7 @@ $supported-tokens: (
   'error-outline-color',
   'error-supporting-text-color',
   'error-trailing-icon-color',
+  'focus-caret-color',
   'focus-input-text-color',
   'focus-label-text-color',
   'focus-leading-icon-color',
@@ -69,8 +71,10 @@ $supported-tokens: (
   'input-text-line-height',
   'input-text-placeholder-color',
   'input-text-prefix-color',
+  'input-text-prefix-trailing-space',
   'input-text-size',
   'input-text-suffix-color',
+  'input-text-suffix-leading-space',
   'input-text-weight',
   'label-text-color',
   'label-text-font',
@@ -81,15 +85,18 @@ $supported-tokens: (
   'label-text-weight',
   'leading-icon-color',
   'leading-icon-size',
+  'leading-space',
   'outline-color',
   'outline-width',
   'supporting-text-color',
   'supporting-text-font',
   'supporting-text-line-height',
   'supporting-text-size',
   'supporting-text-weight',
+  'top-space',
   'trailing-icon-color',
   'trailing-icon-size',
+  'trailing-space',
   // go/keep-sorted end
 );
 
@@ -114,7 +121,19 @@ $_default: (
   $tokens: validate.values(
     md-comp-outlined-text-field.values($deps, $exclude-hardcoded-values),
     $supported-tokens: $supported-tokens,
-    $unsupported-tokens: $unsupported-tokens
+    $unsupported-tokens: $unsupported-tokens,
+    $new-tokens: (
+      'leading-space': if($exclude-hardcoded-values, null, 16px),
+      'trailing-space': if($exclude-hardcoded-values, null, 16px),
+      'top-space': if($exclude-hardcoded-values, null, 16px),
+      'bottom-space': if($exclude-hardcoded-values, null, 16px),
+      'input-text-prefix-trailing-space':
+        if($exclude-hardcoded-values, null, 2px),
+      'input-text-suffix-leading-space':
+        if($exclude-hardcoded-values, null, 2px),
+      // TODO(b/270705687): remove when focus-caret-color token added
+      'focus-caret-color': map.get($deps, 'md-sys-color', 'primary'),
+    )
   );
 
   $tokens: map.merge(

tokens/internal/_validate.scss

@@ -95,7 +95,7 @@
 
   @each $token in map.keys($values) {
     @if list.index($supported-tokens, $token) == null {
-      @error 'validate.values($supported-tokens)) is missing the \'#{$token}\' token. Does it need adding to $unsupported-tokens?';
+      @error 'validate.values($supported-tokens) is missing the \'#{$token}\' token. Does it need adding to $unsupported-tokens?';
     }
   }