diff --git a/textfield/internal/_shared.scss b/textfield/internal/_shared.scss index adca102cf9..35132fb78d 100644 --- 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 index d2f7ef8086..c481a7b815 100644 --- 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 index 0690bfc9c6..3cfa4579ed 100644 --- 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') ) );