Consider the option to support absolute paths for background-image in the Style Editor. 

This will enable users to visualize the background-image changes directly in ThemeBuildeer (currently the only option is to export the theme and load the changes in the end application).

Alternatively, consider the option to provide a space for loading images with relative paths (fir fast preview in ThemeBuilder).

Hello,

We have been creating custom variables for a color palette that our design system uses. However, we are unable to set any of the global properties (ie. text color) to one of the custom variables we have created. The list of variable options is limited to the "Theme Colors." We can set the color manually by setting the hex color it would be great if we could use our custom variables, especially if the list of global variables grows in the future.

Thank you for consideration of this feature!

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:

As the subject suggests, I think the ability to support multiple swatches in a single project would be a fantastic addition to Themebuilder!

This change would allow a user to select a theme that'll encompass an app's light mode, and once finished, select a separate theme to repeat the process for dark.

As it currently stands, separate Themebuilder projects need to be created in order to separate light and dark themes. 

Thank you in advance for your consideration!

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. 

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.

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

 

Currently, in ThemeBuilder, each uploaded font must have a unique font family name.

However, in some cases, we would like to add multiple font variants (files) via the same font family name (e.g., all named "Lato") and let the user control them through typography variables (from where users should be able to control the specific weight, type, etc.).

 

I have a grid with a column that contains clickable text in <a> tags and want it to be obvious to the user that this is clickable, by having the text display in blue.

However, there is a CSS class being applied that is preventing the styling from showing:

.k-grid a {
    color: inherit;
    text-decoration: none;
}

Is it possible for me to modify the styling of these links within ThemeBuilder and not have to add a custom global style override? I have not found any way of changing this.

Thanks

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

Currently, you can style only the Operator and the Clear buttons components inside the FilterRow Cell template. It would be great to have the ability to style the rest of the components (e.g. Inputs, NumericTextBox, etc.)

 

Request Feature...

Either: 1) Give Access To Common SASS modules/methods.

If I am using a primary color for my themebuilder customization and define it as

$my-primary-color = #2a3bd1,

give me the ability to use functions in sass like

• lighten($my-primary-color, 20%) or
• color.change($my-primary-color, $saturation: 50). 
• However you do it

Or: 2) Provide swatches using the current theme colors on color picker.

Or create swatches from the current theme color in the color picker to use as starting points when picking another color representing hover or selected or disabled, etc.

Hello,

I'm trying to update our themebuilder project by exporting metada (v7.0) and then importing into a new v7.2 project, but it fails.

Consider having the option to trigger the automatic migration (for ThemeBuilder Ultimate and Enterprise) and Export options simultaneously for multiple projects.

Benefits as pointed out by a user:

""...

I'd rather start a batch job performing all of those tasks (it might even be a dry run just pointing out issues) and generate some "editor-readable" results) 

I can then review all of the outputs in a single step, adapt those with issues, or exclude them from the next batch run, which would automatically migrate all of the projects without issues. The workflow would boil down to those themes with issues (which is perfectly fine). Right now, I have to go through all of this manually, which takes a considerable amount of time... "

Consider the option to support the Telerik/Kendo hierarchical grids or grid grouping through separate component templates.

For example,

https://demos.telerik.com/aspnet-mvc/grid/hierarchy 

https://www.telerik.com/kendo-angular-ui/components/grid/grouping/basics/ 

The hierarchical grids are visualized with a master row similar to the Grouping Row template. However, it is currently impossible to directly style the hierarchical master row.


Example for grid groups


https://stackblitz.com/run/?file=src%2Fapp%2Fapp.component.ts 

Greetings,

I would like to delete the custom font named Roboto_embedded from one of my ThemeBuilder projects (ID: ...580b) but I cannot do it.

I also noticed I cannot edit this specific custom font either.

I don't really know how this happened. Maybe that comes from the fact that at some point, I tried creating a CSS font stack in the $kendo-default-typography variable? I noticed the behavior of ThemeBuilder was strange when I tried to do that.

Greetings,

I was trying to use the export/import metadata feature and noticed I couldn't import metadata in a given project if the exported metadata came from a theme whose type (Default, Bootstrap, Material, Fluent, Classic) doesn't match the target project's. Fair enough.

However, I couldn't find any easy way to find out which theme type a given project uses. Currently, I export the metadata and read the project.theme.id key in data.json file. It would be nice to add this piece of information on the ThemeBuilder home dashboard.

I also find it inconvenient to have to create a project first, choose the right theme type and then import. It would be much more efficient to create the project and import in a single operation, e.g. by adding an option to import metadata in the Create New Project modal.

Greetings,

I know it is possible to access these variables in SCSS given the right setup. However users might not always be in position to have that, for various reasons, e.g.:

• a person that doesn't have the time to setup that
• a person that doesn't want to setup that
• a person that doesn't know how to setup that
• a person that isn't authorized to setup that and has access only to the final CSS file

I think it would be nice to make ThemeBuilder available as CSS custom properties (aka "CSS variables"). Some info about this idea (I guess ThemeBuilder uses SASS behind the scenes?): Convert Sass variables to CSS variables · Issue #3091 · sass/sass (github.com)

Regarding the possibly large amount of variables, I think the ones visible in ThemeBuilder would cover the vast majority of cases.

Whether you intend on doing this or not, could you please document how the exported CSS file is generated behind the scenes? I tried reverse-engineering it since I originally wanted to be able to work on SASS code and then obtain the same result as ThemeBuilder. My guess:

1. SASS generates a minified CSS file (with a sourcemap)
2. minified CSS then go through Autoprefixer (PostCSS plugin)
3. minified and autoprefixed CSS then go through calc (PostCSS plugin)

Thanks!

Consider providing a styling template for the Kendo/Telerik Grid with sticky columns

For example:

https://docs.telerik.com/kendo-ui/controls/grid/columns/sticky-columns#:~:text=Sticky%20columns%20enable%20you%20to,reaches%20left%2Fright%20Grid%20border. 

https://demos.telerik.com/aspnet-mvc/grid/sticky-columns 

https://www.telerik.com/kendo-angular-ui/components/grid/columns/sticky/#:~:text=Columns%20marked%20as%20%22sticky%22%20are,depending%20on%20the%20scrolling%20direction. 

Note:

Currently, in Kendo UI for React a similar concept is the locked columns https://www.telerik.com/kendo-react-ui/components/grid/columns/locked/ 

 

ThemeBuilder allows styling of Button focus outline (through ::after pseudo element).

This is unfortunately not available for DropDownButton, although the component uses internally the same mechanism for focus outline as Button.