feat(textfield): add tokens for customizing text field selection

PiperOrigin-RevId: 568270462
material-components · Sep 25, 2023 · c0768cb · c0768cb
1 parent c789c99
commit c0768cb
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 14 deletions.
diff --git a/textfield/internal/_shared.scss b/textfield/internal/_shared.scss
@@ -42,6 +42,12 @@
     resize: inherit;
   }
 
+  .textarea::selection,
+  .input::selection {
+    background-color: var(--_text-selection-background-color);
+    color: var(--_text-selection-color);
+  }
+
   @include icon.styles;
   @include input.styles;
 }
diff --git a/tokens/_md-comp-filled-text-field.scss b/tokens/_md-comp-filled-text-field.scss
@@ -96,6 +96,8 @@ $supported-tokens: (
   'supporting-text-line-height',
   'supporting-text-size',
   'supporting-text-weight',
+  'text-selection-background-color',
+  'text-selection-color',
   'trailing-icon-color',
   'trailing-icon-size',
   // go/keep-sorted end
@@ -123,14 +125,15 @@ $_default: (
   $tokens: values.validate(
     md-comp-filled-text-field.values($deps, $exclude-hardcoded-values),
     $supported-tokens: $supported-tokens,
-    $unsupported-tokens: $unsupported-tokens
-  );
-
-  $tokens: map.merge(
-    $tokens,
-    (
+    $unsupported-tokens: $unsupported-tokens,
+    $new-tokens: (
       // TODO(b/259455114): remove when focus tokens update to 3px
-      'focus-active-indicator-height': if($exclude-hardcoded-values, null, 3px)
+      'focus-active-indicator-height': if($exclude-hardcoded-values, null, 3px),
+      // TODO(b/231336988): remove when text selection tokens are added
+      'text-selection-background-color':
+        if($exclude-hardcoded-values, null, 'Highlight'),
+      'text-selection-color':
+        if($exclude-hardcoded-values, null, 'HighlightText')
     )
   );
 

diff --git a/tokens/_md-comp-outlined-text-field.scss b/tokens/_md-comp-outlined-text-field.scss
@@ -88,6 +88,8 @@ $supported-tokens: (
   'supporting-text-line-height',
   'supporting-text-size',
   'supporting-text-weight',
+  'text-selection-background-color',
+  'text-selection-color',
   'trailing-icon-color',
   'trailing-icon-size',
   // go/keep-sorted end
@@ -114,14 +116,15 @@ $_default: (
   $tokens: values.validate(
     md-comp-outlined-text-field.values($deps, $exclude-hardcoded-values),
     $supported-tokens: $supported-tokens,
-    $unsupported-tokens: $unsupported-tokens
-  );
-
-  $tokens: map.merge(
-    $tokens,
-    (
+    $unsupported-tokens: $unsupported-tokens,
+    $new-tokens: (
       // TODO(b/259455114): remove when focus tokens update to 3px
-      'focus-outline-width': if($exclude-hardcoded-values, null, 3px)
+      'focus-outline-width': if($exclude-hardcoded-values, null, 3px),
+      // TODO(b/231336988): remove when text selection tokens are added
+      'text-selection-background-color':
+        if($exclude-hardcoded-values, null, 'Highlight'),
+      'text-selection-color':
+        if($exclude-hardcoded-values, null, 'HighlightText')
     )
   );