Currently you can only use and customize the default 6 Chart series colors (Kendo Colors Series A, B,C,D,E and F) using ThemeBuilder. Any additional ones needs to be defined in the component code. This is not ideal if you want to manage all colors from ThemeBuilder.

The request to have either have the ability to add new Chart series colors in the ThemeBuilder which you can use with the chart or have more variables exposed at the beginning 25+

Currently, the Drawer components (such as Drawer and Drawer Mini) come with a right border that can't be modified through ThemeBuilder:

Consider exposing a template that allows to modify this border.

I want to upload 2 variants of the same font (let's say Roboto with weight 300 and 500).

Then I want to configure the same font family for both of them.

This is currently not allowed (see attached screenshot).

I have to choose different names which results in an export like this:

@font-face {
  font-family: Roboto300;
  src: url('../fonts/roboto-v18-latin_latin-ext-300.woff') format('woff');
  font-style: normal;
  font-weight: 300;
  font-display: auto;
}

@font-face {
  font-family: Roboto500;
  src: url('../fonts/roboto-v18-latin_latin-ext-500.woff') format('woff');
  font-style: normal;
  font-weight: 500;
  font-display: auto;
}

But what I want to achieve is this:

@font-face {
  font-family: Roboto;
  src: url('../fonts/roboto-v18-latin_latin-ext-300.woff') format('woff');
  font-style: normal;
  font-weight: 300;
  font-display: auto;
}

@font-face {
  font-family: Roboto;
  src: url('../fonts/roboto-v18-latin_latin-ext-500.woff') format('woff');
  font-style: normal;
  font-weight: 500;
  font-display: auto;
}

My use case is that I want to set the font family only once and the just set different font-weight for individual components.

Also, we have migrated to Kendo / ThemeBuilder in our existing project which relies on fonts to be configured this way.

Hello,

I am noticing that there are several styles that we cannot access through ThemeBuilder such as adding transitions, custom icons, etc. We would like the ability to export the ThemeBuilder package, add custom styles, then import back into ThemeBuilder. Is this possible? If not, this would be a great feature.

Thanks!
Ian

Hello,

It would be great if Themebuilder had version control built into the tool so that our designers could view previous versions of the theme styles and revert back if necessary. Currently, we are planning on downloading the files and pushing to git, but this is very cumbersome.

Thanks for considering this!

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.

Currently, there are no means to style the clear button of the DropDownTree component.

Consider exposing a template for the clear button (similar to the "(span) Input" component part).

requested through t.1660254

Consider generating utility classes for variables to apply and reuse styles easily. For example, the user defines a color variable in ThemeBuilder called "component," and this makes ThemeBuilder generate utility classes:

.k-color-component {
  color: #ffeb3b;
}
.\!k-color-component {
  color: #ffeb3b !important;
}
.k-bg-component {
  background-color: #ffeb3b;
}
.\!k-bg-component {
  background-color: #ffeb3b !important;
}

These utility classes can then be applied and reused in code outside of ThemeBuilder:

<div class="k-color-component"></div>

Currently, in ThemeBuilder, the generated styles for the Telerik/Kendo component Breadcrumb are only for the collapse mode "wrap". However, in Telerik UI for Blazor, Kendo UI for Angular, and others, the Breadcrumb component supports different collapse mode values, such as "auto" and "none":

https://docs.telerik.com/blazor-ui/components/breadcrumb/collapse-modes

https://www.telerik.com/kendo-angular-ui/components/navigation/breadcrumb/collapse-modes/ 

Consider providing templates to allow the generation of styles for other collapse modes.

Requested through t.1660021

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.

It would be helpful to add a feature to ThemeBuilder that allows users to create theme variable modes based on typography variables, similar to the existing feature that lets them create themes based on color and metrics.

This will enable users to generate different themes within a single project by simply changing the fonts used.

Requested through t.1656320

Currently, in ThemeBuilder there is a template that allows you to style the icon of a header cell that is filterable.

However, we need to be able to style the icon in a header cell that triggers the ColumnMenu (the more icon)

https://demos.telerik.com/aspnet-core/grid/column-menu 

https://www.telerik.com/kendo-react-ui/components/grid/interactivity/column-menu/ 

requested through t.1655985

Currently, in ThemeBuilder, you can't style DropDownList, which uses groups.

https://demos.telrik.com/kendo-ui/dropdownlist/grouping 

https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/grouping/ 

Consider the option to expose a template that will allow adding custom styles for DropDownList with grouping.

Requested through t.1645162

I need to be able to enter `rem` (or even `em`) values for metrics like `padding`.

Hello.

One of our component is styled in a way that makes it indistinguishable from the background, which is unfortunate and makes hard to review its visuals.

Could you add support for selecting different background in previews? Something like gray shades or a pattern?

Consider exposing a ThemeBuilder template for the Popup component.

https://www.telerik.com/kendo-react-ui/components/popup/ 

https://docs.telerik.com/kendo-ui/controls/popup/overview 

https://docs.telerik.com/blazor-ui/components/popup/overview 

https://www.telerik.com/kendo-angular-ui/components/popup/ 

https://github.com/telerik/kendo-themes/blob/develop/tests/popup/popup-no-data.html 

When an element is selected in ThemeBuilder, it shows its Parts and Properties on the right and a Live Preview at the bottom. I would really benefit from seeing the HTML code/markup (snippet), e.g. `<button kendoButton themeColor="primary" fillMode="flat">Button</button>`. I'm trying to decipher what attributes I should be using by looking at the applied classes, but it's not always 1-to-1 or clear.

Steps to reproduce the bug

In Themebuilder:

1. enable Advanced edit and edit the Grid component.
2. Once there, in Grid Construction Elements, go to the GRID DEFAULT part.
3. In the top-right element tree area, go in <div> Grid ---> <table> Table.
4. Once there, set the Table > Border Collapse property to Separate
5. Finally try applying two different values for vertical and horizontal spacing in the Table > Border Spacing property. If necessary, apply a visible border to cells to better see the issue.
   

Expected behavior : The two different values should be persisted and applied.

Actual behavior : The behavior is strange and editing one value seem to overwrite the other.