Skip to content

bug(COMPONENT): Deprecation warning: color.blue() is deprecated in _token-definition.scss (Sass 1.62+) #31385

Open
@fableplay13

Description

@fableplay13

Description

Hi,
when using Angular Material v19 with a recent version of Sass, I get the following warning during compilation:

Deprecation Warning on line 232, column 31 of .../node_modules/@angular/material/core/tokens/_token-definition.scss:232:31:
color.blue() is deprecated. Suggestion:
color.channel($color, "blue", $space: rgb)

The warning comes from the luminance($color) function, which uses the deprecated color.blue() function.
This warning appears every time I import Material themes in my SCSS files.

Request:
Could you update the function and all occurrences of color.blue() (and similar) using the syntax suggested by Sass (color.channel($color, "blue", $space: rgb)) to avoid the warning in future releases?

Context:

Angular Material version: 19.x
Sass version: >=1.62
The warning does not block the build, but makes it harder to spot other useful warnings.

Thank you for your support!

Expected Behavior

Could you update the function and all occurrences of color.blue() (and similar) using the syntax suggested by Sass (color.channel($color, "blue", $space: rgb)) to avoid the warning in future releases

Actual Behavior

Deprecation Warning on line 232, column 31 of .../node_modules/@angular/material/core/tokens/_token-definition.scss:232:31:
color.blue() is deprecated. Suggestion:
color.channel($color, "blue", $space: rgb)

/* BEFORE */
@function _luminance($color) {
$red: _linear-channel-value(color.red($color));
$green: _linear-channel-value(color.green($color));
$blue: _linear-channel-value(color.blue($color));

@return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
}

/* AFTER */
@function _luminance($color) {
$red: color.channel($color, "red", $space: rgb);
$green: color.channel($color, "green", $space: rgb);
$blue: color.channel($color, "blue", $space: rgb);

@return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
}

Environment

Angular Material version: 19.x
Sass version: >=1.62

Metadata

Metadata

Assignees

Labels

P4A relatively minor issue that is not relevant to core functionsarea: material/core

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions