Style variables
Version 2.2 by Lucas Charpentier (Sereza7) on 2025/03/27
Currently, XWiki Standard with its Flamingo Skin support three kinds of style variables. They are (ranging from the oldest to the newest):
- The old colorTheme variables
- The LESS variables (Flamingo colorTheme + design system inherited from bootstrap + Misc additions from the Flamingo skin)
- XWiki 17.3.0+ The CSS properties
Migrating from LESS to CSS properties
This section contains a few points that could be important when migrating LESS styles to using the CSS properties. Those are not community rules to be followed, but just indications to make it easier to migrate 
Syntax sugar
Native CSS is a bit more wordy than LESS:
- Variables start with a double dash (--) instead of an arobase (@)
- All use of a CSS variable should be made in a var block.
- All operations that you could write in your LESS must be made in a calc block.
Units in CSS calculus
Migrating color functions
To migrate LESS color functions, you can use the CSS color or hsl functions:
hsl(from var(--well-bg) h s calc(l - 0.07))
HSL is useful for most operations, color is really only useful for transparency calculations
