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:

""...

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 

Currently, in ThemeBuilder, the generated stypes for the Kendo/Telerik Grid component are for size "medium" (or "md").

However, in Kendo UI for JQuery and other Kendo/Telerik suites, the Grid size property supports other values like "small" and "large". 

https://docs.telerik.com/kendo-ui/controls/grid/appearance/sizing 

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/size

Consider providing ThemeBuilder templates to allow the generation of styles for other Grid sizes

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.

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/ 

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!

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.

Consider the options for providing a ThemeBuilder template for Kendo Spreadsheet

https://demos.telerik.com/kendo-ui/spreadsheet/index

Create templates or component parts that will allow users to customize the styles of the Upload validation messages through the following selectors:

.k-upload .k-file-validation-message,
.k-upload .k-upload-files .k-file-validation-message,
.k-upload .k-file-success .k-file-validation-message,
.k-upload .k-file-error .k-file-validation-message 

Example: https://stackblitz.com/edit/h2vraq?file=src%2Fmain.vue

Problem: To delete a custom variable in ThemeBuilder, it must be detached from all its use places. However, these places are not immediately clear, and there is no global search option to find them.

Goal: Provide a UI option to find/list all places where a variable is used within a ThemeBuilder project.

Hey there, just a question:

Is there a recommended way, how I can use your Blazor components (especially the ThemeBuilder) with Tailwind?

I only want to define the colors once, but use them for Themes generated with a Theme Builder and for Tailwind.

Now, to reset a component to default, you need to click on each layer and look for where it was changed. It would be great to have a button to roll back all settings, for example, like in the screenshot.

Otherwise, it turns out that you spend a lot of time setting up the component, and then return the same amount of time back.

Thanks!

The Kendo Themes recently introduced an accessibility swatch A11y for the Default Ocen Blue theme https://www.telerik.com/kendo-angular-ui/components/accessibility/accessibility-swatch/

Feature request: Support for the Ocean Blue A11y Accessibility Swatch in ThemeBuilder.

Consider the possibility of creating a gallery-like platform to showcase various ThemeBuilder demo projects.

The goal is to demonstrate the potential of creating different themes in ThemeBuilder and customizing various Kendo/Telerik components. The gallery should showcase different supported themes alongside multiple demo projects from the supported frameworks, such as JQuery, Angular, Vue, Blazor, and MVC, with Material, Bootstrap, Fluent, and Default themes.