Angular 16 with Angular Material, warnings in console

Issue

I updated Angular to version 16 (16.2.6), as did the Angular material (@angular/material": "^16.2.8). For some reason, I'm getting a lot of warnings in the console. Such as:

./pathngResource - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
Angular Material themes should be created from a map containing the keys "color", "typography", and "density". The color value should be a map containing the palette values for "primary", "accent", and "warn". See https://material.angular.io/guide/theming for more information.

node_modules/@angular/material/core/theming/_theming.scss 186:5              define-light-theme()
src/assets/styles/material/_material.variables.scss 8:9                      @import
assets/styles/_variables.scss 2:9                                            @import
src/app/modules/ui/table-hidden-field/table-hidden-field.component.scss 1:9  root stylesheet

material.variables.scss:

@use '@angular/material' as mat;
@include mat.all-component-typographies();
@include mat.core();

$primary: mat.define-palette(mat.$indigo-palette);
$accent: mat.define-palette(mat.$teal-palette);
$warn: mat.define-palette(mat.$red-palette);
$theme: mat.define-light-theme($primary, $accent, $warn);

$background: map-get($theme, background);
$foreground: map-get($theme, foreground);

/* stylelint-disable function-parentheses-space-inside */

$custom-typography: mat.define-typography-config(
  $font-family: 'Roboto, monospace',
  $headline-5: mat.define-typography-level(24px, 32px, 400),
  $body-2: mat.define-typography-level(14px, 20px, 400)
);

/* stylelint-enable */

$config: mat.define-typography-config();

@include mat.all-component-themes($theme);

(also used MDC migration) what am I missing?

Solution

I only guess because i don't have an example in front of me. You miss a definition part in your material.variables.scss.

On the Material Theme Docs, there is a block with definitions you are missing. See the link the error is giving.

Example from docs:

$my-theme: mat.define-light-theme((
 color: (
 primary: $my-primary,
 accent: $my-accent,
 warn: $my-warn,
),
 typography: mat.define-typography-config(),
 density: 0,
));

Answered By - Schrader