Update to Angular Material 12

package.json

@@ -12,12 +12,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~12.2.14",
-    "@angular/cdk": "^11.2.11",
+    "@angular/cdk": "^12.2.13",
     "@angular/common": "~12.2.14",
     "@angular/compiler": "~12.2.14",
     "@angular/core": "~12.2.14",
     "@angular/forms": "~12.2.14",
-    "@angular/material": "^11.2.9",
+    "@angular/material": "^12.2.13",
     "@angular/platform-browser": "~12.2.14",
     "@angular/platform-browser-dynamic": "~12.2.14",
     "@angular/router": "~12.2.14",

src/_variables.scss

@@ -18,3 +18,6 @@ $text-color-primary: white;
 
 $color-accent: map-get($theme-accent, 500);
 $color-warn: map-get($theme-error, 500);
+
+$light-primary-text: white;
+$dark-secondary-text: black;

src/custom-theme.scss

@@ -1,21 +1,21 @@
 // Custom Theming for Angular Material
+@use '~@angular/material' as mat;
 // For more information: https://material.angular.io/guide/theming
-@import '~@angular/material/theming';
 // Plus imports for other components in your app.
 
-$custom-typography: mat-typography-config(
+$custom-typography: mat.define-typography-config(
   $font-family: "Open Sans"
 );
 
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
-@include mat-core($custom-typography);
+@include mat.core($custom-typography);
 
 // Define the palettes for your theme using the Material Design palettes available in palette.sass
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
-$theme-primary: mat-palette((
+$theme-primary: mat.define-palette((
   50 : #e0e0e0,
   100 : #b3b3b3,
   200 : #808080,
@@ -46,7 +46,7 @@ $theme-primary: mat-palette((
     A400 : #ffffff,
     A700 : #ffffff,
   )));
-$theme-accent: mat-palette((
+$theme-accent: mat.define-palette((
   50 : #edf9e0,
   100 : #d1f0b3,
   200 : #b3e680,
@@ -78,7 +78,7 @@ $theme-accent: mat-palette((
     A700 : #000000,
   )
 ));
-$theme-warning: mat-palette((
+$theme-warning: mat.define-palette((
   50 : #fff8e4,
   100 : #feefbd,
   200 : #fee491,
@@ -112,15 +112,15 @@ $theme-warning: mat-palette((
 ));
 
 // The warn palette is optional (defaults to red).
-$theme-error: mat-palette($mat-red);
+$theme-error: mat.define-palette(mat.$red-palette);
 
 // Create the theme object (a Sass map containing all of the palettes).
-$color-recipes-explorer-frontend-theme: mat-light-theme($theme-primary, $theme-accent, $theme-error);
+$color-recipes-explorer-frontend-theme: mat.define-light-theme($theme-primary, $theme-accent, $theme-error);
 
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include angular-material-theme($color-recipes-explorer-frontend-theme);
+@include mat.all-component-themes($color-recipes-explorer-frontend-theme);
 
 
 html, body {