Deprecation Warning in Angular 19 with Material Custom Theme Using lighten()

I recently updated my Angular app to version 19 and also updated Angular Material. After the update, I encountered a deprecation warning for a custom theme defined in theme.scss. The warning is related to the lighten() function used in my Sass file:

   ▲ [WARNING] Deprecation [plugin angular-sass]

projects/platform/styles/theme.scss:61:11:
  61 │   tooltip: lighten(#2c2c2c, 20%),
      ╵            ^

lighten() is deprecated. Suggestions:

color.scale($color, $lightness: 24.1706161137%)
color.adjust($color, $lightness: 20%)

More info: https://sass-lang.com/d/color-functions

When I use color.adjust($light-background, $lightness: 20%) or mat.color I have error :

X [ERROR] There is no module with the namespace "color".


@use '@angular/material' as mat;


// Base Material styles
@include mat.core();

$dark-primary-text: rgba(black, 0.87);
$light-primary-text: white;
$dark-focused: rgba(black, 0.12);

// Define primary palette
$mat-primary: (
  main: #f26729,
  lighter: #fbd1bf,
  darker: #ec4a19,
  200: #f26729,
  contrast: (
    main: $dark-primary-text,
    lighter: $dark-primary-text,
    darker: $light-primary-text,
  )
);

// Define accent palette
$mat-accent: (
  main: #6207ee,
  lighter: #d0b5fa,
  darker: #4604e7,
  200: #6207ee,
  contrast: (
    main: $light-primary-text,
    lighter: $dark-primary-text,
    darker: $light-primary-text,
  )
);

// Define warn palette
$mat-warn: (
  main: #b00020,
  lighter: #e7b3bc,
  darker: #970013,
  200: #b00020,
  contrast: (
    main: $light-primary-text,
    lighter: $dark-primary-text,
    darker: $light-primary-text,
  )
);

// Define light background
$light-background: #f5f5f5;

// Light theme background settings
$mat-light-theme-background: (
  background: $light-background,
  status-bar: darken($light-background, 20%),
  app-bar: darken($light-background, 5%),
  hover: rgba(#2c2c2c, 0.04),
  card: lighten($light-background, 5%),
  dialog: lighten($light-background, 5%),
  tooltip: lighten(#2c2c2c, 20%),
  disabled-button: rgba(#2c2c2c, 0.12),
  raised-button: red,
  focused-button: $dark-focused,
  selected-button: darken($light-background, 20%),
  selected-disabled-button: darken($light-background, 30%),
  disabled-button-toggle: darken($light-background, 10%),
  unselected-chip: darken($light-background, 10%),
  disabled-list-option: darken($light-background, 10%),
);

// Define overall theme
$theme-primary: mat.m2-define-palette($mat-primary, main, lighter, darker);
$theme-accent: mat.m2-define-palette($mat-accent, main, lighter, darker);
$theme-warn: mat.m2-define-palette($mat-warn, main, lighter, darker);

$theme: (
  primary: $theme-primary,
  accent: $theme-accent,
  warn: $theme-warn,
  is-dark: false,
  background: $mat-light-theme-background,
);

// Define light theme with customized background
$app-theme: mat.m2-define-light-theme((
  color: (
    primary: $theme-primary,
    accent: $theme-accent,
    warn: $theme-warn,
  ),
  typography: mat.m2-define-typography-config(),
  density: 0,
));

html {
  @include mat.all-component-themes($app-theme);
}

Please make sure you use @use to import the SASS utility before using it.

Breaking Change: Color Functions

@use "sass:color";
...

...
color.scale($color, $lightness: 24.1706161137%)
color.adjust($color, $lightness: 20%)