title: Angular custom theme - SassError: $map: null is not a map
body: <p>I have created the following custom theme for my angular project:</p>
  <pre><code>@use '@angular/material' as mat;
  /* You can add global styles to this file, and also import other style files */
  
  
  @include mat.core();
  
  $f-brand: (
    50 : #e0f2f1,
    100 : #b3e0db,
    200 : #80cbc4,
    300 : #4db6ac,
    400 : #26a69a,
    500 : #009688,
    600 : #008e80,
    700 : #008375,
    800 : #00796b,
    900 : #006858,
    A100 : #97ffec,
    A200 : #64ffe3,
    A400 : #31ffda,
    A700 : #18ffd5,
    contrast: (
      50 : #000000,
      100 : #000000,
      200 : #000000,
      300 : #000000,
      400 : #ffffff,
      500 : #ffffff,
      600 : #ffffff,
      700 : #ffffff,
      800 : #ffffff,
      900 : #ffffff,
      A100 : #000000,
      A200 : #000000,
      A400 : #000000,
      A700 : #000000,
    )
  );
  
  $primary: mat.define-palette($f-brand);
  
  $theme: mat.define-light-theme($primary);
  
  @include mat.all-component-themes($theme);
  </code></pre>
  <p>I have also added the custom theme to my general styles.css file but when I run &quot;ng serve&quot; I get the following error:</p>
  <pre><code>SassError: $map: null is not a map.
    ╷
  9 │   $foreground-base: map.get($foreground, base);
    │                     ^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules\@angular\material\core\ripple\_ripple-theme.scss 9:21  color()
    node_modules\@angular\material\core\ripple\_ripple-theme.scss 30:7  @content
    node_modules\@angular\material\core\theming\_theming.scss 376:3     private-check-duplicate-theme-styles()
    node_modules\@angular\material\core\ripple\_ripple-theme.scss 27:3  theme()
    node_modules\@angular\material\core\_core-theme.scss 48:5           @content
    node_modules\@angular\material\core\theming\_theming.scss 376:3     private-check-duplicate-theme-styles()
    node_modules\@angular\material\core\_core-theme.scss 47:3           theme()
    node_modules\@angular\material\core\theming\_all-theme.scss 43:5    @content
    node_modules\@angular\material\core\theming\_theming.scss 376:3     private-check-duplicate-theme-styles()
    node_modules\@angular\material\core\theming\_all-theme.scss 42:3    all-component-themes()
    src\styles-f-theme.scss 44:1                                        root stylesheet
  </code></pre>
  <p>By searching the web I found out that &quot;map.get&quot; seems now to be &quot;map-get&quot;. Unfortunately I don't have a clue how to fix this.</p>
  <p>The Angular version used in my project is &quot;14.0.5&quot; and Angular Material version is &quot;14.0.4&quot;,</p>