PLIP: Theme LESS variables management

[ebrehault]

Proposer : Eric Bréhault

Seconder : @hvelarde

Abstract

This PLIP proposes to move the Less variable control panel from the Resource registry to the Theming editor.

Motivation

Note: this PLIP comes from the following discussion initiated by Chris Ewing https://community.plone.org/t/problems-altering-less-variables-in-a-copy-of-barcelonetta/2446

Problem 1:
When we use the Resource registry Less variable control panel to customize Barceloneta (change few colors for instance), it works in development mode, but as soon as we switch back to production mode, the changes are not visible anymore. That is because the theme is not managed like other bundles, so the changes cannot be persisted unless we have a custom TTW theme.

If we do have a TTW theme, then it can work, but it implies to go to the Theming editor and use the Build CSS button (so that's bad UX, and that's confusing).

Problem 2:
If we have a custom TTW theme, and we try to change Less variables from the Theming editor, for instance by writing:

@plone-body-bg: black;

@plone-link-color: pink;

then the first one will work, but the second one will not.

That's because @plone-link-color is managed in the Less variable control panel, and the value from the control panel takes precedence, while @plone-body-bg is not managed in the control panel, so its custom value is considered as expected.

That's very confusing.

Conclusion:
The Less variable control panel only makes sense to managed Less variables used in Mockup patterns (we change the value, we re-generate the impacted bundle, and it works).

But currently there is only one real variable (@plone-link-color) used in Mockup (in the Structure pattern), plus the paths (mockuplessPath, bowerPath, mockupPath, icon-font-path), everything else is only used by Barceloneta.

Assumptions

N/A

Proposal & Implementation

Main proposal:
The ability to customize Less variables using a dedicated UI is interesting, but it is currently not consistent.
We propose to:

• move the Less variables control panel to the Theming editor,
• exclude the non-theme related variables (they will be managed using the configuration registry directly),
• extend it to all the theme existing variables (like @plone-body-bg which is mentionned in the previous example).

Alternative proposal 1:
Considering the Less variables control panel is not very useful for Mockup Less variables, and we can edit theme variables in the variables.less file directly using the theming editor, we just remove it.

Alternative proposal 2:
We let the Less variables control panel where it is, we restrict it to pattern-related variables only, and we edit the variables.less file directly using the theming editor for the theme-related variables.

Alternative proposal 3:
Managing common variables between theme and patterns might be interesting, so we maintain the control panel the way it is. But to allow easy customization from the Theming editor, we isolate the Barceloneta variables like this (for instance):

@barceloneta-link-color: @plone-link-color;

and @barceloneta-link-color will be the variable we can customize in the Theming editor (in variables.less).

Deliverables

New version of Products.CMFPlone and/or new version of plonetheme.barceloneta.

Risks

No risk identified.

Participants

Eric Bréhault

[hvelarde]

I'm with you on proposal 1: remove that feature completely from the core; there must be a different way to play with LESS variables outside of Plone. IMO it makes no sense to have that in the control panel; let's keep the core clean.

[ebrehault]

Hi @bledwell, could you and the rest of the UX/UI team have a look to the different proposals we made in this PLIP and give us your feedback?
Thank you.

[MrTango]

As the most of that stuff is only interesting for the theme, i would go for "Alternative proposal 2".
Lets just change them in the less file and rebuild it's way easier.
Now that we have the build functionality in the theming editor.

For the rest, like the toolbar vars, let it be where it is.
And make actually working.
Changing the width of the toolbar works not easy.
Is there a good way to do it.
I just changed the value and rebuilded the plone bundle, but it doesn't work ;)

[tisto]

@ebrehault @hvelarde the last activity here is from 2016. Time to close this PLIP?

[ale-rt]

I will close this PLIP due to inactivity.
Feel free to reopen!

CC @plone/framework-team