Is it possible to see the css classes affected by advanced edit? For example, which k-drawer* classes (for example k-drawer, k-drawer-content, etc.) are affected by which components in the Advanced Edit for Drawer?

I know I can export a project and look at the css but I don't know, for example, how I would change the style for in the k-drawer-content class using ThemBuilder Pro.

Thank you,

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"
    }

Hello,

I think it would be very useful if ThemeBuilder editor could somehow highlight changes done to components, their parts and their properties. 

Currently, when I want to review styling changes that I (or my coworkers) made in the past, I have to go through every part of component and look for the "revert" button.

If those changes were highlighted (see attached screenshot), it would greatly improve our workflow with ThemeBuilder.

Hello,

We are planning on setting many custom variables and would like more control over their ordering and naming.

• Enable sorting of custom variables
• Enable numbers in variable names

Thank you for your consideration!

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.

We started using Kendo / ThemeBuilder in our existing project which is using this root font size:

html {
    font-size: 10px;
}

This obviously cause issues with Kendo themese and ThemeBuilder which expects this value to be 16px.

Is there a way to configure this in ThemeBuilder or could this be implemented in the future?

Alternative solution would be to switch to 16px in our project. Which means we would have to recompute all CSS values which are using rem units.

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

Hello,

Would you please add a focused state to the tabs component in the ThemeBuilder.

Thanks

Hello,

Could you please add editable states to the PanelBar > Child Item Level 2, so that it can have a proper indent?

Thanks

I would like to be able to set the style for the focus state for all the input controls in one place.

Currently I would need to select each control, go the advanced edit and set my style. If I then need to make a small change to that style I have to repeat the process for each individual component.

It would be useful if there was a selector on the title bar of each component group that allowed you to set a styles for all the components in the group for states such as hover, focus etc.

Add support for custom fonts and custom icon fonts in the ThemeBuilder Pro. 

The functionality will include the upload of custom fonts. Users can use uploaded fonts as a font family for selected component parts. 

If the font is an icon font after the upload in the ThemeBuilder the users will be able to choose which icon to use from this font via the Content editor in the Property grid.

Add ability to style the table headers in Scheduler

Add support for all possible Button variants and configurations in ThemeBuilder. This includes all possible variants for: 

• size
• shape
• rounded
• fillMode
• themeColor

I have a pro subscription for the new theme builder app and want to create a custom variable that is neither a color nor typography related but cannot find a way to do this.

My use case is that I want to create a variable that has a size (such as 5px) that I can then assign to the margin property of a number of components. I could then adjust this property and all the components would update at once (the same as changing the primary-color changes all components).

How would I acheive this?

Thanks