fix(textfield): focus indicator and outline are 3px

PiperOrigin-RevId: 557292273
material-components · Aug 15, 2023 · bbb7840 · bbb7840
1 parent 0c6655d
commit bbb7840
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 5 deletions.
diff --git a/tokens/_md-comp-filled-field.scss b/tokens/_md-comp-filled-field.scss
@@ -184,8 +184,8 @@ $_default: (
       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'),
+    // TODO(b/259455114): remove when focus tokens update to 3px
+    'focus-active-indicator-height': if($exclude-hardcoded-values, null, 3px),
     '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':

diff --git a/tokens/_md-comp-filled-select.scss b/tokens/_md-comp-filled-select.scss
@@ -141,6 +141,9 @@ $_default: (
   // Values pulled from b/198759625 spreadsheet
   @return (
     // go/keep-sorted start
+    // TODO(b/259455114): remove when focus tokens update to 3px
+    'text-field-focus-active-indicator-height':
+      if($exclude-hardcoded-values, null, 3px),
     // TODO(b/292242500): remove once we upgrade tokens
     'text-field-leading-icon-size': if($exclude-hardcoded-values, null, 24px),
     // go/keep-sorted end

diff --git a/tokens/_md-comp-filled-text-field.scss b/tokens/_md-comp-filled-text-field.scss
@@ -126,13 +126,15 @@ $_default: (
     $unsupported-tokens: $unsupported-tokens
   );
 
-  // TODO(b/271876162): remove when tokens compiler emits typescale tokens
   $tokens: map.merge(
     $tokens,
     (
+      // TODO(b/271876162): remove when tokens compiler emits typescale tokens
       'input-text-type': map.get($deps, 'md-sys-typescale', 'body-large'),
       'label-text-type': map.get($deps, 'md-sys-typescale', 'body-large'),
       'supporting-text-type': map.get($deps, 'md-sys-typescale', 'body-small'),
+      // TODO(b/259455114): remove when focus tokens update to 3px
+      'focus-active-indicator-height': if($exclude-hardcoded-values, null, 3px)
     )
   );
 

diff --git a/tokens/_md-comp-outlined-field.scss b/tokens/_md-comp-outlined-field.scss
@@ -166,7 +166,8 @@ $_default: (
     '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'),
+    // TODO(b/259455114): remove when focus tokens update to 3px
+    'focus-outline-width': if($exclude-hardcoded-values, null, 3px),
     'focus-supporting-text-color':
       map.get($text-field, 'focus-supporting-text-color'),
     'focus-trailing-content-color':

diff --git a/tokens/_md-comp-outlined-select.scss b/tokens/_md-comp-outlined-select.scss
@@ -143,5 +143,13 @@ $_default: (
     $unsupported-tokens: $unsupported-tokens
   );
 
+  $tokens: map.merge(
+    $tokens,
+    (
+      // TODO(b/259455114): remove when focus tokens update to 3px
+      'text-field-focus-outline-width': if($exclude-hardcoded-values, null, 3px)
+    )
+  );
+
   @return $tokens;
 }
diff --git a/tokens/_md-comp-outlined-text-field.scss b/tokens/_md-comp-outlined-text-field.scss
@@ -117,13 +117,15 @@ $_default: (
     $unsupported-tokens: $unsupported-tokens
   );
 
-  // TODO(b/271876162): remove when tokens compiler emits typescale tokens
   $tokens: map.merge(
     $tokens,
     (
+      // TODO(b/271876162): remove when tokens compiler emits typescale tokens
       'input-text-type': map.get($deps, 'md-sys-typescale', 'body-large'),
       'label-text-type': map.get($deps, 'md-sys-typescale', 'body-large'),
       'supporting-text-type': map.get($deps, 'md-sys-typescale', 'body-small'),
+      // TODO(b/259455114): remove when focus tokens update to 3px
+      'focus-outline-width': if($exclude-hardcoded-values, null, 3px)
     )
   );