Theming the components through mixins doesn't seem to work anymore after upgrading from angular 11 to 12

Question

I'm trying to update my custom theme from Angular Material 11 to 12. My problem is when i want to include my mixins they are not imported anymore.

Below a very light version of my code:

My angular 11 code (worked before upgrading to angular 12)

@use '~@angular/material' as mat;
@mixin mat-slide-toggle-theme($theme) {
  $is-dark: map_get($theme, is-dark);
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  $thumb-unchecked-hue: if($is-dark, 400, 50);
  $thumb-checked-hue: default;

  $bar-unchecked-color: mat.get-color-from-palette($foreground, disabled);
  $ripple-unchecked-color: mat.get-color-from-palette($foreground, base);

  .mat-slide-toggle-thumb {
    @include _mat-theme-elevation(1, $theme);
    background-color: red; // For example
  }

}

@include mat.slide-toggle-theme($nest-theme);

EXPECT mat-slide-toggle-thumb to have background-color to equal red

RESULT mat-slide-toggle-thumb has background-color equal to red

My sass code with angular 12

@use '~@angular/material' as mat;
@use 'sass:map';
@use '~@angular/material/core/style/private';
@use '~@angular/material/core/theming/palette';
@use '~@angular/material/core/theming/theming';
@use '~@angular/material/core/typography/typography';
@use '~@angular/material/core/typography/typography-utils';

@mixin _checked-color($palette, $thumb-checked-hue) {
  &.mat-checked {
    .mat-slide-toggle-thumb {
      background-color: theming.get-color-from-palette($palette, $thumb-checked-hue);
      background-color: red !important;;
    }
  }
}

@mixin color($config-or-theme) {
  $config: theming.get-color-config($config-or-theme);
  $is-dark: map.get($config, is-dark);
  $primary: map.get($config, primary);
  $accent: map.get($config, accent);
  $warn: map.get($config, warn);
  $background: map.get($config, background);
  $foreground: map.get($config, foreground);

  $thumb-unchecked-hue: if($is-dark, 400, 50);
  $thumb-checked-hue: default;

  $bar-unchecked-color: theming.get-color-from-palette($foreground, disabled);
  $ripple-unchecked-color: theming.get-color-from-palette($foreground, base);

  .mat-slide-toggle-thumb {
    @include private.private-theme-elevation(1, $config);
    background-color: red !important; // FOR EXAMPLE
  }

}

@mixin typography($config-or-theme) {
  $config: typography.private-typography-to-2014-config(
      theming.get-typography-config($config-or-theme));
  .mat-slide-toggle-content {
    font-family: typography-utils.font-family($config);
  }
}

@mixin _density($config-or-theme) {}

@mixin theme($theme-or-color-config) {
  $theme: theming.private-legacy-get-theme($theme-or-color-config);
  @include theming.private-check-duplicate-theme-styles($theme, 'mat-slide-toggle') {
    $color: theming.get-color-config($theme);
    $density: theming.get-density-config($theme);
    $typography: theming.get-typography-config($theme);

    @if $color != null {
      @include color($color);
    }
    @if $density != null {
      @include _density($density);
    }
    @if $typography != null {
      @include typography($typography);
    }
  }

  // I tried here it too with no success
  .mat-slide-toggle-thumb {
    @include _mat-theme-elevation(1, $theme);
    background-color: red !important;
  }

}

// the include below doesn't seems to work even if i change @mixin theme to @mixin slide-toggle-theme
// @include mat.slide-toggle-theme($nest-theme);

EXPECT mat-slide-toggle-thumb to have background-color to equal red

RESULT mat-slide-toggle-thumb has NOT background-color equal to red

I've also tried to use @use and @forward but with no success, it seems that the project only compile and use the one (slide-toggle-theme) from material and not mine

@forward './slide-toggle/slide-toggle-theme' as slide-toggle-* show slide-toggle-theme, slide-toggle-color, slide-toggle-typography;

Can you tell me what I'm doing wrong ?

Answer 1

Ok i found my error:

In my custom theme I need to import and include the custom slide-toggle-theme :

@use './components/slide-toggle/_slide-toggle-theme' as slide-toggle-theme;
// all the theming configuration
$my-primary: mat.define-palette($mat-custom);
$my-accent:  mat.define-palette($mat-accent, A200, A100, A400);
$my-warn:    mat.define-palette(mat.$red-palette);
// Create the theme object
$my-theme: mat.define-light-theme($my-primary, $my-accent, $my-warn);

// including Nest theme
@include mat.all-component-themes($my-theme);
@include slide-toggle-theme.theme($my-theme);

DOC: https://material.angular.io/guide/theming-your-components