Base Styles: Apply long-content-fade gradient from transparent to color
#42401
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size Change: 0 B Total Size: 1.25 MB ℹ️ View Unchanged
|
5 tasks
vykes-mac
approved these changes
Jul 13, 2022
cbravobernal
added
the
[Type] Code Quality
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
The
long-content-fademixin expects the$colorargument 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 argbacall, likergba( $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 )totransparent, 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.
transparentis 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 theWith Different Colorstory, 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:
So you have this PR's version of
base-stylesloaded in Calypso. I'm not sure why, butyarn linkdidn'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.