Interesting, it would even be a little better if the squircle background can be checked according to the preminent icon color (like Unity did)
It is basically a python script that checks
/usr/share/icons/hicolor/*/apps for icons that are not already part of Yaru, then use an ImageMagick python library to generate new squircle icons under
~/.local/share/icons/. The script is called every time I install a new package from
apt to ensure new icons get reshaped.
There are some limitations like ImageMagick not handling SVG icons correctly which cause a quality drop (another library is probably needed), also some apps (especially proprietary) don’t store icons in
I believe I can do that when I have some time.
Based on your suggestion, I extracted color palettes from the icons separately, and each time tried to apply a different color to the squircles. These are the results so far:
Applying the primary color of the icons to the squircles:
Using the secondary color:
The results are quite random with some icons looking better than the others each time. I don’t know how Unity used to do things but its clear this is not the right way. I appreciate any suggestions.
Here’s the link if anyone wants to experiment with the script too:
I vote for the squircles script!
EDIT: Tbh if @Eskander can incorporate a complementary background colour too then we don’t even need the Libre office icons.
Great start @Eskander - how about picking the colour and then turning it into a pastel shade? Perhaps pick one of the values in the colour (the “white” if these were paints) and then set it to midway between the original value and maximum? Then refine the formula if the end result is too pale or still too dark and maybe bring other values like saturation into the process…
EDIT: Whatever script is used we can manually edit the ones where the colour isn’t great (or we can use the white script as a fallback and manually choose colours for key apps like Libre Office). It’s still a massive time-saver and great for consistency in the UI!
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
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.
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.
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.
Maybe white with as small percentage of primary color
great work! I was experimenting myself, but my script is not so mature
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
@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:
Then if the script runs and the output doesn’t look great, tweak the formula?
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.
Unity 7 automatically insert icons into shapes.
Here you go, (script)
and this one for transparent icons with primary colors: (script)
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?
@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:
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:
…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
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
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.
Can you send me the first one?
I can, do you want to PM me your e-mail?