Предупреждение об газете в угловой 19 с темами материальной индивидуальной индикации с использованием Lighten () ⇐ CSS

[Anonymous]

Недавно я обновил свое угловое приложение до версии 19, а также обновил угловой материал. После обновления я столкнулся с предупреждением об ископке для пользовательской темы, определенной в Theme.scss. Предупреждение связано с функцией Lighten (), используемой в моем файле SASS: < /p>
▲ [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
< /code>
Когда я использую Color.adjust ($ Light-Background, $ Легкость: 20%) или Mat.color У меня есть ошибка: < /p>
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);
}


Подробнее здесь: https://stackoverflow.com/questions/792 ... ng-lighten