Kendo UI Theme Builder

[Saquib]

Hi

Does the Kendo UI theme builder support the latest components released yesterday? I've built a theme this morning and included in the my Angular app, and the components are not rendered correctly.

Also, the documentation (https://www.telerik.com/kendo-angular-ui/components/styling/theme-builder/#toc-using-the-themes-in-your-project) talks about using the files all.scss and variables.scss but these files are not included in the theme downloaded.

Thanks

[Saquib]

Is anyone from telerik monitoring the forum and able to provide input?

We have a paid for license with support, would it be better raising this as a support ticket?

[Ivo]

Hi Saquib,

The ThemeBuilder still uses the old component and theme versions.

The issue is currently being worked on and a new version of the ThemeBuilder is expected to be published later on today or tomorrow.

Regarding the documentation - we will update it as soon as possible. There is no longer a variables.scss file, it is now included in the SCSS file which you need to import in your project.

Let us know in case additional information is needed.

Regards,
Ivo
Progress Telerik

[Saquib]

Thanks Ivo. How will I know it has been upgraded (apart from testing and seeing if it works)?

[Ivo]

Hi Saquib,

The new version of the ThemeBuilder is already live.

Please make sure that you either delete your browser cache or open it in incognito window.

Let us know in case additional information is needed.

Regards,
Ivo
Progress Telerik

[Saquib]

So I've generated a new theme (with some minor colour changes) and when using the downloaded css the component styling is broken.

Default theme:

New Theme

The downloaded theme css also has some errors, see attached generated theme. The error list from VS Code:

[{
"resource": "financeapp.css",
"owner": "_generated_diagnostic_collection_name_#3",
"code": "css-propertyvalueexpected",
"severity": 8,
"message": "property value expected",
"source": "css",
"startLineNumber": 13919,
"startColumn": 14,
"endLineNumber": 13919,
"endColumn": 15
},{
"resource": "financeapp.css",
"owner": "_generated_diagnostic_collection_name_#3",
"code": "css-propertyvalueexpected",
"severity": 8,
"message": "property value expected",
"source": "css",
"startLineNumber": 13923,
"startColumn": 11,
"endLineNumber": 13923,
"endColumn": 12
},{
"resource": "financeapp.css",
"owner": "_generated_diagnostic_collection_name_#3",
"code": "unknownProperties",
"severity": 4,
"message": "Unknown property: 'speak'",
"source": "css",
"startLineNumber": 6808,
"startColumn": 5,
"endLineNumber": 6808,
"endColumn": 10
},{
"resource": "financeapp.css",
"owner": "_generated_diagnostic_collection_name_#3",
"code": "emptyRules",
"severity": 4,
"message": "Do not use empty rulesets",
"source": "css",
"startLineNumber": 16439,
"startColumn": 1,
"endLineNumber": 16439,
"endColumn": 34
},{
"resource": "financeapp.css",
"owner": "_generated_diagnostic_collection_name_#3",
"code": "vendorPrefix",
"severity": 4,
"message": "Also define the standard property 'grid-column' for compatibility",
"source": "css",
"startLineNumber": 17906,
"startColumn": 5,
"endLineNumber": 17906,
"endColumn": 20
},{
"resource": "financeapp.css",
"owner": "_generated_diagnostic_collection_name_#3",
"code": "vendorPrefix",
"severity": 4,
"message": "Also define the standard property 'grid-row' for compatibility",
"source": "css",
"startLineNumber": 17907,
"startColumn": 5,
"endLineNumber": 17907,
"endColumn": 17
},{
"resource": "financeapp.css",
"owner": "_generated_diagnostic_collection_name_#3",
"code": "vendorPrefix",
"severity": 4,
"message": "Also define the standard property 'touch-action' for compatibility",
"source": "css",
"startLineNumber": 19874,
"startColumn": 5,
"endLineNumber": 19874,
"endColumn": 21
},{
"resource": "financeapp.css",
"owner": "_generated_diagnostic_collection_name_#3",
"code": "emptyRules",
"severity": 4,
"message": "Do not use empty rulesets",
"source": "css",
"startLineNumber": 28439,
"startColumn": 1,
"endLineNumber": 28440,
"endColumn": 33
},{
"resource": "financeapp.css",
"owner": "_generated_diagnostic_collection_name_#3",
"code": "propertyIgnoredDueToDisplay",
"severity": 4,
"message": "Property is ignored due to the display. With 'display: block', vertical-align should not be used.",
"source": "css",
"startLineNumber": 37051,
"startColumn": 5,
"endLineNumber": 37051,
"endColumn": 27
}]
?

[Ivo]

Hello Saquib,

There were some fixes made so please re-generate the theme in the ThemeBuilder and try again.

If the issue still exists please send us a sample project where we can see the problem and investigate it further.

Regards,
Ivo
Progress Telerik