Angular Material 18: 'Hue "500" does not exist in palette'

I uploaded my project to angular 18 (also material v.18) and the styles of my palette theme have changed and I cannot deploy my project.

@use 'SASS:map';
@use '@angular/material' as mat;


$md-primary: (
    50 : #fee6fe,
    100 : #fcbffd,
    200 : #fa95fb,
    300 : #f76bf9,
    400 : #f64bf8,
    500 : #f42bf7,
    600 : #f326f6,
    700 : #f120f5,
    800 : #ef1af3,
    900 : #ec10f1,
    A100 : #ffffff,
    A200 : #feebff,
    A400 : #fdb8ff,
    A700 : #fc9eff,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);


$md-secondary: (
    50 : #f6e1ff,
    100 : #eab3ff,
    200 : #dc80ff,
    300 : #cd4dff,
    400 : #c327ff,
    500 : #b801ff,
    600 : #b101ff,
    700 : #a801ff,
    800 : #a001ff,
    900 : #9100ff,
    A100 : #ffffff,
    A200 : #f9f2ff,
    A400 : #e0bfff,
    A700 : #d4a6ff,
    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,
    )
);

//GLOBAL

$my-primary: mat.m2-define-palette($md-primary, 500);
$my-secondary: mat.m2-define-palette($md-secondary, 500);
$my-theme: mat.m2-define-light-theme((
 color: (
   primary: $my-primary,
   accent: $my-secondary,
 )
));
@include mat.all-component-themes($my-theme);

$color-config: mat.get-color-config($my-theme);
$primary-palette: map.get($color-config, 'primary');
$primary: mat.get-theme-color($primary-palette, 500);
$secondary: mat.get-theme-color($accent-palette, 500);
$light-secondary: mat.get-theme-color($accent-palette, 300);
$light-primary: mat.get-theme-color($primary-palette, 300);

//PALETTE BASICS
$light-grey: rgb(228, 228, 228);
$grey: #252525;
$secondary-text: #525252;
$black: rgb(20, 20, 20);


:root {
    --primary: #{$primary};
    --secondary: #{$secondary};
    --light-secondary: #{$light-secondary};
    --light-primary: #{$light-primary};
    --light-grey: #{$light-grey};
    --grey: #{$grey};
    --secondary-text: #{$secondary-text};
    --black: #{$black};
}

I have tried changing the variables to m2-(example) but I get the error: 'Hue "500" does not exist in palette. Available hues are: 0, 10, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100, secondary, neutral, neutral-variant, error'

The get-theme-color seems to accept different arguments, I am able to get it to work by changing to below format

mat.get-theme-color($theme, $palette, $hue);

SNIPPET:

$color-config: mat.m2-get-color-config($my-theme);
$primary-palette: map.get($color-config, 'primary');
$accent-palette: map.get($color-config, 'accent');
$primary: mat.get-theme-color($my-theme, 'primary', 500);
$secondary: mat.get-theme-color($my-theme, 'accent', 500);
$light-secondary: mat.get-theme-color($my-theme, 'accent', 300);
$light-primary: mat.get-theme-color($my-theme, 'primary', 300);

FULL CODE:

@use 'SASS:map';
@use '@angular/material' as mat;


$md-primary: (
    50 : #fee6fe,
    100 : #fcbffd,
    200 : #fa95fb,
    300 : #f76bf9,
    400 : #f64bf8,
    500 : #f42bf7,
    600 : #f326f6,
    700 : #f120f5,
    800 : #ef1af3,
    900 : #ec10f1,
    A100 : #ffffff,
    A200 : #feebff,
    A400 : #fdb8ff,
    A700 : #fc9eff,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);


$md-secondary: (
    50 : #f6e1ff,
    100 : #eab3ff,
    200 : #dc80ff,
    300 : #cd4dff,
    400 : #c327ff,
    500 : #b801ff,
    600 : #b101ff,
    700 : #a801ff,
    800 : #a001ff,
    900 : #9100ff,
    A100 : #ffffff,
    A200 : #f9f2ff,
    A400 : #e0bfff,
    A700 : #d4a6ff,
    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,
    )
);

//GLOBAL

$my-primary: mat.m2-define-palette($md-primary, 500);
$my-secondary: mat.m2-define-palette($md-secondary, 500);
$my-theme: mat.m2-define-light-theme((
 color: (
   primary: $my-primary,
   accent: $my-secondary,
 )
));
@include mat.all-component-themes($my-theme);

$color-config: mat.m2-get-color-config($my-theme);
$primary-palette: map.get($color-config, 'primary');
$accent-palette: map.get($color-config, 'accent');
$primary: mat.get-theme-color($my-theme, 'primary', 500);
$secondary: mat.get-theme-color($my-theme, 'accent', 500);
$light-secondary: mat.get-theme-color($my-theme, 'accent', 300);
$light-primary: mat.get-theme-color($my-theme, 'primary', 300);

//PALETTE BASICS
$light-grey: rgb(228, 228, 228);
$grey: #252525;
$secondary-text: #525252;
$black: rgb(20, 20, 20);


:root {
    --primary: #{$primary};
    --secondary: #{$secondary};
    --light-secondary: #{$light-secondary};
    --light-primary: #{$light-primary};
    --light-grey: #{$light-grey};
    --grey: #{$grey};
    --secondary-text: #{$secondary-text};
    --black: #{$black};
}