List View: Update the hover, focus, select colors #30303
Merged
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
Copons
added
the
[Feature] List View
|
Size Change: -449 B (0%) Total Size: 1.42 MB
ℹ️ View Unchanged
|
|
I updated the outlines to 1.5px to match other menus. It feels a little heavy-handed, but I think the consistency may be worthwhile. We can address the heavy-handedness more holistically if need be. |
|
@Copons could we try setting the child block background color to a lighter version of the primary? That will set us up nicely for when we add other colors for template parts / reusable blocks:
|
jasmussen
reviewed
Mar 29, 2021
|
@jameskoster 8cd8539 uses a 90% lighter primary color for the selected children background. Also, I couldn't use the Here is how it looks like with some admin themes:
|
|
We should use the colors Jay provided, and let's avoid introducing new CSS custom properties if we can. Here's a way you can create a lighter version of the blue spot color without creating a variable for it: https://codepen.io/joen/pen/gOgwwjX?editors=1100 |
Let me rewind and rephrase 😅 — the colors Jay provided are optimized for the "Modern" theme. That is, the blue comes with that by default, and the green and purple are additions. Green and purple should remain as is for the other themes, but the blue will obviously be different based on the color theme chosen. Those color schemes are rather old, and have a great deal of known accessibility issues in the rest of the admin, so we should write as little extra code as possible to handle those. |
Thanks @jasmussen, I've just pushed a multiple gradient solution! 🙂
Those are related to the block type (standard block, template part, reusable block), while the colors shown in my screenshots come from different admin themes, as chosen in the user settings.
Green and purple are just coincidences. We might want to update those admin colors, or prevent them to reach the editor, but this isn't the right place. 😅 |
|
Thank you!
Exactly, we need to refresh those color schemes. I think it's fine you get two shades of purple when you use template parts and ectoplasm together, in the mean time. |
|
BTW added a screenshot for the Modern theme! 👍 (And TIL those colors are from Modern!) |
jameskoster
approved these changes
Mar 30, 2021
There was a problem hiding this comment.
The styles match what we have in Figma so I'm happy to approve from the design side.
Copons
changed the title
gziolo
added
[Type] Experimental
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.
Description
This PR experiments on the List View colors, hoping to make them more clear.
How has this been tested?
Screenshots
Mar-26-2021.17-10-44.mp4
Types of changes
New feature (non-breaking change which adds functionality)
Checklist:
*.native.jsfiles for terms that need renaming or removal).