Use CSS Properties
Steps
1. Find the property you want to use.
XWiki standard CSS properties are declared in the file cssVariablesInit.css . This CSS sheet is generated using the information contained in variablelist.vm . This velocity template is a common source of truth between CSS and LESS.
CSS properties can also be declared pretty much anywhere in your custom stylesheets using standard CSS syntax 
When developing for XS, try to still declare them in variablelist.vm so that we have a consistent source.
In addition, as long as LESS is operating as normal, in variablesInit.vm the values from LESS override the defaults set in cssVariablesInit.css . This should improve the consistency between both variable systems because this takes into account customizations. The common source of truth in variablelist.vm only contain default values.
Using the macro defined in the page shared on this snippet, you can easily view all the CSS properties available in your context:
Note that this is purely a development aide and the quality is not on par with XWiki Standard's quality.
2. Evaluate the context in which you want to use it
When you're extending an existing stylesheet, continue:
- 3.a. if you're developing stylerules in a CSS file or a CSS StyleSheet Extension.
- 3.b. if you're developing stylerules in a LESS file or a LESS StyleSheet Extension.
3.a. Use this syntax in a native CSS stylesheet
.box.box-custom {
color: var(--brand-color);
}3.b. Use this syntax in a LESS stylesheet
.box.box-custom {
color: ~"var(--brand-color)";
}FAQ
What are CSS variables ?
If you come across the wording "CSS variable" in the documentation or discussions, rest assured, it's just another name for "CSS properties". In this documentation, in order to make it a bit easier to differentiate from other style variables, we're trying to use exclusively the wording "CSS properties".
