Angular 15 Material Theme - SassError: $map: null is not a map

Question

I am trying to update my Angular app to use Angular 15 and I need to update the theming of Angular Material Design, I have created a palette and followed the documentation but I keep getting the following error and I don't know why?

SassError: $map: null is not a map.
  ╷
9 │   $foreground-base: map.get($foreground, base);

So here is my code, I have removed some of the variable definitions for readability:

@use 'sass:map';
@use '@angular/material' as mat;
@include mat.legacy-core();
$typography: mat.define-legacy-typography-config();

$mat-light-theme-foreground: (
  base: black,
  divider: $dark-dividers,
  dividers: $dark-dividers,
  disabled: $dark-disabled-text,
  disabled-button: rgba($dark-text, 0.26),
  disabled-text: $dark-disabled-text,
  elevation: black,
  secondary-text: $dark-accent-text,
  hint-text: $dark-disabled-text,
  accent-text: $dark-accent-text,
  icon: $dark-accent-text,
  icons: $dark-accent-text,
  text: $dark-primary-text,
  slider-min: $dark-primary-text,
  slider-off: rgba($dark-text, 0.26),
  slider-off-active: $dark-disabled-text,
);

$mat-light-theme-background: (
  background: $light-background,
  status-bar: $light-bg-darker-20,
  app-bar: $light-bg-darker-5,
  hover: $dark-bg-alpha-4,
  card: $light-bg-lighter-5,
  dialog: $light-bg-lighter-5,
  tooltip: $dark-bg-tooltip,
  disabled-button: $dark-bg-alpha-12,
  raised-button: $light-bg-lighter-5,
  focused-button: $dark-focused,
  selected-button: $light-bg-darker-20,
  selected-disabled-button: $light-bg-darker-30,
  disabled-button-toggle: $light-bg-darker-10,
  unselected-chip: $light-bg-darker-10,
  disabled-list-option: $light-bg-darker-10,
);

$mat-primary: (
  main: #009534,
  lighter: #b3dfc2,
  darker: #007821,
  200: #009534, // For slide toggle,
  contrast : (
    main: $light-primary-text,
    lighter: $dark-primary-text,
    darker: $light-primary-text,
  )
);
$theme-primary: mat.define-palette($mat-primary, main, lighter, darker);

$mat-accent: (
  main: #009534,
  lighter: #b3dfc2,
  darker: #007821,
  200: #009534, // For slide toggle,
  contrast : (
    main: $light-primary-text,
    lighter: $dark-primary-text,
    darker: $light-primary-text,
  )
);
$theme-accent: mat.define-palette($mat-accent, main, lighter, darker);

$mat-warn: (
  main: #ff0000,
  lighter: #ffb3b3,
  darker: #ff0000,
  200: #ff0000, // For slide toggle,
  contrast : (
    main: $light-primary-text,
    lighter: $dark-primary-text,
    darker: $light-primary-text,
  )
);
$theme-warn: mat.define-palette($mat-warn, main, lighter, darker);
;

$theme: (
  color: (
    primary: $theme-primary,
    accent: $theme-accent,
    warn: $theme-warn,
  ),
  typography: $typography,
  density: 0,
  is-dark: false,
  foreground: $mat-light-theme-foreground,
  background: $mat-light-theme-background,
);


// Theme Init
@include mat.all-component-themes($theme);
@include mat.all-legacy-component-themes($theme);

I've been looking into the problem with the way I have set up my $themeand the foreground and background properties (see below) but I can't work out what the problem is?

$theme: (
  color: (
    primary: $theme-primary,
    accent: $theme-accent,
    warn: $theme-warn,
  ),
  typography: $typography,
  density: 0,
  is-dark: false,
  foreground: $mat-light-theme-foreground,
  background: $mat-light-theme-background,
);

Has anyone else had this problem or can anyone advise me on where I am going wrong? Any advice or help would be appreciated.

Answer 1

Moving the properties inside the color seemed to fix the problem

$theme: (
  color: (
    primary: $theme-primary,
    accent: $theme-accent,
    warn: $theme-warn,
    foreground:  $mat-light-theme-foreground,
    background: $mat-light-theme-background,
  ),
  typography: $typography,
  density: 0,
  is-dark: false,
);