What?

The long-content-fade mixin expects the $color argument to be in RGB format, that is because it needs a way to get the zero-opacity version of that color.

This was done by interpolating the chosen $color (say #fff) with a rgba call, like rgba( $color, 0 ).

Why?

Though this works fine with raw RGB colors, it won't work with other color formats, nor with CSS variables.

How?

I'm moving from rgba( $color, 0 ) to transparent, which is essentially the same thing.

It shouldn't make any difference in the front-end, but it will improve the way we write CSS since now we're going to be able to pass other formats of colors, even variables, to that mixin.

transparent is well supported, so there's no need to use 5-year-old technology anymore.

Testing Instructions

Apply this branch to Calypso;

Still in Calypso: run yarn workspace @automattic/search run storybook. It should open Storybook. Go to the With Different Color story, type something in the search input and you should see something like that:

Notice how the fading effect at the edge of the search input is gone. This is because I'm using a CSS variable to style the <Search /> component.

Now, check out this branch in local Gutenberg, run:

cd <calypso>/node_modules/@wordpress
mv base-styles base-styles-bkp
ln -s <gutenberg>/packages/base-styles base-styles

So you have this PR's version of base-styles loaded in Calypso. I'm not sure why, but yarn link didn't work for me. When you refresh Storybook, you should see:

Notice how the edges are fading out and it indicates that there are more characters hidden.