Therefore, I propose to generalize them to also include other variables (e.g., size, radius…) and other stylesheet technologies we support (i.e., less).
as I mentioned on the other topic where this was discussed:
I think this section can be improved or transformed into a bigger section expressed something like: “code for all color themes” or “code for all the design system parameters” with the explanation that basically when you code something, you need to take into account that it may run in different conditions than the ones that you’re looking at (color-wise, size-wise, etc).
If you want to improve just that phrase, it should be “don’t hard code colors or sizes - use Bootstrap & Color theme variables”. It may be that this doc was written before Flamingo color themes, and back then color theme only had color vars, not size vars.
Then, regarding your proposal:
I’m not sure we should be talking about variables as being variables tied to the styling languge used - CSS or LESS
also note that those are actually velocity variables, not CSS variables. CSS variables is a thing and we don’t have it for our color theme, so we shouldn’t advertise ours as being “variables for CSS”
I don’t really understand the way you advertise color-theme sensitive stylesheet in LESS in your sentence. The order should be:
using the bootstrap less variables - I think we agreed in the past that this is API, but it should be used carefully (because when we’ll change design system we won’t commit to implementing all of them)
using the custom XWiki variables that are not in the Flamingo Color Theme - although I am really really unsure this is API.
Hope this helps
I am not sure this section would need to be that detailed, so I think the way I would put it simply is:
" don’t hardcode colors & sizes, use color theme variables instead" and point to the flamingo theme documentation. We could also mention design system variables and point to the rest of the bootstrap variables, that are not covered by our flamingo color theme.
Technically they are (Flamingo) skin variables. A color theme is an assignment of these skin variables. Different skins may have different variables (although some that are generic enough could be shared). So I’d write it as:
Use skin variables whenever possible instead of hardcoding CSS property values (e.g. colors, sizes). For the current Flamingo skin this means: