ThemeBuilder variables never used

[Brian]

We have an issue with ThemeBuilder output and some variables not being used.

For example, we're trying to override the drawer colors. In the generated CSS, the draw item's background color is defined as:

background-color: var(--kendo-drawer-item-bg, var(--kendo-component-bg, initial));

It turns out that --kendo-drawer-item-bg isn't actually defined anywhere in ThemeBuilder or anywhere else, so we added it as a custom variable. Unfortunately, when the CSS is generated, the variable is generated with a tb- prefix and thus isn't picked up by the standard background-color style definition above. Yet it shows in the ThemeBuilder correctly!

How do we go about fixing this issue so that --kendo-drawer-item-bg actually gets set to our custom version in the final CSS?

 

 

[Petar]

Hi Brian,

The behavior you are observing is expected. Adding the "tb-" prefix to custom-defined variables helps ThemeBuilder differentiate them from the default ones coming from the Kendo themes and thus prevent clashes with them.

That being said, the trend for the Kendo themes is to move away from component-specific variables in the future. The number of the Telerik & Kendo components available is extensive, and their complex structure makes them inconvenient to modify through thousands of component-specific variables. Instead, the Kendo themes are starting to move to updating the component parts by targeting them with CSS selectors and applying the necessary changes there. You can achieve this in ThemeBuilder through the "DRAWER ITEM - EXPANDED" template, like this:

Let me know if this meets your needs. If you need any further assistance, please reach out, and I'll do my best to help you.

Regards,
Petar
Progress Telerik

[Brian]

Thanks, I noticed this was possible, but the generated positional CSS seemed a lot more work than setting the classes, mostly due to the need to set them in multiple states. For now, I've manually added in overrides to some of those variables outside of ThemeBuilder when needed. We've also made sure not to add conflicting variable names.

[Petar]

I'm glad you figured it out - that's one way to do it. Just to follow up, any changes you make to the normal states of the components should apply to all the other states as well, unless there are overrides to them coming by default from the Kendo theme. In the case of the Drawer Items, there are no such overrides to the background-color of their states. This is why the above statement works for them, saving you the time to set that change in multiple places manually. Additionally, if you apply it in ThemeBuilder through a custom-defined variable, its usage shouldn't be any different from using the internal --kendo-drawer-item-bg variable.