Angular 12 Material custom color default-contrast not working

I'm having difficulty obtaining the default-contrast contrast when using Angular Material in an Angular 12 project.

I have created my custom theme using palette colors for the $primary, $accent and $warn values, and they're working properly for the material components. My problem comes with trying to use values in other colors within the palette to style other elements in the project with SCSS.

So far, I've tried creating additional color variables within the @mixin that I used to define my custom theme. When I create them inside the mixin and then create specific CSS classes also inside the mixin, they're not being picked up and applied when I run the project.

If I create the color variables within the @mixin and then try to use those variables outside the mixin, I receive the 'variable not defined' error when trying to build the project.

I've also tried all the various approaches I've seen in various other posts here on SO and on other sites including:

$darkblue-contrast: mat-color($dark-blue, default-contrast);

$darkblue-contrast: mat-color($dark-blue, '500-contrast');

$darkblue-contrast: map-color($dark-blue, default-contrast);

Regardless of which approach I try - understanding that the $darkblue: mat-color($dark-blue, default-contrast); is the preferred approach - whenever I go to use the variable for my color: property in my class, it doesn't even show the color property when inspecting with Chrome DevTools.

Class definition:

.background {
  &.primary {
    background-color: $darkblue;
    color: $darkblue-contrast;
  }
}

DevTools output:

.background.primary {
    background-color: #002244;
}
.sg-swatch {
    border: 1px solid rgba(33, 33, 33, 0.25);
    border-bottom-left-radius: 25px;
    grid-column-end: span 6;
    grid-row-end: span 2;
    margin-bottom: 10px;
    min-height: 60px;
    padding: 0 10px 20px 0;
}

Color palette definition:

$black: #000;
$white: #fff;

$dark-blue: (
  50: #e0e4e9,
  100: #b3bdc7,
  200: #8091a2,
  300: #4d647c,
  400: #264360,
  500: #024,
  600: #001e3e,
  700: #001935,
  800: #00142d,
  900: #000c1f,
  A100: #5c80ff,
  A200: #2958ff,
  A400: #0036f5,
  A700: #0031db,
  contrast: (
    50: $black,
    100: $black,
    200: $black,
    300: $white,
    400: $white,
    500: $white,
    600: $white,
    700: $white,
    800: $white,
    900: $white,
    A100: $black,
    A200: $white,
    A400: $white,
    A700: $white,
  )
);

Template code:

<div class="sg-swatch background primary">
  <div>Primary color</div>
</div>

What am I missing to get the contrast color to be picked up and applied properly to the class?

Edit 10/4/2021 After being given the first comment, I tried using $darkblue-contrast: mat.get-contrast-color-from-palette($dark-blue, default-contrast); both inside and outside of the @mixin for the theme. Inside the @mixin gave me the 'variable not defined' error and outside of the @mixin gave me the following error:

ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: There is no module with the namespace "mat".
   ╷
44 │ $darkblue-contrast: mat.get-contrast-color-from-palette($dark-blue, default-contrast);

Edit 10/4/2021.1 Following the recommendation to add the @use statement, I receiving the following new error:

ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: There is no module with the namespace "map".
   ╷
46 │ $darkblue-contrast: mat.get-contrast-color-from-palette(map.get($dark-blue, primary), 500);
   │                                                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵

Of course, the 'map' doesn't have any issue working within the confines of a @mixin and I'm already using the @import '~@angular/material/theming'; statement, so I thought the map would be referenced by the additional statement.