This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
Make loading placeholder colors match the current font color #7658
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
Currently, the loading placeholder effect has a default gray color. However, since users can modify their themes with the Site Editor and choose a different set of colors for their websites, it would be interesting to make those placeholders match the color palette. In this commit, the idea was to modify the `placeholder` mixin to replace the transparent font color with the current color and also modify the background-color and the linear-gradient to match the current font color. Furthermore, transparency was added to the middle color of the linear-gradient so we can keep the loading animation close to what it currently is.
|
The release ZIP for this PR is accessible via: |
TypeScript Errors ReportFiles with errors: 432 🎉 🎉 This PR does not introduce new TS errors. |
Script Dependencies ReportThere is no changed script dependency between this branch and trunk. This comment was automatically generated by the |
|
Size Change: -46 B (0%) Total Size: 991 kB
ℹ️ View Unchanged
|
Aljullu
reviewed
Nov 11, 2022
There was a problem hiding this comment.
Thanks for working on this, @thealexandrelara!
I have a couple of comments:
-
The filter titles don't seem to follow the current color. I think it's because of this line. I guess it can be removed? 🤔
-
I do think we should play around with the opacity. Otherwise, placeholders look very dark in light themes with a dark font. You can see how the placeholders looks in Storefront in
trunkand this branch:
trunk |
This branch |
|---|---|
 |
 |
Before our changes, when the font color was dark, we had a lighter placeholder background color. After the changes the color is currently darker than before so the idea for this commit is to change the opacity of the placeholder in a way that the current color blends with the background color set for the theme.
|
Thank you for your review and suggestions. About what you said:
I did what you suggested and removed that line and the background-color as well, so now the title placeholder is following the placeholder mixin.
I just changed the opacity to |
Aljullu
approved these changes
Nov 15, 2022
There was a problem hiding this comment.
Thanks for updating this PR and working on this, @thealexandrelara. It looks great!
Personally, I would reduce the placeholder opacity still a bit more, from 0.3 to something like 0.15. Otherwise in some themes the placeholders are still a bit too dark IMO (ie: Twenty Twenty Three with white background and black text).
But besides that, LGTM, so pre-approving.
After testing different combinations of colors, we decided to change the opacity to 0.15 so when the font color is darker the placeholder will have a lighter background color.
Awesome, thank you for your suggestion, I just changed the opacity from 0.3 to 0.15 :D |
thealexandrelara
deleted the
style/make-loading-placeholder-colors-to-match-current-font-color
branch
danieldudzic
added
the
type: enhancement
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
Currently, the loading placeholder effect has a default gray color. However, since users can modify their themes with the Site Editor and choose a different set of colors for their websites, it would be interesting to make those placeholders match the color palette.
Changes
The idea was to modify the
placeholdermixin to replace the transparent font color with the current color and also modify the background-color and the linear-gradient to match the current font color. Furthermore, transparency was added to the middle color of the linear-gradient so we can keep the loading animation close to what it currently is.Fixes #7526
Screenshots
Testing
User Facing Testing
Changelog