Ocean Design for Plasma – May Updates

Fixing Color Visuals, Exporting and Importing

We received multiple reports of problems when importing the Penpot library file. Users would see a Penpot instance crash upon loading our library.

One of our contributors noticed that there was a problematic graphic in the library that, when removed, did not make the Penpot instance crash.

I noticed that the graphic in question is a SVG export from Figma and contained calls that were not supported by Penpot. This color collection had a detail of all our Ocean colors and their gradients. I made the change to a png image instead so that the svg graphics from Figma in Penpot were no longer a problem.

The Ocean Foundations Penpot library is now updated and no longer crashes on import. Users are welcomed to update their libraries.

Penpot Additions

The Penpot library also contains a few new section headers so that it’s easier for users to understand what they are looking at. Please note that any sets that say “BASE *” means that they are parent components and are not needed for building components.

Base components are denoted by their name, it starts with a “_*”. This means, this is a parent component. Their purpose is to make it faster for designers to edit many components at once.

For example, a button has two versions “_Buttonbase” and “Button”. In this case, “_Button Base” is the parent componen and if you change the corner radius, all “Button” components will update accordingly.

There are always shared components than base components. Hence the need to accelerate component editing.

When you download our library, you can easily identify these components and make the changes that fit your design.

Updated Folder Icons for Legibility

In a previous iteration, I created folder clones from one size and mathematically shrunk them for another size. While this works, it’s not optimized. A few of the folder icons were like this and looked blurry, not sharp.

After remembering the need for work there, I adapted those folders and they are now published in the git page for Ocean. Places at 32px should now look more polished.

Progress with App Icons

DISCLAIMER: ICONS ARE NOT FINAL! THIS IS A PREVIEW!

App icons are moving along well. I recently picked them back up to continue the work after receiving some initial feedback. I have settled on a style based off subtle and soft gradients.

At the same time, previous versions of these icons seemed dull and lifeless, color-wise. I decided to look for better, more vibrant colors and this is where I landed. I also worked on better rounded shapes. Note that we are following 3 different ideas around these icons, icons with a round background, icons with a squared background, unbounded icons (Icons not anchored to a background shape). In this way, we have more ways to express the best icon idea we want to share.

I also realized that Qt does not support layer blend modes. I was using some of that in the icons to have an easier time adapting colors in borders and edges. I had to undo those and re-adapt the colors to not use blend modes. Maybe in the future Qt will have support for them.

Ocean + Union

Union is about to make its first appearance to the public as an engine. Plasma 6.7 will bring this to light. I have communicated with the Union team and we expect to work together after this first launch to begin creating Ocean components in code.

I tried working through building a Storybook using the Penpot MCP server but it seemed pretty convoluted and is not a documented process. I will keep trying and maybe just create the Storybook site manually.

Akademy Presentation

Akademy is once again on the horizon. I submitted a progress update talk about Ocean. I am hoping by then, we have actual Ocean UI components to show. We will work toward that.

See you all in September in Graz to celebrate our 30th year!

Relevant Links

YouTube Channel: https://www.youtube.com/anditosan

Invent Repo: https://invent.kde.org/abetts/ocean-design

Documentation: https://invent.kde.org/teams/vdg/issues/-/wikis/Ocean-Design—Overview-and-Details