Search: match edge fade color with --color-surface variable

[zaguiini]

Proposed Changes

Setting the --color-surface variable in the <Search /> component styling doesn't change the color used in the edge fading gradient at the end of the input:

This PR fixes that by matching the color of the --color-surface variable in the long-content-fade mixin call:

Testing Instructions

Install dependencies and run yarn workspace @automattic/search run storybook. Check the "With Different Color" story and type a few characters so it overflows the container. The content should fade to the red background instead of white.

Pre-merge Checklist

Complete applicable items on this checklist before merging into trunk. Inapplicable items can be left unchecked.

Both the PR author and reviewer are responsible for ensuring the checklist is completed.

• Have you written new tests for your changes?
• Have you tested the feature in Simple, Atomic, and self-hosted Jetpack sites?
• Have you checked for TypeScript, React or other console errors?
• Are we memoizing when appropriate (for expensive computations)? More info in Our Approach to Data and Memoizing with create-selector and Using memoizing selectors
• Have we sent any new strings for translation ASAP?

Related to #65505 (comment).

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-39337

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-39337&env=jetpack

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[vykes-mac]

Works as expected, Tested in the gutenberg fix also.

[wojtekn]

Looks good, works as expected. Note for testing steps - the Gutenberg branch is merged now, so we should use trunk when we prepare base-styles for Calypso for testing purposes.

[matticbot]

This PR modifies the release build for editing-toolkit

To test your changes on WordPress.com, run install-plugin.sh editing-toolkit update/search-fade-use-css-variable-as-color on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-mMA-p2

[noahtallen]

Pixel peeping a bit, I see small indents from the right and left elements along the top and bottom edges. I think this was already the case before, though. If it's an easy fix, might be worth adding!

I assume we have to also use #65598 to have the fade-out working correctly!

[zaguiini]

Great catch, @noahtallen! That's fixed, please re-review the PR!

[noahtallen]

It's looking a lot better! I did notice one bug we should probably fix:

Screen.Recording.2022-08-08.at.1.21.21.PM.mov

If you type in long text, the final characters (and the typing cursor) get hidden and you can't see what you're typing anymore.

[zaguiini]

I see @noahtallen. It doesn't look like a bug, but definitely needs some love. Could you please create a separate issue for that?

[noahtallen]

#66364