Call for participation: an ubuntu default theme lead by the community?

As you said @Eskander the extracted color palettes is pretty hit and miss, so that’s not an option IMHO.

I really like this idea :+1:

I wonder if you can make the white background transparent? I did a mockup where opacity is at 15% (sorry, I got lazy and didn’t do all the icons in this mockup, but you get the idea).
This way we don’t touch the branding of the icon, we hint/imply the suru squircle to frame the icon and the squircle background works with any icon color.

2 Likes

This is also a really nice approach. Would be interesting to see how the opacity works on the (changing) launcher, when the squircles change on some apps and not others as the launcher darkens. When I picture it I think it would be fine?

Honestly, I’m a fan of what @madsrh suggested, as well as the idea of taking a prominent color like unity7 did. Although I think changing saturation values in script would probably be sufficient, I understand how it could still be problematic, so the half opacity is still a good alternative.

I did wanna bring up, though, that if some sort of automated squircleization happened, could we possible change the shape of the hover highlight, too? Rn it’s rectangular, but it’d be really cool if it was instead a squircle slightly bigger to feel like there’s an outline around the icon. Extending further, we could make the app drawer button significantly different and make it circular.

Could do a mock-up in a bit if people are interested.

1 Like

An even quicker mockup (sorry) with the primary colors but at 25% opacity:

I’m not sure that only targeting the icon is actually possible, but you’re right that the current hover isn’t perfect. IMO because the hover effect is almost identical to the icon grouping (like Utilities). This is also an upstream (read Adwaita) issue.

@madsrh I think my favourite is your original opacity, followed by the original script with white squircles.

Is it possible for @Eskander to run the script with the 15% opacity to show the launcher too? Very exciting times for Yaru IMO. This effectively makes the whole squircle dilemma vanish.

2 Likes

Maybe white with as small percentage of primary color

great work! I was experimenting myself, but my script is not so mature :smiley:

It looks that secondary color might be a better solution, maybe working with alpha level

I prefer a solid white background for all than the transparent one, otherwise I think that the difference from the other icons, which have all very solid colors, would be too much.

The scripting solution is promising but it requires some more effort and filtering. This is my attempt using only PIL library.

as @Eskander said, not all the icons are in the canonical folders, moreover some applications seems to have icon which size is not enough to produce well defined surufied icons. See as example HexChat vs Dropbox .

The best would be to have ha filter that creates the icon shadow, to improve the definition over a background color too similar to the icon color

5 Likes

@c-lobrano If you want solid colours, how about if the script does a HSV operation like:

  • identify the colour using your current method
  • reduce “S” to 30 out of 100 if it’s greater than 30
  • increase “V” by 30, to a maximum of 100 out of 100

…to make a lighter colour, for more contrast and less luridness? Using the colours from your screenshot as a starting point, that would give the following colours for the squircles:

Firefox:

image

GIMP:

image

Chromium:

image

Dropbox:

image

GParted:

image

Inkscape:

image

Clementine:

image

Builder:

image

Then if the script runs and the output doesn’t look great, tweak the formula?

5 Likes

I remember reading an article on OMG Ubuntu. It was about making the glossy icon highlight flat. If that is how Unity is treating backgrounds, we can use a single SVG as background and then try to add a colour to it.

This

https://www.omgubuntu.co.uk/2016/08/flat-unity-launcher-icons-flatify-script

1 Like

Unity 7 automatically insert icons into shapes.

Here you go, (script)

Screenshot-20181104194755-1366x768

and this one for transparent icons with primary colors: (script)

Screenshot-20181104194640-1366x768

Note, I’m using 50% opacity due to my limited image manipulation skills. If I set the value lower some noise around the edges would appear. Could anyone provide me with a white (#ffffff) 512x512 png Suru-like squircle for the background?

4 Likes

@Eskander Here’s a #ffffff version of the hi-res Suru squircle as exported from the template. That means it includes the border/slight drop shadow/transparent margin:

image

If you literally just want the shape of the Suru squircle then here it is in #ffffff. It’s a bit wider than it is tall so it’s actually 512x478:

image

…well that one’s obviously invisible on the white background, lol, but I promise it’s there - you can right click to save either of them. Does one of them give you what you need? Let me know if not, I can provide other Suru squircles :slight_smile:

EDIT: Damn, it flattens the transparency to white when I upload. If you save the second one it’s literally just a square of white. Let me know which you need and I can just e-mail you the pngs or something :slight_smile:

EDIT 2: Also, both of those look superb, bravo. I know there’s some discussion to be had around white vs colour and transparent vs solid, but even so, both screenshots represent a huge improvement in visual unity IMHO.

2 Likes

Can you send me the first one?

I can, do you want to PM me your e-mail?

1 Like

Using @jaggers’s first model (Thanks man!) and playing around with the fuzz value (whatever that means) I managed to get a pretty decent result: (15% opacity)

1

however with both models there’s still some border around the colored squircles (25% opacity)

3

3 Likes

I think I must drop PIL library, since it looks very bad at resizing the small images :frowning:
Using the squircle with border by @jaggers requires some more work, since the border needs to be recolored as well, but I expect the result to be way better :slight_smile:

1 Like

Similar results with Wand library. Some icons like gparted look horrible. I think its because they’re SVG.

Using these scripts to achieve a uniform look have too many flaws. It doesn’t work with snaps for starters.
Honestly I believe the optimal solution would be to create a GNOME Shell extension that adds the squircle shape for icons in the launcher. Dash2Dock extension already have a Unity-like backlit that maybe with some tweaking could become squircle shaped too.

@Eskander I think a shell extension probably is the optimal solution, but looking at these screenshots I feel optimistic that the script approach could be a very passable approach the meantime? It’s so close to being really great :slight_smile:

How it actually works is all a bit of a mystery to me - do the unwelcome edge artefacts appear when you add the opacity? If so, would it make the output cleaner if I provided a png of a semi-transparent squircle at the desired level of opacity? Then the script just has to superimpose the scaled non-Suru icon on top of it, rather than altering the opacity of the squircle.

One thing to note: in Suru, the hi-res version in the app grid and the smaller sizes used on the launcher, etc., have different squircles for pixel-perfect optimisation (specifically, the 48x48px version and below have “chunkier” highlights and no blur on the drop shadow). If we wanted to include the Suru edge details on the squircle then ideally the script would produce multiple pngs using multiple squircles. So for each non-Suru icon, it would make the different sizes individually with a different squircle for each size. There would be five squircles per icon (hi-res, then 48px, 36px, 24px, 16px).

Having said which, I think even having the ghost of a squircle around the non-Suru icons (i.e., the low opacity white shape with no detail) is a lot better than the current mixed approach in Ubuntu. In Eskander’s first screenshot, the overall “eye impact” is great. I guess Firefox is a little blurry and some of the squircles have scaled a bit “pixelly” on the launcher (or is that the upload?). But even if it isn’t optimal, it’s better than current presentation of non-Suru icons IMHO and just needs cleaning up a bit?

Lastly, this script only works on apps that don’t already have a Suru icon, if I understand correctly? If it gets to a point where most of the non-Suru icons look great but a few haven’t come out as nicely, we can manually do those ones and then the script won’t run on them?

EDIT: Actually, looking at the launcher, the semi-transparent white squircles aren’t exactly the same shape as the Suru launcher icons. I think that’s because we’re scaling down the hi-res squircle. It would be super-easy for me to provide the exact squircle shapes for each of the five icons sizes in white, already at the desired opacity (literally five minutes of a job). So, let me know if that would be helpful.

3 Likes

do the unwelcome edge artefacts appear when you add the opacity?

They appear resizing the images. In case of the squircle, we can fix it having a different squircle for each size, however the icon has to be resized to fit the squircle in any case

Unfortunately some icons are really bad. At this point, the script can be used only as helper to avoid manual work in some third party apps (but we have time to improve it).

1 Like