Error in styles.scss after upgrading to Angular 18

[dark verge]

Any idea what I'm doing wrong? This was working until upgrading to Angular 18. I'm guessing what I'm doing was deprecated... but I can't figure out the new way of defining typography configs..

Thanks!!

✘ [ERROR] Undefined function.
╷
13 │ $vangular-typography: mat.define-typography-config(
│ ┌───────────────────────^
14 │ │ $font-family: 'Roboto, sans-serif',
15 │ │ $body-1: mat.define-typography-level(14px, 22px, 400),
16 │ │ );
│ └─^
╵
src/styles.scss 13:23 root stylesheet [plugin angular-sass]

angular:styles/global:styles:1:8:
  1 │ @import 'src/styles.scss';
    ╵         ~~~~~~~~~~~~~~~~~

my styles.scss:
// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;

@import 'roboto-fontface/css/roboto/roboto-fontface.css';

// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();

$vangular-typography: mat.define-typography-config(
$font-family: 'Roboto, sans-serif',
$body-1: mat.define-typography-level(14px, 22px, 400),
);

[brazen bay]

try mat.m2-define-typography-config(

[dark verge]

ooh.. that worked!

any idea how to get around this one?
✘ [ERROR] Undefined variable.
╷
169 │ mat.$deep-purple-palette,
│ ^^^^^^^^^^^^^^^^^^^^^^^^
╵

hmm.. trying m2- prefix there too.

[brazen bay]

if you've used ng update all these migrations would have been automatically applied.

[dark verge]

oh.. right.. I forgot that. thanks!