Material Theme - Argument `$color` of `rgba($color, $alpha)` must be a color

[Robouste]

Describe the bug When importing material grid file, the application doesn't compile

Argument `$color` of `rgba($color, $alpha)` must be a color
      in C:\Repos\s-ramps-POC\node_modules\@progress\kendo-theme-material\scss\_variables.scss (line 48, column 37)

To Reproduce Simply import the grid theme scss file into your main scss file

@import "~@progress/kendo-theme-material/scss/grid";

Screenshots

Browser

• OS: Windows 10

Additional context

+-- @angular-devkit/build-angular@0.801.1
+-- @angular/animations@8.1.1
+-- @angular/cdk@8.1.1
+-- @angular/cli@8.1.1
+-- @angular/common@8.1.1
+-- @angular/compiler@8.1.1
+-- @angular/compiler-cli@8.1.1
+-- @angular/core@8.1.1
+-- @angular/forms@8.1.1
+-- @angular/language-service@8.1.1
+-- @angular/material@8.1.1
+-- @angular/platform-browser@8.1.1
+-- @angular/platform-browser-dynamic@8.1.1
+-- @angular/router@8.1.1
+-- @progress/kendo-angular-buttons@5.0.0
+-- @progress/kendo-angular-common@1.0.0
+-- @progress/kendo-angular-dateinputs@4.0.1
+-- @progress/kendo-angular-dropdowns@4.0.0
+-- @progress/kendo-angular-excel-export@3.0.0
+-- @progress/kendo-angular-grid@4.0.0
+-- @progress/kendo-angular-inputs@6.0.0
+-- @progress/kendo-angular-intl@2.0.0
+-- @progress/kendo-angular-l10n@2.0.0
+-- @progress/kendo-angular-pdf-export@2.0.0
+-- @progress/kendo-angular-popup@3.0.0
+-- @progress/kendo-angular-ripple@2.0.0
+-- @progress/kendo-data-query@1.5.1
+-- @progress/kendo-drawing@1.5.12
+-- @progress/kendo-theme-default@4.0.0
+-- @progress/kendo-theme-material@3.0.0
+-- @types/jasmine@3.3.13
+-- @types/jasminewd2@2.0.6
+-- @types/node@8.9.5
+-- chart.js@2.8.0
+-- codelyzer@5.1.0
+-- hammerjs@2.0.8
+-- jasmine-core@3.4.0
+-- jasmine-spec-reporter@4.2.1
+-- karma@4.1.0
+-- karma-chrome-launcher@2.2.0
+-- karma-coverage-istanbul-reporter@2.0.5
+-- karma-jasmine@2.0.1
+-- karma-jasmine-html-reporter@1.4.2
+-- ng2-charts@2.3.0
+-- node-sass@4.12.0
+-- protractor@5.4.2
+-- rxjs@6.4.0
+-- ts-node@7.0.1
+-- tslib@1.10.0
+-- tslint@5.15.0
+-- typescript@3.4.5
`-- zone.js@0.9.1

[Robouste]

Any update on this ? Using Material Theme is a requirement to our project

[Robouste]

I've looked a bit into the variables.scss, and it looks like either the theme is not loaded correctly, either there is an error in the way to retrieve certain values.

The error occurs because this line (48) returns nothing:

$elevation: map-get( $theme, elevation ) !default;

When I print the $theme, I can see there is not direct property called "elevation". So If I switch to:

$foreground: map-get($theme, foreground);
$elevation: map-get( $foreground, elevation ) !default;

There is no more error at the line 48 but an other one further at this line:

$grouping-header-text: rgba($base-text, .54) !default;

It crashes because the $base-text comes from this value:

$component-text: map-get($theme, component-text) !default;

But when I print out $theme, I don't even see a property "component-text".

So, I guess the $theme variable does not contain what it should, or the scss code simply doesn't work.

[handcraftedsource]

I had the same problem. It seems to be caused by non values in the true-mix function. In my case, $button-border was none. After I initialized the value with a color before import, the error disappears.

[joneff]

I recently updated, and close, another similar issue -- #1557. In a way the are related and on a conceptual level are in fact, duplicates.

I've gone into detail in that issue what the main culprit is, but in short its variable ownership and expectations. In this particular case, we are expecting $theme to be a map and not any map, but a very specific one.

Can we change the name of the variable in question to be something else? Absolutely! Can we guarantee that someone will not come with the same name? Not at all!

The problem can be truly solved in two ways: rename all variables to $kendo- for node-sass and use sass modules for dart-sass.

[Juveniel]

All Kendo themes variables are prefixed with $kendo- starting with version 6.0.0 of the themes. See the changelog.

Marking this as resolved.