Wiki source code of Style variables
Version 2.2 by Lucas Charpentier (Sereza7) on 2025/03/27
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | Currently, XWiki Standard with its Flamingo Skin support three kinds of style variables. They are (ranging from the oldest to the newest): | ||
| 2 | |||
| 3 | * The old colorTheme variables | ||
| 4 | * The LESS variables (Flamingo colorTheme + design system inherited from bootstrap + Misc additions from the Flamingo skin) | ||
| 5 | * {{version since="17.3.0RC1"}}The CSS properties{{/version}} | ||
| 6 | |||
| 7 | {{info}} | ||
| 8 | There's some documentation about the first two at: https://extensions.xwiki.org/xwiki/bin/view/Extension/Color%20Theme%20Application#HUsingColorThemesvariables | ||
| 9 | {{/info}} | ||
| 10 | |||
| 11 | == Migrating from LESS to CSS properties == | ||
| 12 | |||
| 13 | 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 :) | ||
| 14 | |||
| 15 | {{warning}} | ||
| 16 | Today, there is no way to migrate any LESS mixin to CSS one to one. In order to migrate any advanced use of mixins, an additional class should be added for the styles on the HTML. | ||
| 17 | {{/warning}} | ||
| 18 | |||
| 19 | |||
| 20 | === Syntax sugar === | ||
| 21 | |||
| 22 | Native CSS is a bit more wordy than LESS: | ||
| 23 | |||
| 24 | * Variables start with a double dash (~-~-) instead of an arobase (@) | ||
| 25 | * All use of a CSS variable should be made in a ##var## block. | ||
| 26 | * All operations that you could write in your LESS must be made in a ##calc## block. | ||
| 27 | |||
| 28 | === Units in CSS calculus === | ||
| 29 | |||
| 30 | |||
| 31 | === Migrating color functions === | ||
| 32 | |||
| 33 | To migrate LESS ##color functions##, you can use the CSS color or hsl functions: | ||
| 34 | |||
| 35 | {{code language="css"}} | ||
| 36 | hsl(from var(--well-bg) h s calc(l - 0.07)) | ||
| 37 | {{/code}} | ||
| 38 | |||
| 39 | HSL is useful for most operations, color is really only useful for transparency calculations |
