components: Getting SASS error when creating new theme

I had a similar issue, which occurred because when I apply the color, I forgot to use mat-color.

@import '../../../../node_modules/@angular/material/_theming';
@include mat-core();

$podshark-light-primary: mat-palette($mat-grey, A100,A100,A100); //white
$podshark-light-accent:  mat-palette($mat-pink, A200, A100, A400);
$podshark-light-warn:    mat-palette($mat-red);

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

@mixin mat-form-field($theme ) {

  $primary: map-get( $theme, primary);
  $warn: map-get($theme, warn);

  mat-form-field {
    .mat-form-field-underline {
      background-color: $primary; // -> THIS IS WRONG!
      background-color: mat-color($primary); // -> THIS IS RIGHT :)
    }
    .mat-form-field-placeholder {
      color: mat-color($primary);
    }
  }
}

@mixin custom-theme( $theme ) {
  @include mat-form-field( $theme );
}

I have the same issue

I was getting this type of error as well.

@s-f-a-g you would need to use the md-color method like so: @import ‘~@angular/material/core/theming/theming’; $bg-primary: md-color($primary, 700, 0.3); md-toolbar { background-color: $bg-primary; } It was giving the error, because we gave it a palette of colors, not just one color.

Hello,

I reproduced the bug, and in my case, managed to solve it. My problem was simply that a variable in my background theme was missing.

You introduced recently a new variable in the background theme, raised-button. I had my own background theme, but I hadn’t updated it with this new variable, so the compiler was not working anymore. Using the backtrace, I checked the source of the error, and found out pretty easily that angular material was trying to find a variable in my theme that was missing.

Kind regards

Here is the backtrace

argument $color of opacity($color) must be a color

Backtrace: node_modules/@angular/material/core/theming/_theming.scss:55, in function opacity node_modules/@angular/material/core/theming/_theming.scss:55, in function if node_modules/@angular/material/core/theming/_theming.scss:55, in function mat-color node_modules/@angular/material/button/_button-theme.scss:76, in mixin mat-button-theme node_modules/@angular/material/core/theming/_all-theme.scss:31, in mixin angular-material-theme src/stylesheets/sass/_theme.scss:110 Line 55 Column 16 node_modules/@angular/material/core/theming/_theming.scss

@willshowell turns it was the way i defined $accent as

$accent: mat-palette($mat-deep-orange, A400, A50, A900);

it worked in an earlier version, but doesn’t seem to work anymore. i left it like this . . .

$accent: mat-palette($mat-deep-orange, A400);

seems to be ok now

it appears to be related to the mat_progress-bar-theme($theme) function in angular-material-theme($theme). if i comment it out everything works.

@mixin angular-material-theme($theme) {
  @include mat-core-theme($theme);
  @include mat-autocomplete-theme($theme);
  @include mat-button-theme($theme);
  @include mat-button-toggle-theme($theme);
  @include mat-card-theme($theme);
  @include mat-checkbox-theme($theme);
  @include mat-chips-theme($theme);
  @include mat-table-theme($theme);
  @include mat-datepicker-theme($theme);
  @include mat-dialog-theme($theme);
  @include mat-expansion-panel-theme($theme);
  @include mat-grid-list-theme($theme);
  @include mat-icon-theme($theme);
  @include mat-input-theme($theme);
  @include mat-list-theme($theme);
  @include mat-menu-theme($theme);
  @include mat-paginator-theme($theme);
  //@include mat-progress-bar-theme($theme);
  @include mat-progress-spinner-theme($theme);
  @include mat-radio-theme($theme);
  @include mat-select-theme($theme);
  @include mat-sidenav-theme($theme);
  @include mat-slide-toggle-theme($theme);
  @include mat-slider-theme($theme);
  @include mat-tabs-theme($theme);
  @include mat-toolbar-theme($theme);
  @include mat-tooltip-theme($theme);
  @include mat-simple-snack-bar-theme($theme);
}

If someone has a hard time figuring out this problem you need to add a new variable to: $mat-light-theme-background: (…) raised-button: white

// Background palette for light themes. $mat-light-theme-background: ( status-bar: map_get($mat-grey, 300), app-bar: map_get($mat-grey, 100), background: map_get($mat-grey, 50), hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UX card: white, dialog: white, disabled-button: rgba(black, 0.12), raised-button: white, );