Wiki source code of Style Variables
Last modified by Lucas Charpentier on 2026/05/28 14:01
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | **A style variable represents a value shared across all of XWiki's style sheets.** These values are meant to be used instead of hard-coding them in stylesheets. Our [[CSS codestyle>>doc:dev:Community.CodeStyle.XhtmlCssCodeStyle.WebHome||anchor="HCSS"]] makes the use of these variables mandatory in XWiki Standard development. It's recommended to rely on those for your own custom developments too. :) | ||
| 2 | |||
| 3 | They provide some level of consistency in the UI: | ||
| 4 | |||
| 5 | * It will be harder for customizations to get unexpected results. | ||
| 6 | * XWiki can provide colors that work well together by default. Among other things, it can help make sure all your components respect some minimum contrast. | ||
| 7 | * It's custom UIs using these colors will be compatible with any color theme. | ||
| 8 | |||
| 9 | Style variables are provided by the skin you are using. For XWiki Standard, this skin is Flamingo. All documentation in here will describe specifically the style variables provided by Flamingo. | ||
| 10 | |||
| 11 | Currently, the Flamingo Skin supports three kinds of style variables. They are (ranging from the oldest to the newest): | ||
| 12 | |||
| 13 | * The Colibri colorTheme variables | ||
| 14 | * The LESS variables (Flamingo colorTheme + design system inherited from bootstrap + Misc additions from the Flamingo skin) | ||
| 15 | * {{version since="17.3.0RC1"}}The CSS properties{{/version}} | ||
| 16 | |||
| 17 | (% class="wikigeneratedid" %) | ||
| 18 | All of these variables are supposed to be used in ##.css## files, ##.less## files and their respective StyleSheet Extensions's contents. |
