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);
}

Continue reading...