Consider enhancing the ThemeBuilder applicaiton by providing options to export components  from ThemeBuilder to Figma with the idea that FIgma designers will have an easier way to create Figma files based on the Kendo/Telerik components and their  templates  (including variations, functionalities and states)

Requested through t.1684034

Hello,

We want to create a custom Material theme for our ASP.NET Core web application. We are using the Sass Theme Builder but can only select predefined color swatches for the "Material" base theme. We would like to be able to set custom colors per "subject" just like you can with the "Default" and "Bootstrap" theme. 
Is this possible or are you blocking this on purpose for some reason?

Thank you in advance.

Issue:

The text for the onlabel and offlabel is not shown because the ".k-switch-label-on, .k-switch-label-off" is showing "display: none" and other issues you'll see when testing.  Appears that the SASS Theme Builder doesn't take into consideration the OnLabel and OffLabel parameters.

SASS Theme CSS: line 12087-12096

.k-switch-label-on,
.k-switch-label-off {
    display: none;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    overflow: hidden;
}

Code:

<TelerikSwitch class="ml-2" @bind-Value="@isDark" Width="80px" OnLabel="Dark" OffLabel="Light" OnChange="ThemeHandler" />

Add ability to style the table headers in Scheduler

The style for dialog actions is exported with the following selector 

.k-dialog-wrapper .k-window.k-dialog .k-window-actions.k-dialog-actions.k-actions.k-actions-stretched

This is not applied when I switch actions bar to a different layout than the default

<DialogActionsBar layout="start">
</DialogActionsBar>

.k-actions-stretched

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 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. 

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

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,

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.

Hello,

Do you have any documentation on how best to equate the Themebuilder styles with the Kendo's Figma design kit's styles?

I've changed the hex values and fonts for the Kendo default styles within my Themebuilder project but it is difficult to know which styles in your Figma community design kit to change the hex values, fonts, etc... for, seeing that there are many more/specific styles provided in the Figma kit file that don't match 1-to-1.

I'd like to know this in order to know if there is a best systematic approach to go about this to ensure my Themebuilder project and Figma kit match as close as possible with as little manual corrective work needed on my part afterward.

Thank you!

Best,
Claudia Tommasi

When editing the collapsed state, the border-radius section does not work, in the expanded section everything is fine. Both states have the same variable set. 
Additionally, there is no editing of the FOCUSED state for the header, which occurs in a similar component - PanelBar.

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.

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.

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.

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.

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.