ThemeBuilder only allows limited control over a specific set of exposed variables. Although these variables are constantly analyzed and updated, some, such as $base-gradient, cannot be modified through ThemeBuilder and require manual adjustments.

Example of variable that is not currently exposed: $base-gradient

The feature request is to explore the possibility of exposing more variables or providing a UI for selecting Kendo variables, bearing in mind that some Kendo themes may have over 2,000 variables.

Q: Can one css file be produced for just the components selected in ThemeBuilder?

Ideally, we would like to have the option to produce only partial themes for specific components. This will allow to minimize the size of the output CSS/SASS files, which will allow us to lower the size of the end application.

Alternative ways to achieve similar results through manual application builds: https://docs.telerik.com/themebuilder/partial-theme-build

 

Hello,

I'm able to customize the components of the webpage, like buttons, grids, etc., but not the entire webpage. Can you support to design an entire webpage using ThemeBuilder so that I can create a login page instead of creating login.css.

Allow customisation of frozen and locked columns & cells in Grid for more comprehensive component styling.

Hello,

There seems to be an automatic 25px margin on the <p> within the content element that we can't customize. Could you please remove this and allow this to be customized in the ThemeBuilder?

Thanks,

Brian

 

Hello,

The MultiSelect and ComboBox Icons seem to have issues. First, in the MultiSelect, I'm not able to customize the icon within the IconButton. In the similar ComboBox, I can customize the icon, but the change is not reflected in the live view.

I would expect that all the clear "X" icons within the dropdown components would inherit from the base TextBox "Clear Icon" but they don't.

Regards,

Brian

It would be really good to be able to copy customized attributes of an element, and paste them into another. So take an example where I want all TextBoxes to be outlined. I've customized the outline version, and want to apply that to the standard TextBox. Select the element, right click to copy, select the target element, right click to paste. Right now I can't even see which attributes are set - the full list are shown and I cannot filter to just those set. There are various ways this could be done, but right now it is a tedious comparison and fiddle to replicate attributes.

How do I set the parent header colour of a grid using the multi-header feature, in ThemeBuilder?  Currently the parent and child header are the same colour and I don't see an example of the multi-header grid in ThemeBuilder.

i would like to set the chevron down arrow vs the default. i set this in themebuilder and export but the icon remains the same default

It would be nice if the default theme in ThemeBuilder would allow us to create variables to use for the effects! I tried creating custom metric variables for the offset, spread and blur for the drop shadow but those inputs dont allow me to enter variables in those fields. Thanks!

When the ThemeBuilder project has custom variables or variables exported from Figma in the output _tokens.scss file all variables are with the ‘tb’ or ‘figma’ prefix.

It will be good if these prefixes can be configuration options for the project and users can choose what prefix (or no prefix) should use. 

Consider the option to expose predefined classes of HTML elements from the Kendo themes. This would allow atomic customization and mapping to other imported variables (like ones imported from Figma designs).

For example:

An option to style the H1 header from the Kendo theme, which has the .k-h1 class. 

How would I add custom tokens e.g. different shadow settings in ThemeBuilder. 

 

This is the JSON for one such setting:

    "$gph-grey-100": {
      "value": "#8f8f8f",
      "type": "color"
    },
    "$gph-shadow": {
      "value": {
        "x": "3",
        "y": "04",
        "blur": "0",
        "spread": "0",
        "color": "{$gph-grey-100}",
        "type": "innerShadow"
      },
      "type": "boxShadow"
    }

Add a new smart code editor as a variant of the Property Grid with all visual properties. Do not replace the property grid with this editor. They can live next to each other in different tabs. The smart code editor should support all features of the property grid but with advanced functionalities.  

1. Show all kendo styles attached to the selected layer in a text format 
2. Marks which style is overridden by user styles
3. Users can add any CSS property, not just the one listed by the Proprty grid editors. 
4. Intellisense for CSS properties, something like:

5. Intellisense for using sass/css variables – the editor can recognize the property name and list only corresponding tokens for example – background – shows color tokens, box-shadow – shows effect tokens.  Something like:

Add ability to style theme variants such as .k-tooltip-warning, k-tooltip-error, etc.

Consider providing export options for fonts - for example the one requested below:

...

I would like to request the inclusion of a non-exportable option in the Font Manager. Specifically, I suggest adding an additional field that allows users to choose whether to include a particular font in the "_fonts.scss" file or not.

The purpose behind this request is to utilize these fonts within the ThemeBuilder Pro to observe the visual outcomes (including Typeface & Icon fonts). However, it I do not want to generate these fonts in the final zip since I already have fonts with the same names in my application. I solely require the font names to be present in the "_tokens.scss" file.

Add the ability to style the content of complex components e.g. the buttons in the Toolbar component

Themebuilder used to export non compiled css

Now it's only compiled, and it's not easily plug and play with my current npm bundler.

Please bring back option to export non-compiled css

Consider providing a configuration file that stores information about mapped variables (e.g. like Figma variables mapped to Kendo variables)

Example scenario:

1. Create a new Figma design based on UI Kit
2. Export it to ThemeBuilder
3. Map the 3rd party or figma-styles to the ThemeBuilder styles.
4. Save the mappings between them as some external config file 
5. When I create a new project based on my customized UI kit and I export it to ThemeBuilder
6. Instead of re-doing for a new project the mappings for a couple of hours again by hand, load up the mappings file which I saved from the previous project and the tools just connects the dots.

 

I am getting this error, but am not able to revert the changes nor does it say where exact the error is. Do I have to start all over again!?
In my opinion the whole ThemeBuilder is still in Beta.

I suggest to implement a protocol tool with which you can revert the last 10 changes made in to the theme!