Try using shadows instead of borders on interface skeleton #42282
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: +27 B (0%) Total Size: 1.25 MB
ℹ️ View Unchanged
|
talldan
added
General Interface
|
+10, the shadow version is noticeably easier on the eye. Light gray borders with dark backgrounds are a common design flaw that goes largely unpunished, I'm astonished to find someone who also notices that. |
|
This is delightful attention to details, thank you! I have a slight preference for what exists. The way the gray border changes hue from the list view and across the content in this example feels like noise, and makes it unclear where the content begins vs. what's user interface:
I.e. if I had a minimal design with a powerful red 1px spot color border at the top of my website, perhaps as a loading or reading indicator or otherwise, presumably it would be covered by the faced border? This is just personal preference, not a blocker if others are over the moon. One thing that would need addressing, though, is high contrast screen modes (notably in Windows 10/11). In those modes, all shadows are removed, which would remove the appearance of borders across the interface. One solution we've employed in the past (you can search for "high contrast mode" in the codebase for examples) is to keep a transparent border next to the shadow border, because all such borders are made fully opaque in high contrast. |
|
Closing in favor of #61835. |
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?
Replaces gray interface skeleton borders with opaque shadows, which tightens up the UI when darker background colors are used.
Why?
This PR explores using box-shadows instead of borders on the interface skeleton, to tighten up the interface on sites that have darker background colors. Currently if the background color of the site is darker than the border, you end up with a slight distortion around the edges of the interface.
By using shadows, we can maintain an edge with lighter backgrounds, but on darker backgrounds (where the edge is already defined by the background color) it's sharp - instead of distorted.
How?
Replacing borders with box shadows.
Testing Instructions
Before
Notice the distortion around the gray borders against the colored background:
But there is distortion on lighter backgrounds:
Zoomed in:
After
No distortion around the edges of the interface:
Zoomed in:
Borders with lighter backgrounds still look as they do today: