Look & Feel Changes for Juno
--
If you thought we’d dropped off the face of the planet, you probably missed it: we have moved away from Medium and started publishing on our faster, open source, and privacy-respecting blog at blog.elementary.io. We’ve kept this blog post unlisted here on Medium for posterity, but all recent and future posts as of November, 2019 are exclusively hosted there.
While we’re scrambling to put the finishing touches on the impending Juno Public Beta, for this month’s progress post I’d like to talk a bit about some of the look and feel changes you can expect in elementary OS 5.
Expanded & Refined Color Palette
One of the largest foundational changes we made this cycle was to dial in our official color palette and expand it to include 5 shades per color.
This new expanded palette means greater consistently between our iconography and our stylesheet and gives our third-party app developer community a much better framework for making their apps feel native to elementary OS.
As of Juno, the elementary palette will be pre-installed by default as a .gpl file and ready to use in Inkscape and GIMP. We’re also adding color variables to our stylesheet so that you can use constants like @LIME_500 or @GRAPE_700 in your app’s custom styling.
Icon Changes
There has been an incredible amount of work done on icons this cycle. So far we’ve already changed over 850 icon files. This includes redesigns, new icons, updating icons to take advantage of the new palette and hinting icons to more sizes.
File type icons have especially seen some big changes recently. You can see that we’ve gone from a variety of styles with inconsistent colors to a more unified look with symbols that scale better to small sizes.
We’ve also introduced some new, development-related file type icons for things like translation files and programming languages.
There’s been a lot of work on increasing the consistency between icons at their various sizes and many icons are now fully-hinted in 6 sizes.
Updating all of these icons and filling in the gaps has been a huge effort and I’d like to give special thanks to Micah Ilbery, Sam Hewitt, Simon Steinbeiß, and many others for all of their hard work.
You can see the full diff of icon changes here on GitHub.
Stylesheet Changes
This cycle we made the massive leap from Gtk+ 3.18 to Gtk+ 3.22. For those not aware, this entailed what was nearly a full rewrite of the stylesheet. So a lot of work this cycle has gone into making sure that things look at least as good as they did in the previous release. However, we have taken time to put in a number of improvements.
One thing many users were asking us for was higher contrast. We’ve heard your feedback and you’ll see darker text and icons as well as more subtle gradients throughout the UI in the new version of elementary OS.
We’re always looking to add new features for developers so we’ve added a few new style classes: .terminal, .accent, and .mode-switch. The terminal class can be used for monospace terminal-like output, i.e. for logs in a developer-oriented app. The accent class allows you to easily and quickly color labels or images with your app’s accent color. The mode switch class reduces the size of the switch to match 16px icons, and removes the accent color highlight when the switch is toggled—this is great for when your switch reflects a change between two equal states (like light and dark mode) instead of enabling or disabling a feature. All of these new style classes will be available as Granite style class constants.
Speaking of accent colors, checkboxes and radio buttons are now drawn with CSS instead of images, so they’ll respect your apps’ accent color as well. This lets app developers weave a more consistent look and feel through their app without having to design completely custom widgets or assets.
We’ve also made it easier to add a colored background to scales, as seen in the new Night Light feature. You can now simply apply a gradient to the trough element like so:
Another minor change is that Gtk.InfoBars now include an icon that reflects their message type. We hope this change makes these messages more accessible for our users with color blindness.
We’ve also spent a lot of time on the dark style, fixing a number of issues reported and improving contrast. For example, you might notice that Scale widgets in particular are much more contrast-y and easier to see.
You can see the full list of commits and a diff on GitHub.
Wallpapers
Of course our selection of default wallpapers has also been updated with a few new backgrounds we think you’re really going to enjoy. Special thanks to Unsplash and the photographers who upload their photos there!
And Many Other Changes
This month we spent a lot of time on under-the-hood changes and optimizations as well as bug fixing, API fiddling, and performance tuning. We hope you enjoyed some pretty pictures while we take care of the boring stuff! We’re now up to over 650 closed issues associated with the Juno Beta milestone.
Juno is still under active development and we’re expecting to land even more fixes and optimizations before its big debut. Stay tuned to this blog for more highlights and announcements as we move toward the next major version of elementary OS. If you missed them, be sure to check out our previous posts about Juno:
Thank you to everyone who’s bought an app on AppCenter, our supporters on Bountysource and Patreon, and those who’ve purchased a copy of elementary OS or merch from our store. Every contribution helps make all of this possible, and we wouldn’t be here without you! If you’d like to help improve elementary OS, don’t hesitate to Get Involved!
