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.

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

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

Hi

What is the recommended way to build the Themebuilder exported scss? 

Hi,

I know it's not directly related to ThemeBuilder, but maybe closest area to ask?

I love the UI Kits for Figma, but want to export them all to Axure and make hi fidelity prototypes with Kendo controls.

Did anyone try this?

When I just use the Axure plugin for Figma, it exports/copies the frames without styles.

 

Thnx!

 

Hi,

I don't understand the workflow now that the Unite UX tool was retired.

Our designers used your Figma UI kits for our custom Kendo React App and have built our design system.

How do I get it now to code with the logic of ThemeBuilder replacing Unite UX?

 

Thank you!

How can I right justify text in the cells (not header) of the first column in my Grid layout using ThemeBuilder Pro? Try to set the first column as shown in reference image.

Thanks!

I try to set 4px border bottom green but nothing applied to the grid

Hello our company is considering using Telerik Angular UI and we have questions regarding creating and installing a custom theme.

Here are the steps we took so far: 

1) progress theme builder for angular material created a project named test-custom-theme. 

2) changed primary color and secondary to our company colors and background to a dark gray just to see that the theme is working. These are extremely simple changes our artists will do much more once we prove out the concept. 

3) exported test-custom-theme from theme builder into a zip. 

4) created a new angular project called telerik-test-app using the angular cli, installed the telerik license and activated.

5) started to follow the readme with the custom theme zip this is where things started to not work.

After generating the theme builder zip I preformed the following steps.

1) The readme says extract the custom theme folder to your application and use it as a standard npm package.

2) Changed dir to telerik-custom-theme and ran npm install

3) added the dependencies to my project's root package.json "telerik-custom-theme": "file:./telerik-custom-theme"

4) navigated to the root of my project and ran npm install. Received the following errors:

PS D:\src\Development\angular\telerik-test-app> npm install
npm ERR! code EISDIR
npm ERR! syscall symlink
npm ERR! path D:\src\Development\angular\telerik-test-app\telerik-custom-theme
npm ERR! dest D:\src\Development\angular\telerik-test-app\node_modules\telerik-custom-theme
npm ERR! errno -4068
npm ERR! EISDIR: illegal operation on a directory, symlink 'D:\src\Development\angular\telerik-test-app\telerik-custom-theme' -> 'D:\src\Development\angular\telerik-test-app\node_modules\telerik-custom-theme'

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\nfisher\AppData\Local\npm-cache\_logs\2023-03-25T15_37_51_187Z-debug.log

These instructions seem simple but for some reason we are missing something can anyone help?