Using Kendo Theme Builder

[dlcole]

Environment ✔ Component nativescript has 8.1.5 version and is up to date. ✔ Component @nativescript/core has 8.1.5 version and is up to date. ✔ Component @nativescript/ios has 8.1.0 version and is up to date. ✔ Component @nativescript/android has 8.1.1 version and is up to date.

Describe the bug I'm trying to follow the instructions in this plugin's readme to create a custom theme that works with NativeScript-theme 2.0. The instructions read:

The theme now supports inheriting the Kendo UI ThemeBuilder theme variables. Just head there, customize your Keno UI SASS theme and hit the Download button. You will get a ZIP with two files in it - the theme CSS that you can use to style your web app, and variables.scss - the one you need for your NativeScript theme.

OK, I followed the link to the Progress Sass Theme Builder. I have a NativeScript JavaScript project, so it wasn't clear which product I should choose. I selected UI for JSP by process of elimination. I created a theme and downloaded it, but instead of the two files referenced above I have three: .json, .scss, and .css. Now the instructions are no longer pertinent.

Maybe this is a doc error, or maybe the link is wrong and the Progress Sass Theme Builder is actually different from the Kendo UI ThemeBuilder. Additional searches haven't yielded any insights.

To Reproduce Follow the instructions under Kendo UI ThemeBuilder support in this repository's readme.

Expected behavior Create a theme, download it, and have it just as usable as any of the built-in themes, including css variables.

Sample project n/a

Additional context

[dlcole]

Looking further, I can see that the .scss file contains the variables previously in variables.scss, so to that extent the doc is just out of date. But, when I apply the variables as per the doc, none of the theme css variables are set, such as --light-primary, --light-accent, etc.

For example, if I choose the "Kendo UI for Angular" for the product, click "Start Theming", choose "Material" as the base theme, scroll to the bottom and click "Create", and then simply click on "Download", the resulting .scss file contains just this:

$border-radius: 2px;
$primary-palette-name: indigo;
$secondary-palette-name: pink;
$theme-type: light;
$adjust-contrast: true;

@import "~@progress/kendo-theme-material/dist/all.scss";

The instructions for using the theme builder indicate only the variables are needed, so I comment out the @import statement, save the .scss file in my app folder, and import it in _app-common.scss thusly:

@import 'test-theme'; // <- .scss variables created by Kendo Theme Builder

@import '@nativescript/theme/core';
// @import '@nativescript/theme/blue';

When I run with this on an iOS emulator, there are no visible changes to the UI. I am assuming the theme builder instructions are out of date, but this is such an advertised feature, how is it done? That is, how does one create a theme using the Kendo Theme Builder and include it in a NativeScript 8.1 JavaScript project using nativescript-theme 3.0.1?