Penpot WebGL and BugfixesPenpot and WebGLPenpot released their WebGL rendered (beta) for all users to test. This brought speed gains in rendering content on page and less lag when navigating. Frame rate was worked on and the overall interface appears faster. Pages load much faster than before, though there are still some rough edges. Overall, this is a gain for Ocean given it is a large design system.This change also brought a sleuth of new bug reports for Penpot, you can see them here: https://github.com/penpot/penpot/issues?q=is%3Aissue%20state%3Aopen%20label%3A%22IOP%20render%22We also experienced a few issues around speed, borders missing, and incomplete rendering. Those were reported promptly.From what I can see in their development page, there is going to be a 16.1 release with a few fixes for the rendering engine that should address the most pressing issues around speed and rendering accuracy.Issue with boolean shapes and Penpot crahesIt seemed for some time that the Penpot file for Ocean was crashing constantly. I wasn’t sure what the problem was but whenever there was an update to the tokens, the system would record the change and then crash.After reviewing some of the error messages, it seemed that the problem was derived from shapes containing boolean operations. For example, the Date Picker component has a cutout circle (A difference boolean operation) to form the circular shape that highlights the current day. Those components appear left and right of the circular shape. Like half moons. These shapes were not flattened, they retained their boolean operation.This is generally not an issue at all but it appears it was in Penpot. Once I identified the shapes with the boolean properties, I flattened them all to make sure they were no longer a problem, and then boom! The problem was gone.However, one reason for keeping boolean operations in the components and not flattening is so that other designers can understand how some components are built and also have greater control over their design. When you flatten shapes, this makes it so that you loose the “how” a shape is built.Even though crashing is resolved, it’s important to note that adding, editing, and removing tokens can take a long time.Issue with Input Fields and Badges Set to StaticWhenever one changes the base component at the root of the component, it seems that propagation is not always clean and some aspects of the component do not update as they should. Some values tend to go back to being static when you mean for them to use the fill or hug property.It appears that some recalculations do not always yield the right result on the components.They are aware of these problems and are working to address them.This issue happened in some components where the text fields inside a nested component were suppose to have the fill property, but in their wrapped component setup, the base component text field showed static. This made is so that input fields looked longer than they should have inside other bigger components.It took me a minute to update them all but it seems that now the input fields and badges should behave properly.After putting all these fixes in, I uploaded a new version of the Penpot file into gitlab so that others can update.Figma Icon FlatteningWe still have the issue that we can’t bring our icons to Penpot just yet. As we build more and more UI concepts for Ocean inside Penpot, we need to rely on our new Ocean icons to make sure they convey the right message in context.I went back to the Figma file this week and created a copy of our monochrome icons and started the process of flattening them. This makes it so that it’s just a shape without layers or boolean operations. Just a raw flat svg file.This type of operation is supported in Penpot, though we lose the fine control.My desire is to bring some, if not all, of our monochrome icons into Penpot, even if they are flat, so that we can use them throughout our component UI more effectively.I am still exploring whether this is a good idea overall but this should add a few more images to the Penpot file. Expect the Penpot library to grow. This is an experiment to see how Penpot will handle this influx.App Icons ProgressProgress is moving slowly but surely. I went through a round of feedback review as I posted some of the icons into the VDG channel and also asked Nuno Pinheiro for feedback.There are a few more things that need to be done. As shown previously, the work of building colorful icons goes in phases. The current phase is intended to build colorful, “try anything”, higher fidelity icons. In this stage, shapes, colors, radii and other elements are placed on screen to see how they come across.From this stage, one would pick out the best icons and use them as design guidelines for other icons. You begin to restrict your color palette, harmonize shapes, shadows and other elements.This process will continue. My personal goal is to have a robust set of app icons for Akademy in September (https://akademy.kde.org). Then work with maintainers to get buy-in and feedback for the new designs.Tokens and Plasma System VariablesWe follow the token naming convention used in Material Design 3. It’s expressed like this:Raw value > Reference Token > System TokenPlasma has its own set of variables used for various purposes. For example:SpacingSmall, SpacingMedium, etc.We need to find the way to do Raw value > Reference Token > System Token > SmallSpacingEven though the design system contains more tokens than there are variables in Plasma, we need to do the work of matching design tokens to Plasma. This should yield a workable set of UI changes even though it may not be complete.For those tokens that don’t have an equivalent in Plasma, we need to create an integration and support plan.For those design tokens that have approximations, we need to determine what is best, to accommodate to what we have in Ocean or to make Ocean accommodate to what the system already has.The biggest risk here is that if we change values in the system carelessly or introduce unsupported tokens, the applications using those variables in Plasma could break or work in a strange way.In this new age of Union work, we would parse design tokens via Union, this would produce the graphical interpretation of the token and apply it. Since Union is using CSS to interpret the values, token values and component values can more easily be replicated in Plasma.