Update breeze theme shadows
Needs ReviewPublic

Authored by niccolove on Mon, Oct 28, 8:35 PM.

Details

Reviewers
None
Group Reviewers
VDG
Summary

I have received negative feedback (and I agree with it) on the current state of breeze shadows: they are quite dark, narrow, and feel unnatural. I tried to adress that by making shadows more sparse and a bit lighter especially on the angles while trying to keep it distinguishable when on white background. I received some positive feedback on these shadows from T10891 and the VDG channel. More specifically, I changed dialogs/background.svg to have a) longer linear gradients and b) radial gradients instead of linear on the four sides to make the center darker than the angles.

Test Plan



Diff Detail

Repository
R242 Plasma Framework (Library)
Branch
bettershadows (branched from master)
Lint
No Linters Available
Unit
No Unit Test Coverage
Build Status
Buildable 18882
Build 18900: arc lint + arc unit
niccolove created this revision.Mon, Oct 28, 8:35 PM
Restricted Application added a project: Frameworks. · View Herald TranscriptMon, Oct 28, 8:35 PM
Restricted Application added a subscriber: kde-frameworks-devel. · View Herald Transcript
niccolove requested review of this revision.Mon, Oct 28, 8:35 PM
niccolove retitled this revision from I have received negative feedback (and I agree with it) on the current state of breeze shadows: they are quite dark, narrow, and feel unnatural. I tried to adress that by making shadows more sparse and a bit lighter especially on the angles while... to Update breeze theme shadows.Mon, Oct 28, 8:44 PM
niccolove edited the summary of this revision. (Show Details)
filipf added a subscriber: filipf.Mon, Oct 28, 9:11 PM

Testing it. Usability wise the strength is perfectly fine; the shadows still do their job.

Visually it's a definitive improvement for me.

Only thing I'm not sure of is the weaker strength in the corners, but I'm going to keep testing to see if it's just a matter of getting used to it.

If anything I wonder if we should make them bigger too, to better match the default Breeze shadows.

If anything I wonder if we should make them bigger too, to better match the default Breeze shadows.

I'd prefer to avoid them making more sparse because a) they look worse to me when applied to small objects such as notifications (you have big shadows for a relatively small item, they don't give the impression to be casted by that item) b) lots and lots of techical problem when trying to change shadow size :-/

I hope this gets approved so T10470 doesn't look awkward with thin and dark shadows

Any update on this? I can also upload the shadow for the panel.

filipf added a comment.Wed, Nov 6, 8:10 PM

I'd prefer the shadows to have equal strength all around, I couldn't get used to weaker shadows in the corners.

ndavis added a subscriber: ndavis.Wed, Nov 6, 9:06 PM

I haven't said much about this idea because I just have a hard time seeing the difference from the screenshots. It seems like a good amount of effort went into this, and I know from experience that adjusting shadows in Inkscape is a major PITA, but I can't approve something just because of that. Maybe we're using the wrong approach for shadows in the first place?

I haven't said much about this idea because I just have a hard time seeing the difference from the screenshots.

I must admit having the same problem. :)

filipf added a comment.Thu, Nov 7, 7:37 AM

There's definitely a difference, whereas the shadows are now rough and dark this is subtler.

I'd suggest testing this patch with a light color scheme and then switching to the unpatched theme plus testing against light backgrounds to notice the changes.

filipf added a comment.Thu, Nov 7, 7:40 AM

Before:

After:

Ah, pixel-perfect before-and-after images make it much easier to see. I will reiterate my belief that the shadows now need to be bigger if we're going to make them lighter and weaker.

ndavis added a comment.Thu, Nov 7, 9:11 PM

I see the difference now as well. @niccolove BTW, the top right corner is a bit messed up. It's rising above the rest of the shadow on the top edge.

Rather than painstakingly making shadows by hand in Inkscape, perhaps we should be using KWin for the shadows?

I'd prefer the shadows to have equal strength all around, I couldn't get used to weaker shadows in the corners.

Oh! That's a pity, I really liked them. I will update it as soon as I have time.

Ah, pixel-perfect before-and-after images make it much easier to see. I will reiterate my belief that the shadows now need to be bigger if we're going to make them lighter and weaker.

Uhm, I will try something and get back to you.

Rather than painstakingly making shadows by hand in Inkscape, perhaps we should be using KWin for the shadows?

Remember that there are third party desktop themes with SVG that we probably want to support. Wouldn't using KWin for shadows break those?

I'd prefer the shadows to have equal strength all around, I couldn't get used to weaker shadows in the corners.

Oh! That's a pity, I really liked them. I will update it as soon as I have time.

Ah, pixel-perfect before-and-after images make it much easier to see. I will reiterate my belief that the shadows now need to be bigger if we're going to make them lighter and weaker.

Uhm, I will try something and get back to you.

Rather than painstakingly making shadows by hand in Inkscape, perhaps we should be using KWin for the shadows?

Remember that there are third party desktop themes with SVG that we probably want to support. Wouldn't using KWin for shadows break those?

If we remove the code for using those SVG shadows, it won't break them in the sense that they will stop working. It'll just mean those parts of the desktop themes won't be used. I suppose that could be seen as a form of visual breakage.

For complete theme sets, this shouldn't be such a problem since they also typically come with their own window decorations and recommend a specific widget style. For people who just want to get rid of the shadows we should probably provide an option somewhere to disable them rather than making them edit the plasma theme. I suppose we could wait until Plasma 6 to make that kind of change, but that's a ways away.

Regardless of the method we use to achieve it (including continuing to use SVGs), I think it might be best to make Plasmashell's shadows match the shadows cast by menus (such as context menus) in applications. These are defined in the Breeze widget style and have different sizes to match the different window shadow sizes.

ndavis added a comment.EditedSat, Nov 9, 11:36 PM

One thing we might need to do in order to finally stop changing the shadows is come up with a math based system for deciding how shadows should look based on the elevation we want certain UI elements to have. We could copy Material Design shadows, but I don't think we should. MD's shadows get darker the larger they are, but that's not how real shadows work. Real shadows get darker the smaller they are because light bounces around.

cblack added a subscriber: cblack.Sat, Nov 9, 11:39 PM

One thing we might need to do in order to finally stop changing the shadows is come up with a math based system for deciding how shadows should look based on the elevation we want certain UI elements to have. We could copy Material Design shadows, but I don't think we should. MD's shadows get darker the larger they are, but that's not how real shadows work. Real shadows get darker the smaller they are because light bounces around.

Material shadows get more voluminous, not darker.

One thing we might need to do in order to finally stop changing the shadows is come up with a math based system for deciding how shadows should look based on the elevation we want certain UI elements to have. We could copy Material Design shadows, but I don't think we should. MD's shadows get darker the larger they are, but that's not how real shadows work. Real shadows get darker the smaller they are because light bounces around.

Material shadows get more voluminous, not darker.

Well, they look darker, which still isn't realistic: https://material.io/design/environment/light-shadows.html#shadows

Remember that there are third party desktop themes with SVG that we probably want to support. Wouldn't using KWin for shadows break those?

If we remove the code for using those SVG shadows, it won't break them in the sense that they will stop working. It'll just mean those parts of the desktop themes won't be used. I suppose that could be seen as a form of visual breakage.

For complete theme sets, this shouldn't be such a problem since they also typically come with their own window decorations and recommend a specific widget style. For people who just want to get rid of the shadows we should probably provide an option somewhere to disable them rather than making them edit the plasma theme. I suppose we could wait until Plasma 6 to make that kind of change, but that's a ways away.

I'm against this; there are many desktop themes that tweak their shadows without being a theme set, and it would be an important regression to ignore them.

Regardless of the method we use to achieve it (including continuing to use SVGs), I think it might be best to make Plasmashell's shadows match the shadows cast by menus (such as context menus) in applications. These are defined in the Breeze widget style and have different sizes to match the different window shadow sizes.

This is interesting. I have to look more into it.

Meanwhile, I tried to do a more sparse and equal-all-around shadow (to address Nate+Filip), but I'm not 100% okay with it. Opinions?

Meanwhile, I tried to do a more sparse and equal-all-around shadow (to address Nate+Filip), but I'm not 100% okay with it. Opinions?

Hmm, that shadow feels too "hard," somehow. It feels like it ends rather abruptly rather than fading out smoothly.

This is what you think ends too early (for comparison):


What do you think of:

What do you think of:

That feels smoother.

niccolove updated this revision to Diff 69820.Fri, Nov 15, 7:13 PM

Updated to new shadows

niccolove edited the test plan for this revision. (Show Details)Fri, Nov 15, 7:15 PM

Do these shadows get cached or something? When I build the diff and restart plasmashell, the shadows I see are identical, pixel-for-pixel.

Do these shadows get cached or something? When I build the diff and restart plasmashell, the shadows I see are identical, pixel-for-pixel.

I don't know. But you can manually change them by replacing the .svgz in /usr/share/plasma/desktopthemes/default/ dialogs/background.svgz and widgets/panel-background.svgz with the new svg.

Okay, after you taught me how to delete the cache files rm ~/.cache/plasma*, I can see other changes to the plasma theme SVG files but I must admit I still don't see a difference between the old and new shadows in this patch. :/

This is a comparison:


The problem is not that you don't see, it's that it doesn't show. I'll try to understand what's going on and get back to you.

niccolove updated this revision to Diff 69886.Sun, Nov 17, 5:44 PM

Updated breeze shadows

niccolove added a comment.EditedSun, Nov 17, 5:45 PM

Finally! I'm 100% this works now.

This is a comparison:


The problem is not that you don't see, it's that it doesn't show. I'll try to understand what's going on and get back to you.

Please refer to the comparison to see the difference now that this patch works, although I think it's quite noticeable :-)

Yep, can confirm that it works now. It is indeed a more subtle and pleasing effect. I still think the distance away from the window would be lengthened to make it even nicer-looking. :) But if nobody else agrees, I'm okay with this in its current form.