New Theming System

[tisto]

PLIP (Plone Improvement Proposal)

Responsible Persons

Proposer: Víctor Fernández de Alba (@sneridagh)

Seconder: Dante Álvarez (@danalvrz)

Abstract

Volto theming has stayed the same since its inception. Volto is using SemanticUI as baseline library and theming system, which allows to extend PastanagaUI and base your public theme on SemanticUI as well.

Eventually, after the feedback of the first projects done, the community realised that it was not that handy as they promised and implemented a "escape hatch" to use arbitrary CSS via the "extras" overrides.

This small improvement rendered obsolete the way of theming via SemanticUI theming, and while it allowed to build themes in a more flexible way, it was due to remove the default way of theming in favor of something else more modern, with better developer experience.

After all these years of developer and user feedback, and the experience gained implementing dozens of Volto projects, the community has identified some drawbacks and points of improvement that we should adopt. The final goal is to have a theming system that allow maximum flexibility following the latest trends in modern frontend development, and that enables all the goodies and latest features in the CSS ecosystem.

In that regard, some initiatives have been done in the community lately, leading to the development of Volto themes, provided that Volto started to officially support theme add-ons since Volto 17. The @kitconcept/volto-light-theme or io-comune theme by RedTurtle are some examples.

These themes leverage the most recent CSS features, like container queries for main content areas, and CSS properties to customize the look and feel. The idea behind them is that serve as solid foundation and baseline for deriving project themes from them. This is an important feature of this system: you do not create a new theme, but derive from it, taking advantage of the baseline provided by it.

In the case of the existing themes, they provide vertical spacing, support for background colors, curated typography and block relationship and behavior.

Assumptions

This theming system will be targeted to Plone 7.

Proposal & Implementation

Given the main existing themes, create a new, opinion-free basic theme baseline for vanila Volto.

This new theme will be SemanticUI-free since it relies in these other PLIPs:

• Complete removal of Semantic UI from Volto #6323
• SemanticUI Free CMSUI #6321

The theme will be installed by default, but it can be replaced by any other Volto theme add-on.

It has to be flexible as in:

• Using overridable CSS properties for the most important styles
• CSS to be loaded has to be minimalistic and the ability to be easily removed from the build completely or overriden by other CSS
• Using special alias to extend variables and main CSS (as the current themes has)
• Configurable width for content area
• Define a baseline of blocks relationships (based on the BMv3) easily configurable

It has to be compatible with the Block Model 3 PLIP:

• Improve block style preview in edit mode (Block Model 3) #6316

Deliverables

The theme as a Volto add-on: @plone/theming (TBD, or alike).
Documentation on how the new theming works.
Remove the obsolete theming documentation.

Risks

The changes specified above will render obsoletes any public-facing theme done to the day, unless it does not use SemanticUI at all. We have to make sure that the documentation is in place for disabling completely the baseline theme and you can plug your own, so only your theme is applied. By all means, probably some adjustments would have to be made.

Participants

Víctor Fernández de Alba (@sneridagh)
Dante Álvarez (@danalvrz)
Piero Nicolli (@pnicolli)