When can I start exporting Figma variables into a Kendo theme?

I have read the documentation, but I'm feeling confused about how to implement an optimal approach for limiting color choices to red, green, and blue in my project. I am using the themebuilder to create a customized theme, and this themebuilder provides a single CSS file that I can apply in my project. Could you please guide me on how to switch between at least three different themes, each with distinct red, green, and blue color combinations? I'm finding it challenging to grasp this process despite having read the documentation."

 This type is used in a CSS file in the provided Kendo ThemeBuilder

When hovering over a row in a grid k-alt is being added and causing some weird spacing and padding issues that I can't figure out where it's being set.  This is happening in both ThemeBuilder as well as the export CSS we're trying to use for our app.  

Can you please let me know how we can set this in ThemeBuilder?

I am trying to build a theme for our application, and we have chosen to build upon the material theme.
When I try to customize the look & feel of a DataTimeInput control, I am not able to change the Outline variant of that control as I am able to do so with TextBox input or Button controls. 

My first thoughts was that most controls are basicaly input controls and the most generic of input controls is textbox. Changing the textbox's outline variant of the control, would also change the outline characteristics of the datatime or the dropdown control. But that is not happening. The result css does not include such changes. It seems that for other than textbox controls, the only available style to change is the flat fill mode. :(

Why is that? It seems to me that the Appearence options, of all controls, are important and should be available for customization. I cannot give a unified experience to the end user if some controls are customized to our liking and others not. Our UI/UX team choose Material theme and outline fill mode with medium rounding... they need to change the focus color of the drop down list control... and can only do so in the flat fill mode. Changing the textbox's outline, focus color does not change the outline focus color of the dropdown list or combobox outline.

Hello,

 

I am getting the following error while using Themebuilder.

Invalid value for `box-shadow` property. Mismatch syntax: none | <shadow># value: 0 4px 16px 0 rgba(0, 0, 0, 0.12)). Check the "box-shadow" property of your recently edited styles!

 

Because of this I am unable to export CSS.

PFA screenshot.

 

I bought the ThemeBuilder thinking I'd see something more than the current set of default options.

Any chance there's a community place where I can pick up ideas?  I'd love to find a find gallery of Telerik Themes.

 

Thoughts?

 

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.

 

 

 

What's the guidance on how to theme a Locked/Frozen column for the Grid using theme builder?  Right now my team is resorting to an override CSS sheet and we'd love nothing but to integrate this in the generated SCSS.

We want to have a button radius set on normal buttons but the toolbar we want to remove the radius how would you go about doing that in Themebuilder?

Hi,

As you can imagine from the previous questions, we are integrating deeply Figma with our Kendo implementations, and so far it looks great.

3 questions that would be ideal if they are possible to execute:

1. Do you know or do you plan to release a plugin for Figma to generate React code which incorporates Kendo components? For example if we make a layout of the dashboard like the Coffee shop example...would be great if we could generate the sample code which already has Drawer implemented with hardcoded items inside. It would be great if it already had css and html for the App bar using Kendo App bar.
   But also, if we put Grid on the page, go the extra mile to define the columns in Figma, that it gives us a starter React code definition which includes defining the Kendo Grid and appropriate columns.
   
   The aim is not to have a perfect functional code, but to save on writing boiler plate code by hand.
   
   If not with Kendo components, closest possible option or idea?
   
   
   
2. Will the new plugin and addition to Themebuilder Pro support custom styles and tokens as well? For example, we use your components UI Kit, we restyle what we need, but for a title on the dashboard we are missing a style...we create a new color called $title-color, we create a new style called title-style...how can we export that together with Kendo theme changes?
   
   Will the new upcoming plugin be able to do that as well?
   
   So the idea being that we create a unified theme of the app or site which redefines both Kendo components look&feel, but also the custom html fragements as well.
   
   
   
3. We create a new style...for example we have a case that we need a style for 100% transparency. And we want to apply it to one of your components, which we can in the design system...in this case a Drawer item...we basically want to put a newly created style to make our drawer components fully transparent to the main background.
   
   How will the Themebuilder plugin handle this and what is the path to make this happen?

 

Thank you!

Sanja