bug(core/theming/_inspsction): can't pass opacity parameter to get-theme-color() method as it doesn't accept more than 3 arguments

[imtiazShakil]

trafficstars

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

in @angular/material/core/theming/_inspection.scss file the function get-theme-color accepts 2 or 3 arguments. This is fine for Angular Material Design 3. But this breaks functionality of Material Design 2 because in Material Design 2 we can pass opacity parameter to get-theme-color method.

More technically, please check current implementation of get-theme-color below:

@function get-theme-color($theme, $args...) {
  $version: get-theme-version($theme);
  $args-count: list.length($args);
  @if $args-count != 1 and $args-count != 2 {
    @error #{'Expected 2 or 3 arguments. Got:'} $args-count + 1;
  }

  @if $version == 0 {
    @return m2-inspection.get-theme-color($theme, $args...);
  }
  @else if $version == 1 {
    @if $args-count == 1 {
      @return _get-theme-role-color($theme, $args...);
    }
    @else if $args-count == 2 {
      @return _get-theme-palette-color($theme, $args...);
    }
  }
  @else {
    @error #{'Unrecognized theme version:'} $version;
  }
}

• when $version is zero, this function calls m2-inspection.get-theme-color($theme, $args...)
• m2-inspection.get-theme-color function internally calls theming.get-color-from-palette($palette, $args...)
• theming.get-color-from-palette function accepts 3 arguments $palette, $hue, $opacity

so when I want to make custom theme for a component like below, it fails

@use "@angular/material" as mat;

@mixin color($theme) {
  // this will result in an error, because get-theme-color accepts not more than 3 arguments
  $foreground-palette-divider-color: mat.get-theme-color($theme, foreground, divider, 0.3);
}

Reproduction

Error reproduction is explained in Description.

Expected Behavior

checking the argument length should be dynamic in get-theme-color method,

• for Angular Material Design 2, maximum 4 arguments should be allowed
• for Angular Material Design 3, maximum 3 arguments should be allowed

Actual Behavior

when I call get-theme-color method

• for both Angular Material Design 2, Angular Material Design 3 maximum 3 arguments is allowed

Environment

• Angular: ^17.2.1
• CDK/Material: ^17.2.0
• Browser(s): Chrome, Firefox
• Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu