Multi-level LESS/CSS customizations

[fynnfeldpausch]

Hey all,

I am thinking a lot lately about the customization features that Taiga UI has to offer. There is already a lot of stuff going on and a couple of feature are currently being developed. I, too, am a big believer in CSS custom properties and their power. I really like that you are going all in on them and try to get rid of LESS variables all together.

Unfortunately, the level of customization that is offered by the current set of variables is not enough for our use case (and probably never will be even if you add more). Let me give some examples to make things clearer:

• the height of the different sizings (e.g. of inputs and buttons) can be adjusted using CSS properties now. However, the paddings don't go along with that. They will stay the same. So one would either have to introduce more CSS properties for the padding, margin, ... or one would have to override all of them in the CSS
• border radiuses are another great example. They already can be adjusted using two CSS properties. But what if for our use case a border radius should react to the other property (e.g. it reacts to the --tui-radius-m but should react to --tui-radius-l because it looks nicer for us). That is not adjustable on a component level.

I was asking myself you ever considered going for a multi-level customization approach that combines the two. The idea would be to have a set of CSS properties but also have an even greater set of LESS variables. Those would not be touched by most of the users but offer an additional level of flexibility. For the examples given above, the LESS variables (all in a single file) would look like this:

@button-padding-xs:  8px;
@button-padding-s: 12px;
@button-padding-m: 24px;
@button-padding-l: 36px;
@button-padding-xl: 40px;
@button-radius-xs: var(--tui-radius-m);
@button-radius-s: var(--tui-radius-m);
@button-radius-m: var(--tui-radius-m);
@button-radius-l: var(--tui-radius-m);
@button-radius-xl: var(--tui-radius-m);

Let me know what you think of this.

[waterplea]

Padding is a tough call because it is not just about styles, in inputs it changes programmatically to accommodate icons, cleaners etc. As for radius — maybe it can be solved with wrapper component approach? You can achieve pretty broad customization with it, like I did in demo portal:

I will show it on today's session. Do you have a design you want to achieve that you can show publicly? Or maybe in DM? I'm skeptical about making a big architecture on customization at this point. It would be great to see some significantly different design that somebody wants to have and see what's missing to get there.

[fynnfeldpausch]

@waterplea Ok, the wrapper is a real good point. I didn't try that yet but will give it a go. I have attached some pictures of what we are trying to achieve although I don't know how much the images help without notes about the sizing and coloring. If you are interested I could arrange some small Zeplin project to take a closer look at. It already looks quite similar to the designs that Taiga UI offers, but as always it is mostly about the tiny details :-). Really looking forward to todays Q&A session.

One final question though. Are you planning to make font sizing and shadows adjustable by extracting them to CSS properties?