WoltLab Suite 5.5: Changes for Designers

In September 2021 I wrote a tweet about a change in the SCSS parser that might affect existing styles for WoltLab Suite. Since then a lot more has changed…

curly brackets on purple background

Let me begin by saying that at the time of writing this article the next version of WoltLab Suite is still in its early development phase - the latest version being 5.5.0 Alpha 2, which is available via GitHub. You could install a test version on SoftCreatR.dev (choose WoltLab Suite next) or get an installation package from MysteryCode's website to install it on your local dev server. For obvious reasons you should not run this in production.

SCSS Syntax for fade-out

As I tweeted in September last year WoltLab Suite will now force you to use the correct syntax whenever you use to fade--out (transparentize) color values. Until WoltLab Suite 5.4 you could write something like

Sass (Scss): WoltLab Suite 5.4
.foo {
    background-color: fade-out($wcfSidebarBackground, 7%);
}

which in WoltLab Suite 5.5 has to be

Sass (Scss): WoltLab Suite 5.5
.foo {
    background-color: fade-out($wcfSidebarBackground, .07);
}

If you're using the old syntax the installation/ update process will crash. So please update your style(s) if you have to.

New Style Variables

WoltLab Suite 5.5 will introduce new style variables for the new designed user menu (previously interactive dropdown).

PHP: update_com.woltlab.wcf_5.5_styleVariables.php
$values = [
    'wcfUserMenuBackground' => 'rgba(255, 255, 255, 1)',
    'wcfUserMenuBackgroundActive' => 'rgba(239, 239, 239, 1)',
    'wcfUserMenuText' => 'rgba(58, 58, 61, 1)',
    'wcfUserMenuTextDimmed' => 'rgba(108, 108, 108, 1)',
    'wcfUserMenuIndicator' => 'rgba(49, 138, 220, 1)',
    'wcfUserMenuBorder' => 'rgba(221, 221, 221, 1)',
];

These new variables can be set right in the style editor.

Screenshot of user menu variables in style editor

Custom Properties a.k.a. CSS Variables

The new user menu also introduces CSS variables which you can see on GitHub if you take a look at the pageMenu.scss and userMenu.scss.

In my opinion this is just the first step for WoltLab of exploring CSS variables. Once fully implemented this might make theming easier for designers - if it was implemented in a good way.

New Color Picker

The color picker has been reworked to only accept hex values with alpha channel. And, folks, I don't know! Why? 🤷‍♂️

Screenshot of the new color picker The new color picker (Browser: Firefox)

Final Thoughts

While definitely not being next big release with breathtaking changes I think WoltLab Suite 5.5 could be a step in the right direction - a least from a designers point of view.

Since I might have missed the one thing or the other it might be worth to come back later to look for any updates on this.

Like 1