XWIKI-22667: Introduce CSS equivalents for all LESS variables

[Sereza7]

Jira URL

https://jira.xwiki.org/browse/XWIKI-22667

Changes

Description

• Added a bunch of CSS variables to make it possible to move some stylesheets from LESS to CSS. In this first pack, there's about 120 variables.
• In priority, I wanted to make sure anything set in the color themes was converted nicely.

Clarifications

• This is the first step of a proposal described on https://design.xwiki.org/xwiki/bin/view/Proposal/MovingawayfromLESSCSS
• Those CSS variables are not API content yet (explained it in the template comments), there'll probably be a lot of changes. However, this is a good base and it's quite straightforward to extend or reduce it.
• This is code we don't use actively yet. I can't be bothered to source this statement, but AFAIR we should not add code to XS that's not useful (avoid the mindset "this might be useful one day" that ends up in dead code cluttering the codebase). However it's been discussed and there'll definitely be a lot of uses very soon. IMO it's alright to add it by itself.

Screenshots & Video

No UI change yet!
We're only making things available in CSS:

Note that the generated CSS doesn't look very nice, but it compiles and the source template is legible so it's alright IMO.

All variables needed for Iceberg are here. Some lines are in grey, this is because this variable value is overridden by another line later. This is not the most efficient, but it doesn't cost much (browsers optimize this kind of things on their side, it seems Firefox just straight up just disables the lines) and it's a good safety against bugs. E.g. for one reason or another, we decide to remove --list-group-link-hover-color , but we don't update the value of --component-active-color in the Iceberg colorTheme. We still have a base value for --component-active-color instead of nothing at all.

Executed Tests

Manual tests with Iceberg. Tried out the font-size functions, they work properly (needed a hack and a few tries before that worked, it's some pretty advanced CSS operations ^^'). Tried out a couple colors, they work as expected.
The Firefox devtool highlight all the variables in formulas correctly, this means they are actually working and not just string values in the hiding.

I did not test all the other colorThemes, the current changes do not break them BUT they will be way more complicated to migrate than Iceberg. Iceberg migration is pretty much done with those changes already. Bootswatch colorThemes for example have massive LESS sheets in their @lessCode parameter. Those sheets still need to be migrated/duplicated to apply their changes to CSS variables, it doesn't just work from scratch with what I've put on here.

I didn't write any automatic test yet, I'd rather check in some Flamingo test once I updated a Flamingo stylesheet to use CSS variables. Not sure how we'd check CSS variables in the Java test suite anyways.

Expected merging strategy

• Prefers squash: Yes
• Backport on branches:
  • None, this is a rather large change, will be followed by large changes and should only be on 17.X

---

Points to clarify before a merge

• Are the name and type of the file correct? I tried ending it in .css.vm but it wouldn't work as a stylesheet link. Right now the code completion and linting are horrid but I'm not sure how we could improve that.
• Do we agree on the priority of the variable sets? XSspecific>Bootstrap>oldcolortheme

[manuelleduc]

I see escapedText being used later in the code. But does the other values have associated semantics?

[Sereza7]

I didn't use the other values yet. Down the line we can use the @property annotation, but for now I just went with the "easy" one line instantiation.

https://developer.mozilla.org/en-US/docs/Web/CSS/@property

[manuelleduc]

I'm not fan of seeing

xwiki-platform/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/type.less

Line 32 in 92c46a6

@font-size-h1: ~"max(@{min-h1-font-size}px, min(@{max-h1-font-size}px, calc(@{min-h1-font-size}px + (@{max-h1-font-size} - @{min-h1-font-size}) * (100vw - @{min-screen-size}px) / (@{max-screen-size} - @{min-screen-size}))))";

being duplicated.

[Sereza7]

I'm not sure we can factorize this with the current CSS. I'll look a bit more for a solution. AFAIK, this would have been addressed with a mixin with parameters in LESS, not sure if there's a way to make it look cleaner in native CSS right now.

---

I wasn't sure what was the exact intended result for the calculation of this variable, so I made my best to just replicate its formula in CSS. This is also a good exercise/PoC about CSS calc: it's possible to move pretty much the whole formula, but some details (esp. units) will make implementation a bit more difficult.

---

What do you think should be done with those variables instead of a 1to1 port to CSS variables?
Should we remove them from our CSS variable-set and not consider them API ?
Did you mean that we should remove the LESS alternative ASAP?

PS: CSS variables are evaluated lazily (opposite to LESS variables that are evaluated on compilation to CSS). It's barely any cost to load CSS variables that are not used.