Parameter "system-variables-prefix" is not used by "mat.system-level-colors" mixin

[slaviki]

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

When the parameter "system-variables-prefix" is used, the custom variables generated by "mat.system-level-colors" still have the "--sys" prefix

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-u6bo3u?file=src%2Fm3-theme.scss
Steps to reproduce:

1. Create a new Angular project with Angular Material ~18.1.0
2. Run "ng generate @angular/material:m3-theme" with any color value
3. In the generated file "m3-theme.scss" in the bottom add "system-variables-prefix: test" to both color and typography:

$light-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: $_primary,
    tertiary: $_tertiary,
    use-system-variables: true,
    system-variables-prefix: test
  ),
  typography: (
    use-system-variables: true,
    system-variables-prefix: test
  ),
));

4. Include the generated theme into your styles file

@use '@angular/material' as mat;
@use './m3-theme.scss' as my-theme;

@include mat.core();

html {
  // Apply the light theme by default
  @include mat.core-theme(my-theme.$light-theme);
  @include mat.button-theme(my-theme.$light-theme);

  // When using system variables, remember to provide values for them
  // or uncomment the lines below to generate them from the theme.
  @include mat.system-level-colors(my-theme.$light-theme);
  @include mat.system-level-typography(my-theme.$light-theme);
}

5. Run the project and inspect "html" tag. You will see that the component's variables have the "--test" prefix, but the variables itself still have the "--sys" prefix
   

Expected Behavior

Generated custom variables should have the prefix provided in the "system-variables-prefix" parameter both for colors and typography

Actual Behavior

Generated custom variables always have the "--sys" prefix, even if the "system-variables-prefix" parameter is provided

Environment

• Angular: 18.1.0
• CDK/Material: 18.1.2
• Browser(s): Chrome 126
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}