Wiki source code of Style variables
Last modified by Eleni Cojocariu on 2026/10/02 10:57
Hide last authors
| author | version | line-number | content |
|---|---|---|---|
 |
5.1 | 1 | {{toc/}} |
| 2 | |||
| 3 | == What is a style variable? == | ||
| 4 | |||
 |
11.8 | 5 | Moved to [[Style Variables>>doc:documentation.xs.dev.flamingo-skin.style-variables.WebHome]]. |
| |
5.1 | 6 | |
| 7 | == How to use style variables? == | ||
| 8 | |||
| |
11.8 | 9 | Moved to [[Style Variables>>doc:documentation.xs.dev.flamingo-skin.style-variables.WebHome]]. |
| |
5.1 | 10 | |
| |
5.4 | 11 | === Using CSS properties {{version since="17.3.0"}} {{/version}} === |
| |
5.1 | 12 | |
| |
9.1 | 13 | (% class="wikigeneratedid" %) |
| |
11.11 | 14 | Moved to [[Use CSS Properties>>doc:documentation.xs.dev.flamingo-skin.style-variables.use-css-properties.WebHome]]. |
| |
9.1 | 15 | |
| |
7.1 | 16 | ==== New CSS properties ==== |
| |
6.1 | 17 | |
| |
11.9 | 18 | Moved to [[New CSS Properties>>xwiki:documentation.xs.dev.flamingo-skin.style-variables.css-only-properties.WebHome]]. |
| |
7.1 | 19 | |
| |
5.4 | 20 | === LESS variables === |
| |
5.2 | 21 | |
| |
11.12 | 22 | Moved to [[Use LESS Variables>>xwiki:documentation.xs.dev.flamingo-skin.style-variables.use-less-variables.WebHome]]. |
| |
5.2 | 23 | |
| |
5.4 | 24 | === Old colorTheme variables === |
| |
5.2 | 25 | |
| |
11.10 | 26 | Moved to [[Use Old ColorTheme Variables>>doc:documentation.xs.dev.flamingo-skin.style-variables.use-colibri-colortheme-variables.WebHome]]. |
| |
5.2 | 27 | |
| |
5.1 | 28 | == Migrating from LESS to CSS properties == |
| 29 | |||
| |
14.1 | 30 | Moved to [[Migrate from LESS variables to CSS properties>>doc:documentation.xs.dev.flamingo-skin.style-variables.migrate-less-variables-css-properties.WebHome]]. |
| |
5.1 | 31 | |
| 32 | === Using CSS variables in LESS === | ||
| 33 | |||
| 34 | Sometimes you want to start migrating a file without being able to move it all at once. In this kind of situation, you'll need to know about how to use CSS variables in a LESS file. | ||
| 35 | |||
| 36 | The LESS parser we use in XWiki standard is not maintained enough to ensure a good compatibility with current CSS. It does not work well with CSS variables directly. The usual solution to escape things in LESS works well for most cases: a tilde and the escaped content in between quotes. | ||
| 37 | |||
| |
5.12 | 38 | {{code language="css"}} |
| 39 | :root { | ||
| 40 | -/**/-navbar-default-bg: ~"var(--brand-primary)"; | ||
| 41 | -/**/-navbar-default-border: ~"color-mix(in srgb, var(--navbar-default-bg), black 6.5%)"; | ||
| 42 | } | ||
| |
5.1 | 43 | {{/code}} |
| 44 | |||
| 45 | But, a quirk of the parser is that this syntax does not work when we're trying to use it for an assignation. One hack that's not too bad looking that works for those variable assignations is to add an empty comment block in the middle. It prevents the LESS parser from associating the two dashes together and assume this is the end of an HTML comment. You can see this workaround in the example above. | ||
| 46 | |||
| |
5.8 | 47 | == Migrating from old colortheme variables to CSS variables == |
| 48 | |||
| 49 | There is no "easy" way to do this kind of migration because the old colorTheme variables do not map 1 to 1 to CSS variables. You might want to check how they got mapped to LESS variables to get an idea of CSS properties that have similar values (or just use the CSS properties with the semantics corresponding to your situation :) ). Those oldColorTheme -> Less variables mappings are available in the ##variablesInit.vm## template. | ||
| 50 | |||
| 51 | Once you removed all the old colortheme variables from your stylesheet, you can also remove the call to the ##colorThemeInit.vm## template and don't need to parse it anymore. |
