SCSS mixins: long-content-fade to apply gradient from transparent to color

[zaguiini]

Proposed Changes

Sync our version of long-content-fade with Gutenberg's.

This PR will be good to go once the next version of @wordpress/base-styles is merged. This PR will also bump the package's version.

Testing Instructions

Open Calypso, click Switch Sites and you should see the gradient working on the edge for long site URLs. Amazingly, this does not work on trunk:

This PR	trunk

Related to #65505 (comment).

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-39159&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 you described, I had tested the gutenberg one before also. The screenshots almost had me fooled 😅 . I was looking at the search bar wondering whats the difference, it draws the attention because its highlighted.

[wojtekn]

Looks good and works as expected. Just a note - currently the other branch has a conflict. I needed to solve conflicts after merging update/search-fade-use-css-variable-as-color to this one.

[matticbot]

This PR modifies the release build for editing-toolkit

To test your changes on WordPress.com, run install-plugin.sh editing-toolkit update/long-content-fade-from-transparent-to-color on your sandbox.

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

[noahtallen]

This tests well for me. 👍

Why can't we use the Gutenberg version directly, though?

[zaguiini]

For a couple of reasons, @noahtallen:

1. Gutenberg's version is inside a file called _mixins.scss that exposes a bunch of other mixins, some that would probably clash with the ones used in Calypso;
2. Despite the implementation being exactly the same, the default value for the color argument differs. Gutenberg's is #fff while Calypso's is var( --color-surface-rgb ). This might be potentially problematic as we would need to go through all cases where this mixin is used to understand better the implications and compare the output.

It can be done, but I'd prefer to do that on a separate PR. We'd first need to isolate the long-content-fade mixin from Gutenberg and that'll take a while since the package was released a few days ago. Created an issue: #66350.

[noahtallen]

Cool! That makes sense to me.

One thing that comes to mind is that the way Sass imports work will be changing in the near future. I believe that Gutenberg is not yet compatible with the new approach, nor is Calypso. But in the new system, imports are now namespaced, so using just one mixin by itself should be possible without impacting any other mixins.

Upgrading Gutenberg and Calypso to support that has been on my todo list for a while, but there have been other priorities :)