Angular 18 customising theme issue

I am trying to migrate some code from my angular 16 project to the updated version which is now angular 18

Below is what has been implemented and I keep getting compilation errors from

@use '@angular/material' as mat;

// Define custom palettes for NAPSA colors
$napsa-blue: (
50: #e4e6ec,
100: #bcc0d0,
200: #9096b0,
300: #646b90,
400: #424c79,
500: #212c61,
600: #1d2759,
700: #18214f,
800: #141b45,
900: #0b1033,
A100: #6e7cff,
A200: #3b4eff,
A400: #0820ff,
A700: #0016ee,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #ffffff,
400: #ffffff,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #000000,
A200: #ffffff,
A400: #ffffff,
A700: #ffffff,
),
);

$napsa-orange: (
50: #fef4e3,
100: #fee4ba,
200: #fdd28c,
300: #fcc05e,
400: #fbb33c,
500: #faa519,
600: #f99d16,
700: #f99312,
800: #f88a0e,
900: #f67908,
A100: #ffffff,
A200: #fff4eb,
A400: #ffd7b8,
A700: #ffc89f,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #000000,
400: #000000,
500: #000000,
600: #000000,
700: #000000,
800: #000000,
900: #000000,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000,
),
);

// Define palettes using the new theming API
$light-primary: mat.define-palette($napsa-blue);
$light-accent: mat.define-palette($napsa-orange);
$dark-primary: mat.define-palette($napsa-blue);
$dark-accent: mat.define-palette($napsa-orange);

// Define themes using mat.createTheme()
$light-theme: mat.create-theme((
color: (
primary: $light-primary,
accent: $light-accent,
background: mat.define-palette(mat.$grey-palette),
)
));

$dark-theme: mat.create-theme((
color: (
primary: $dark-primary,
accent: $dark-accent,
background: mat.define-palette(mat.$grey-palette, 900),
),
is-dark: true
));

// Apply all component themes for the light theme
@include mat.all-component-themes($light-theme);


and this is the error I keep getting

Undefined function.
╷
72 │ $light-primary: mat.define-palette($napsa-blue);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src/napsa.scss 72:17 root stylesheet

./src/napsa.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined function.
╷
71 │ $light-primary: mat.define-palette($napsa-blue);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src/napsa.scss 71:17 root stylesheet



** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✖ Failed to compile.```

Continue reading...