Covalent: Theme not working

[hrandika]

This repository's issues are reserved for feature requests and bug reports.

Do you want to request a feature or report a bug?

bug

Bug Report

After upgrading to beta 4 theme.scss give following error.

./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader!./~/sass-loader!./src/theme.scss
Module build failed:
$opacity: if(opacity($color) < 1, opacity($color), $opacity);
^
Argument $color of opacity($color) must be a color

Backtrace:
node_modules/@covalent/core/common/styles/_theme-functions.scss:58, in function opacity
node_modules/@covalent/core/common/styles/_theme-functions.scss:58, in function if
node_modules/@covalent/core/common/styles/_theme-functions.scss:58, in function mat-color
node_modules/@angular/material/_theming.scss:2540, in mixin mat-slider-theme
node_modules/@angular/material/_theming.scss:2757, in mixin angular-material-theme
stdin:21
in /home/randika/Documents/projects/java/sts/extend/extend-spring-boot-sample/apps/web/angular/node_modules/@covalent/core/common/styles/_theme-functions.scss (line 58, column 16)
@ ./src/theme.scss 4:14-194
@ multi ./src/styles.css ./~/@covalent/core/common/platform.scss ./src/theme.scss

What is the expected behavior?

Themes to work as normal

Which version of Angular and Material, and which browser and OS does this issue affect?

"angular/core" : "^4.0.0",
"angular/animations" : "^4.1.3",
"angular/material" : "^2.0.0-beta.6",

Chome : Version 56.0.2924.87 (64-bit)
Linux Ubuntu 16.04

Did this work in previous versions of Angular / Material?

Yes with Beta.3

[emoralesb05]

There seems to be a problem with theming when upgrading to [email protected]. For now use [email protected] while we find out why this happens

[hrandika]

@emoralesb05 thanks. Looking forward for a fix.

[emoralesb05]

To be able to replicate it, can you post your themes.scss and styles.scss please?

And possibly how you are including the platform.css

[emoralesb05]

Cant seem able to replicate this..

[mmoravcik]

Happening to me with "@angular/material": "2.0.0-beta.6"
Works with 2.0.0-beta.5

My styles.scss:

`
@import '~@angular/material/theming';
@import '~@covalent/core/theming/all-theme';

// (optional) Additional themes
@import '~@covalent/core/file/file-theme';

@include mat-core();

$primary: mat-palette($mat-orange, 800);
$accent: mat-palette($mat-light-blue, 600, A100, A400);
$warn: mat-palette($mat-red);

$theme: mat-light-theme($primary, $accent, $warn);

@include angular-material-theme($theme);
@include covalent-theme($theme);

// (optional) Additional themes
@include td-file-theme($theme);
@include td-expansion-panel-theme($theme);
`

[hrandika]

in theme.scss

@import '~@covalent/core/theming/all-theme' // This gives me the error.

using angular cli and in .angular-cli, Have the following
...
"styles" : [ "styles.css", "../node_modules/at.covalent/core/common/platform.scss", "theme.scss" ],
...

[emoralesb05]

Still not able to replicate it..

So this is our theme.scss in our products

@import '~@angular/material/theming';
@import '~@covalent/core/theming/all-theme';

@include mat-core();

$primary: mat-palette($mat-orange, 800);
$accent:  mat-palette($mat-light-blue, 600, A100, A400);

// The warn palette is optional (defaults to red).
$warn:    mat-palette($mat-red, 600);

$theme: mat-light-theme($primary, $accent, $warn);

@include angular-material-theme($theme);
@include covalent-theme($theme);

and our .angular-cli.json

"styles": [
        "styles.scss",
        "theme.scss",
        "../node_modules/@covalent/core/common/platform.css" // even tried it with scss here
      ],

Are there any major differences? I think i know what causes it, but i still havent been able to replicate it to make sure..

Using CLI 1.0.3, [email protected] and @[email protected]

[emoralesb05]

nvm, did manage to replicate it.

Turns out if you use relative paths instead of ~@covalent/core and ~@angular/material it loads the theming in a diff order.

[emoralesb05]

Already merged the fix, can you all try pointing to the nightly build and test it out please? 😄

[RicardoVaranda]

Hey @emoralesb05, Thanks for the fix on the nightly any timeline on when this will be pushed to the main repo??

[emoralesb05]

We are currently waiting on [email protected] to release, since once its released its gonna break 2 of our directives internally (since we were using private animation API's), so we want to save people from that hassle and fix it before we release so both things go out at the same time.

Once 4.2.0 is released, and we can merge https://github.com/Teradata/covalent/pull/608 which is already good to go, we will release asap after that.

[RicardoVaranda]

@emoralesb05 Makes total sense to me, thanks for the update! 👍

[ranouf]

Hi,

I have the same issue, I have the 4.2.0 angular material packages and the pb is still there:
https://github.com/Teradata/covalent/issues/690

[emoralesb05]

did you upgrade to [email protected]?

[ranouf]

"@ covalent/core": "^1.0.0-beta.5",
Yes I did, the only fix was to use the nightly build, but I dont really like this solution

[ranouf]

With version ^1.0.0-beta.5-1, the problem is gone