Looks good to me

If we do add this to the demo page, we make this (the code block and the less variables) basically a public API. This means it should be documented in the developer changelog and we need to support it in the future. This also has affects on what we allow to theme.

I'm not sure if other plugin developers will need the code tag? Maybe it would be worth having a page for core developers and one for plugin developers? The code tag seems to be rather interesting for core developers but less for plugin developers. Just trying to keep things for plugin developers simple and easy by not having too many things there. If we decide to expose the less variables (which is currently the case in this PR as it is in _variables.less), it might be actually nice to have the code block on the page for plugin developers for easier theming.

I'm not sure re exposing the less variables as API. It's kinda good to have only a few less variables there to keep theming easy. The code block can be only seen in a very few areas right?

I do not really mind about exposing the code block and those variables, as long as we don't starting exposing too many variables / elements over time. It makes things more complicated for plugin developers and we have to maintain more etc.

we make this (the code block and the less variables) basically a public API

The code blocks are API as pre and code are HTML elements. I'm just trying to make them consistent and look good according to the redesign.

The less variables are useful for theming, if I want to theme Piwik I might want to customize those colors. If you are concerned about theming being too difficult because there are too many variables that can be customized, then I guess maybe we could have 2 Less files containing variables, one with the "simple" variables, and one with the "advanced" variables… I don't think it would make anything better but if that's a concern why not. Theming is currently inexistant though and I think you are trying to solve a problem that we don't have.

Theming is currently inexistant though and I think you are trying to solve a problem that we don't have.

We do not know whether theming is actually inexistant. Just because there are not many plugins on the Marketplace doesn't mean anything. There are eg agencies that do change a few colors to adjust Piwik to their branding. Those agencies/companies would of course not publish their plugin on the marketplace.

I'm not trying to solve any problem. I even said I don't mind adding them. We just need to be aware that we expose things here. Which means it needs to be documented and maintained.

Having 2 less files sounds good. We could have like a "basic.less" and an "advanced.less". I would as well move all the @theme-color-background* variables to advanced.less. Currently, the "advanced" ones are in _colors.less. To make things simpler for developers eg @theme-color-code-background could default to @color-silver-l30 which is I think the same value (or we could directly use this less variables there and not introduce a new one). Maybe there's also a color value for the other variable. Eg if we use #F2F2F2 instead of #F3F3F3 we could use @color-silver-l95. This is how it is currently done in other cases.

@tsteur I have created #7876 regarding the problem you mentioned. I think this solves the problem:

• what's added to the demo page are the base HTML elements <pre> and <code> so these are API (as they are standard HTML tags)
• the less variables will be moved in the less file containing the non-API variables