Andy's Breeze would certainly be easier to get to as it only deviates somewhat from current Breeze and with a dash of more color and vibrancy from Pontaoski's set it would look really good. However, it would be more space inefficient when scaled down to smaller mobile sized displays.

I have a bias for my variation. However, having said that, I really like the differences shown in F8796068. It is soft yet the purple makes things very identifiable. I like it a lot. I personally feel like it's the stronger design. The ocean variation has my vote.

I vote for the bluer standard of Manuel.

Wait, do I get a vote? I think not.

TBH, I currently vote for Ocean, but, here's my take on things:

Base: Definitely the best one for non-skeuomorphic design, for sure. Generally looks nice all-around.

Andy Bett's Breeze Tweak: Meh... honestly the checkboxes kinda look pretty bad, being white and all, and the gradient is a little off-putting for me in them. Also something about those buttons just looks really meh to me.

Pontaoski's Skeuomorpho: If it wasn't for Ocean, I might've ended up voting for this one purely because it makes Breeze stand out in a good way in today's climate. Honestly, though, the general button design would potentially look really good on Ocean with Ocean's colours for checkboxes being used on buttons.

Pontaoski's Breeze Tweak: Meh. The buttons just look really bad IMHO with that type of shadow. They really don't look great.

Manueljiin's Ocean: Honestly the best design in my honest opinion. Like I said, Pontaoski's button design would be the only suggestion I really have to make about this design, right now. If anything, I kinda find the top-heavy shadows weird, but meh that's probably just skeuomorphism. Oh, and Current Knob FTW too on that Ocean design.

This is truly excellent work, everyone.

"Base", "Tweak", and "Ocean" are very similar to one another, differing mostly in colors for some elements. So it seems that there's general agreement on that style, while Skeumorpho feels like the odd one out to me. The widget style and extra depth to the controls itself seems okay-ish but I'm not in love with those slider handles. And adding shadows everywhere feels excessive to me. It feels less like an evolution of Breeze and more like moving in a different direction. Given that, I don't think it fits so well under the umbrella of a "Breeze Evolution" and I think we have to count it out or else remove or drastically reduce those shadows, at the minimum.

To get back to the other three, personally I feel like Ocean is visibly the most refined version. I really like its menu highlight effect compared to the base, in particular. However I'm not a fan of the yellow tooltip background. As for the slightly purple-ish accent color, while I really like that color in the abstract, I'm not sure it's the best for a default UI accent color. Maybe if it were a tiny bit bluer and less purple? I think moving towards the blue color in Andy's mockup would make Ocean feel amazing. But just a tiny bit.

So basically my vote would be Ocean, with a very very slightly bluer accent color, and dark tooltips.

Oh and Noah's tickmark slider handle FTW. :) That one looks so good to me.

In T13451#236356, @ngraham wrote:

However I'm not a fan of the yellow tooltip background. As for the slightly purple-ish accent color, while I really like that color in the abstract, I'm not sure it's the best for a default UI accent color. Maybe if it were a tiny bit bluer and less purple? I think moving towards the blue color in Andy's mockup would make Ocean feel amazing. But just a tiny bit.

So basically my vote would be Ocean, with a very very slightly bluer accent color, and dark tooltips.

Oh and Noah's tickmark slider handle FTW. :) That one looks so good to me.

Normal one for comparison:

Blue Ocean with dark tooltips (or even the light option) looks flawless to me. Man, that looks so, so, goog.

One idea I had about making switches clearer was to use the checkmark and X symbols instead of 1 and 0. Or even just use the checkmark symbol for the "on" state and don't have anything for the "off" state. I think I also had an ideas in the past about adding a little light into the center handle that illuminates when the switch is in its "on" state.

One other thing: what does the focus effect look like? Will the text field's focus effect be used for everything? If so, +1 :) I think that's a great style.

Here's an adjusted version of the skeuomorphic design emphasising my favourite elements of Breeze:

• The modest appearance with a few garnishes to keep it visually interesting
• Ease of rendering keeps performance high and snappy (only fills and outer borders are used for elevation, not computationally expensive gaussian blurs) and designs easy to adapt to various platforms

while improving it with:

• Lightly skeuomorphic garnishes with a modernist emphasis on depth and elevation for a well-aging design
• Larger interaction regions that play into KDE's goals of convergent design with controls that work well from bigscreens to smallscreens and everything in between

@cblack Reminds me a lot of the Adementary theme. I quite like yours.

Also, If trends are to follow, it's quite possible skeuomorphic design might make a slight comeback with Apple, and we all know whatever they do the industry copies. Andy Bett's Breeze with skeuo accent like cblack or pontaoski would look sleek.

I'm starting to like @cblack's revised Skeumorpho. I think it looks sleek and not visually overwhelming as some skeumorphic styles can be. There are a few other things I would change about it though before I think it could be considered:

• I think it would look better using the softer, more pastel colored blue accent color of @manueljlin's revised Blue Ocean.
• Use dark symbols in radio buttons/checkboxes etc, which will work if you use the lighter accent color as proposed above.
• The text input field looks too much like a button. I would revert those changes and make it look more like in Blue Ocean.
• Don't use such a dark background for the right side of the slider handles; do it more like Blue Ocean.
• I think that tabs should remain tab-like rather than using the macOS/ElementaryOS style pill tabs. And I really like those! But ultimately that's their style, not ours, and I think the tabs in Blue Ocean are more reflective of our style. In particular getting rid of the colored accent on the current tab removes a usability improvement in @manueljlin's blue ocean tabs (the colored accent is to help people figure out which tab is active when there are only two of them and the active/inactive styles are sort of similar) so I don't think we should do that.

Similarly, I think Blue Ocean would benefit from using the button, focus, and possibly tooltip styles from this revised Skeumorpho. I really like those. I think they're very sleek and attractive but not too heavy.

Not sure how I feel about the "ripples". Those are hover effects? Could be a good idea. Maybe needs more discussion.

Not sure how I feel about the "ripples". Those are hover effects? Could be a good idea. Maybe needs more discussion.

Those are basically invisible-until-you-hover paddings for the sole purpose of making controls larger and easier to click/touch without making them too visually heavy.

These two occupy the same space and have the same click target, but the one on the right looks oversized.

Here's something using the darker colour (#91CFFF) from the Ocean mockup.

The lighter colour (#C2E4FE) doesn't really work with a skeuomorphic style.

Thanks. It's interesting stuff, and I like it better than the original Skeumorpho, but I think I still prefer Blue Ocean (though I wouldn't mind if its buttons and focus style became more like yours).

Something like this?

Yeah pretty much! I still think the text field looks to metallic though. Possibly also the tab view but that's a judgment call. Eventually I should stop torturing your idea into to looking just like Manuel's :)

Maybe if the tabs and buttons were a bit closer to Poki's mock ups, particularly the white and gray shading.

One thing's that come up in VDG chat discussions is that some people would like to stay with the existing Plasma light blue highlight color which I would be fine with if everyone agrees.

We discussed this in today's VDG meeting and came to the same conclusions:

• Overall we want to use the latest Blue Ocean as a base. We want a tiny bit more skeumorphism compared to current Breeze, but only a tiny bit. Current Blue Ocean seems generally good for this.
• We like the use of subtle contrast lines in UI elements to separate a component's background from what's beneath it (e.g. in Sliders, around menus window edges, etc).
• With respect to colors, we would like to try to use the current Plasma Blue highlight color as the base accent color rather than choosing a new one.
• We want to make default buttons in Blue Ocean to look more distinctive by using the accent color for its background and maybe outline too.
• Accordingly, we would like Blue Ocean to change the look of pressed buttons to not use the accent color for the background, and generally look a bit more like in Fusional/Skeumorpho
• We want to use an accent color outline + mild glow as a focus effect for controls in the view (buttons, checkboxes, switches, text fields etc), as shown in Fusional and parts of Blue Ocean already
• List item highlight effects should be different from menu item highlight effects; the latest Blue Ocean shows a good style.
• We want to see mockups for list views like Dolphin's details view.
• We'd like all UI elements to have the same frame height of 32px tall. For controls with a visible frame like pushbuttons and text fields, that frame would be 32px high. For controls with an invisible frame/click area like checkboxes, radio buttons, and switches, the invisible frame/click area would be 32px tall. The idea is that each row would have a consistent height for the frames (visible or invisible) of all controls in the row.

And we are still working to come to consensus regarding the tooltip background color.

Hello :)
Just wanna drop my two cents.

First of all, i think that rounded bottom corners are a good idea. Not sure if these are already planned, but my experience using them has been pretty good. There is a 3rd party desktop effect here: https://github.com/alex47/KDE-Rounded-Corners as well as a fork that removes the rounded corners in fullscreen apps here: https://github.com/ciampolo/KDE-Rounded-Corners. I have been using it for a little while and since the rounded corners have such a small radius, i havent noticed it interfere with anything. Overall it definitely makes everything look cleaner and fits well with the ocean mockup imo. However, if implemented, this should definitely be a toggleable feature, just one that is enabled by default.

Secondly, i agree context menus should have the same rounded corners as windows too, and i like how they look in the latest mockup. (I also personally have the context menu opacity set to around 80%, which looks good imo, but im not sure how well it would mesh with the default breeze theme.)

I like the skeuomorphism on input fields and buttons in the ocean theme, but i feel like the accent colour shouldnt stay on toggleable buttons once you have moved your mouse away from the button itself (not sure if this is the case in the mockups). IMO it should become a simple outline or muted highlight if the button is toggled and you arent currently mousing over it, like this: (The gray highlight is one i selected earler, the blue highlight is a button which i am currently hovering my mouse over.

As for dolphin lists, i think the highlight on every 2nd line would look better if it didnt span the entire width and left some of the backgroud colour around the sides, similar to in macOS big sur:

I also think that the blue highlight around selected areas like in dolphin should either be removed completely, or simply made a bit thinner, like this for example:

I think that the gradient however dosen't work well on tabs, and tabs should look like they do in blue ocean.
(this one):

Tooltips should, in my opinion, be pretty much the same as context menus (if context menus are semi transparent, they should be too, and they should share the same colour, outline etc). I think sharing design for them makes sense, but i could see that getting weird if there is a tooltip for an entry inside a context menu.

To summarise (because whatever i typed above is probably a mess), All in all i think a combination of Blue ocean with the context menus and sliders from cblack's mockup with some semi-transparency/blur on popups like context menus etc along with the detail list style from macOS big sur, and rounded corners on all corners of the windows, would look really nice

Take what i said with a grain of salt since im by no means a ux designer but i just thought it would be worth throwing this in here.

Edit: oh and the default dark theme should be more black/gray and less blueish imo

I'm only a fan of rounded corners on the upper border of windows, make it an environment variable. Windows content looks off, maybe not now but when menubars and toolbars have a different color (in future updates) to the content area itself it'll make for an unbalanced design, another solution is adding a bottom border with the desired corners, in the color of the toolbars too. It would look good. So far it seems like some button elements will have a skeu look, and the UI itself will closely follow most of ocean blues design. I'm not entirely sure but it seems it's what most like. It seems like skeu elements could be making a mild comeback in other systems.

I think the current dark theme mock ups look good and might fit the skeu elements even better than the light theme.

@manueljlin can we get a mockup of Blue Ocean that uses the text field's focus ring for all focused controls? For hovered controls, we can still change the color of the border to blue, but for focused controls, I think it would be nice to use the same consistent focus ring effect for all controls.

Also how are we styling toolbuttons? What does the hover/pressed/state look like?

I've been staying out of this because I've just been feeling very negative about changes to the Breeze QStyle in general and I didn't want to spread that negativity, but I think I should talk.

The only things I strongly dislike are the lack of margins around the checkmark symbols and the gradients within the small controls, such as checkboxes, radiobuttons, sliders and switches.

Most themes seem to be rather soft and skeuomorphic. In general I like both flat and skeuomorphic. However I think it has to fit with the rest of UI elements around on a desktop at least up to some degree.

Currently unfortunately that does not seem to be the case. Thus I suggest to maybe start with a slightly less skeuomorphic and less soft approach and maybe evolve from there considering the other relevant UI elements if it is agreed upon the general style.

I agree with @clel. I think this has gone too far away from our current style.

As already written on the VDG chat, I prefer colors that stand out more. The current light approach of blue ocean feels to transparent to me.

Usage of more opaque feeling colors is in every design I found of different desktop environments and operating systems:

• Android: https://source.android.com/devices/tech/settings/images/settings-guidelines02.png
• iOS: https://www.iphonehacks.com/wp-content/uploads/2016/08/ios-10-music-downloads.png
• macOS: https://data.mactechnews.de/552089.png
• Windows: https://miro.medium.com/max/700/0*3yxZQzEtgRH6i6jM.png
• GNOME: https://www.gnome.org/wp-content/uploads/2017/09/settings.png
• Ubuntu Theme: https://raw.githubusercontent.com/ubuntu/yaru/master/.github/readme_pics/factory-def.png

Blue seems to be pretty much set as accent color given that KDE uses blue in its logo. I modified the blue ocean theme a bit to make it more flat and use more recognizable colors.

The Figma Mockup can be found here: https://www.figma.com/file/BJSZzGNxVw5EQHtdiCRdal/Adjustments?node-id=39%3A2 - It basically uses the blue oceant accent color but without any transparency applied. There was not that much work put into making everything look good, just for a first discussion.

Since people did not like the color I chose, I also went ahead and used less bright one (the one GNOME seems to use just as some starting point):

Also a brighter color more similar to the one in the KDE logo (looks even more like in a candy store):

Last one with Plasma blue according to https://hig.kde.org/style/color/default.html:

I added blue ocean to the description. Feel free to revert if the description is not thought to keep track of the current state of this task or some other reason.

Don't know whether there is a link to Figma with the current state of the design (if there is such central source of truth currently), might make sense to add it here.

Two possible issues I found for blue ocean are:

• No round corners for context menu check boxes
  
• Corner radius seems to be mostly 4px rather than 3 (see https://phabricator.kde.org/T13690)
  

In T13451#241348, @clel wrote:

I added blue ocean to the description. Feel free to revert if the description is not thought to keep track of the current state of this task or some other reason.

Thanks, that's helpful!

Also, since the dolphin mockup from https://phabricator.kde.org/T10891 seems to be some kind of design goal, I went ahead and used the design elements from blue ocean there.

Original (note there is a pretty low amount of skeumorphism or depth, look at the slider as an example):

With blue ocean elements:

In T13451#241354, @PhilipB wrote:

I'd propose to use the same radius as for the other elements. Currently with 4px that looks like

I've been using 4px radius for everything.

Sorry, I knew this had potential for misunderstanding. What I meant was keep the original design element for checkboxes in context menus and just change their radiuses to fit the rest of the style.

oh ok

This is my take on Manuel's mockup. I only changed a few things but kept the same color scheme.

Blue Ocean 3.0

• Checkmark now has the same padding as the three-dot/partial state
• Removed gradient from inset components on both blue and grey colors (Checkboxes, radio buttons, sliders, progress bars) as requested by Noah
• Tinted the selected text color to a very dark blue, also on buttons and the elements inside small components like checkboxes and radio buttons
• Used the normal text color on buttons instead of the lighter one from before. Now it has more contrast and is more consistent
• The gradient from the toolbar now stops one pixel before and shows the original lighter color before the dark divider. This is especially useful to add contrast to the dark colorschemes, and it doesn't look out of place on the light ones imho
• Colors are no longer slightly saturated with a blue tint; HSL values are used to keep the tone changes consistent from dark to light colorschemes by adding or removing 3 from a base color.
  • Light:
    • Titlebar: EDEDED HSL (0,0,93)
    • AppBG: F5F5F5 HSL(0,0,96)
    • ViewBG: FCFCFC HSL(0,0,99)
  • Dark:
    • Titlebar: 333333 HSL (0,0,20)
    • AppBG: 3B3B3B HSL(0,0,23)
    • ViewBG: 414141 HSL(0,0,26)
• Divider colors no longer use font color as a mix to get light dividers on dark themes. Ideally the colorscheme should have an option to change the color to dividers, but for now the divider color is obtained by lowering the HSL value from ViewBG -10.
• There was an issue with the titlebar divider: if an user sets the titlebar color to yellow, blue or other colors the gray divider would clash with it. This would probably be especially noticeable with the current breeze colorscheme and tweaked colorschemes of it like the one Fedora KDE ships with. This was fixed by making the divider pick the base color from the titlebar/tools area instead of the ViewBG and reducing HSL -10 there too.
• Fixed the rounded corners of tabs and the small two-item list on the example view
• The unselected tab bg from before used the titlebar/tools area color and that obviously wasn't going to work on anything other than this colorscheme. Now it too modifies the HSL value from the AppBG by reducing HSL to -3
• Increased contrast of the unselected tabs' text by increasing opacity to 70% of the normal text color. Uses the same color and opacity on the unselected text input boxes

1x:

In T13451#236598, @ngraham wrote:

We discussed this in today's VDG meeting and came to the same conclusions:

• With respect to colors, we would like to try to use the current Plasma Blue highlight color as the base accent color rather than choosing a new one.

I can replace it quite easily if you want but it might be a pita to implement with color mixing. Here's a quick edit with it:

• We want to make default buttons in Blue Ocean to look more distinctive by using the accent color for its background and maybe outline too.

By default you mean non-highlighted/selected?

• Accordingly, we would like Blue Ocean to change the look of pressed buttons to not use the accent color for the background, and generally look a bit more like in Fusional/Skeumorpho

Sure, I can do that too and share it to the VDG chat

• We want to see mockups for list views like Dolphin's details view.
• We'd like all UI elements to have the same frame height of 32px tall. For controls with a visible frame like pushbuttons and text fields, that frame would be 32px high. For controls with an invisible frame/click area like checkboxes, radio buttons, and switches, the invisible frame/click area would be 32px tall. The idea is that each row would have a consistent height for the frames (visible or invisible) of all controls in the row.

Sure, I'll do it this weekend

In T13451#241356, @clel wrote:

In T13451#241354, @PhilipB wrote:

I'd propose to use the same radius as for the other elements. Currently with 4px that looks like

That was a placeholder for icons, not checkboxes lol

In T13451#241704, @manueljlin wrote:

• Checkmark now has the same padding as the three-dot/partial state
• Removed gradient from inset components on both blue and grey colors (Checkboxes, radio buttons, sliders, progress bars) as requested by Noah

I like it.

Currently the blue color tone seems still to be too less saturated to me. Probably the opacity is rather low? Especially if one compares light an dark one notices that the tone of blue is very different and in both cases pretty weak.

Also I still can barely see the vertical highlight bar on the first option.

In T13451#241705, @manueljlin wrote:

In T13451#241356, @clel wrote:

I'd propose to use the same radius as for the other elements. Currently with 4px that looks like

That was a placeholder for icons, not checkboxes lol

Ah, now it makes sense. Nevermind then.

Hey @manueljlin can you send me your latest mock up on Telegram?

In T13451#241705, @manueljlin wrote:

In T13451#236598, @ngraham wrote:

We discussed this in today's VDG meeting and came to the same conclusions:

• With respect to colors, we would like to try to use the current Plasma Blue highlight color as the base accent color rather than choosing a new one.

I can replace it quite easily if you want but it might be a pita to implement with color mixing.

Done.

Both light and dark:

• Selected line: 80% opacity 3DAEE9
• Selected background: 35% opacity 3DAEE9
• Filled component background: 55% opacity 3DAEE9

Seems to work pretty well with Breeze but it might not work as well with other older colorschemes that expect to have full opacity with white text

• Accordingly, we would like Blue Ocean to change the look of pressed buttons to not use the accent color for the background, and generally look a bit more like in Fusional/Skeumorpho

Done. The gradient is a bit stronger on the dark one (15% instead of 5%) because it wasn't really visible anymore.

• We want to see mockups for list views like Dolphin's details view.

• We'd like all UI elements to have the same frame height of 32px tall. For controls with a visible frame like pushbuttons and text fields, that frame would be 32px high. For controls with an invisible frame/click area like checkboxes, radio buttons, and switches, the invisible frame/click area would be 32px tall. The idea is that each row would have a consistent height for the frames (visible or invisible) of all controls in the row.

Done. ish.
Changed buttons and tabs from 30px to 32px but I couldn't add that much click area (from 16px to 24px) to radio buttons, checkboxes, sliders and switches since it would probably break the spacing on KCMs

Also desaturated the text from the light colorscheme's text color

Current version

It looks delicious. Like the original iMac, I almost want to lick the screen.

I'm kidding. But you do excellent work.

I like the direction the theme heads towards.

In T13451#241712, @clel wrote:

Also I still can barely see the vertical highlight bar on the first option.

This is no longer a problem with the changed colors.

@manueljlin
White theme is gorgeous, but something is a bit lacking in a dark theme. It’s a lot less contrasty and a bit washed out.

Considering dark mode/themes are gaining popularity (and are power saving), getting them more pleasent should be noted.

They key things for them is to be:

• eye pleasant after prolonged use, without anything too bright, sticking out like a sore.
• clean and readable even on slightly less bright screens.
• productive in terms of wanting to look at your screen.

In the current case, highlighters should be a bit more pronounced, with a touch of more vibrancy and saturated color.
And a tooltip color might benefit from a totally different hue. Currently it’s mustardy-yellow-green and doesn’t look nice imo.

One thing to note is that the final product will be using the 5.21 colorscheme instead of the one shown in the mocks

Then it might be sensible to update the mocks to better reflect how the final product will look like? Or is it planned to change the colorscheme in the future to fit the one in the mockups?