Unable to customize the theme

I'm submitting a ...

Regression report

Current behavior

According to the documentation, the recommended method to customise the theme is to use our project build tool:

(Recommended) Use the build process of your application (webpack/angular-cli)—This approach simplifies upgrades to new component and theme package versions.

This is however no longer working due to the extension of compound selectors in some of the theme files:

https://github.com/telerik/kendo-themes/blob/develop/packages/default/scss/calendar/_theme.scss#L61 https://github.com/telerik/kendo-themes/blob/develop/packages/default/scss/toolbar/_layout.scss#L105

There are probably more instances of this.

Expected behavior

We should be able to build from the scss source files.

Minimal reproduction of the problem with instructions

Currently attempting to reproduce in stackblitz

What is the motivation or use case for changing the behavior?

Environment

Product:

Kendo Ui for Angular

Package versions:

nwa-uikit-web-demo@0.2.6 /Users/bastien.lemaire/workspace/nwa-uikit-web
├── @angular-devkit/build-angular@0.13.8
├── @angular-devkit/build-ng-packagr@0.13.8
├── @angular/animations@7.2.13
├── @angular/cli@7.3.8
├── @angular/common@7.2.13
├── UNMET PEER DEPENDENCY @angular/compiler@7.2.13
├── @angular/compiler-cli@7.2.14
├── @angular/core@7.2.13
├── @angular/forms@7.2.13
├── @angular/language-service@7.2.14
├── @angular/platform-browser@7.2.13
├── @angular/platform-browser-dynamic@7.2.13
├── @angular/router@7.2.13
├── @angularclass/hmr@2.1.3
├── @compodoc/compodoc@1.1.9
├── @ngx-prism/core@2.0.1
├── @ngxs/devtools-plugin@3.4.3
├── @ngxs/hmr-plugin@3.4.3
├── @ngxs/logger-plugin@3.4.3
├── @ngxs/schematics@0.0.1-alpha.5
├── @ngxs/store@3.4.3
├── @oclif/command@1.5.13
├── @oclif/config@1.12.12
├── @oclif/dev-cli@1.22.0
├── @oclif/plugin-help@2.1.6
├── @oclif/plugin-warn-if-update-available@1.7.0
├── @oclif/tslint@3.1.1
├── @progress/kendo-angular-buttons@4.4.0
├── @progress/kendo-angular-dateinputs@3.7.2
├── @progress/kendo-angular-dropdowns@3.5.3
├── @progress/kendo-angular-inputs@4.2.1
├── @progress/kendo-angular-intl@1.7.0
├── @progress/kendo-angular-l10n@1.4.0
├── @progress/kendo-angular-layout@3.3.0
├── @progress/kendo-angular-ripple@1.1.1
├── @progress/kendo-theme-material@2.4.1
├── @types/execa@0.9.0
├── @types/inquirer@6.0.0
├── @types/jasmine@3.3.12
├── @types/jasminewd2@2.0.6
├── @types/lodash@4.14.123
├── @types/node@11.11.8
├── @types/prismjs@1.16.0
├── chalk@2.4.2
├── classlist.js@1.1.20150312
├── cli-ux@5.2.1
├── codelyzer@4.5.0
├── core-js@2.6.5
├── del@4.1.0
├── execa@1.0.0
├── globby@8.0.2
├── gulp@4.0.1
├── gulp-watch@5.0.1
├── husky@1.3.1
├── inquirer@6.3.1
├── jasmine-core@3.3.0
├── jasmine-spec-reporter@4.2.1
├── karma@4.0.1
├── karma-chrome-launcher@2.2.0
├── karma-coverage-istanbul-reporter@2.0.5
├── karma-jasmine@2.0.1
├── karma-jasmine-html-reporter@1.4.0
├── karma-scss-preprocessor@4.0.0
├── lint-staged@8.1.5
├── listr@0.14.3
├── lodash@4.17.11
├── lodash-es@4.17.11
├── matches-selector-polyfill@1.0.0
├── UNMET PEER DEPENDENCY ng-packagr@5.1.0
├── ngx-build-plus@7.8.1
├── node-sass-package-importer@5.3.1
├── node-sass-tilde-importer@2.0.0-alpha.1
├── path@0.12.7
├── prettier@1.17.0
├── prismjs@1.16.0
├── protractor@5.4.2
├── rxjs@6.5.1
├── rxjs-compat@6.5.1
├── ts-node@8.0.3
├── tsickle@0.34.3
├── tslib@1.9.3
├── tslint@5.14.0
├── tslint-config-prettier@1.18.0
├── tslint-plugin-prettier@2.0.1
├── UNMET PEER DEPENDENCY typescript@3.2.4
├── url-polyfill@1.1.5
├── web-animations-js@2.3.1
└── zone.js@0.8.29

Browser:

Chrome (MacOs) version 73.0.3683.103

System:

TypeScript version: 3.2.4
Node version: v10.8.0
Platform: Mac

I'm building the theme using angular cli (see version in npm ls logs) the command used is ng serve app --open --host 0.0.0.0 --disable-host-check --port=6660

telerik / kendo-themes