bug(Theme): There is no way to use reference tokens as values of system tokens in angular material 18 theming api

[hrshtkpr]

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

I am using angular 18, following is snippet from my package.json

 "  @angular/animations": "^18.0.0",
    "@angular/cdk": "^18.0.0",
    "@angular/common": "^18.0.0",
    "@angular/compiler": "^18.0.0",
    "@angular/core": "^18.0.0",
    "@angular/forms": "^18.0.0",
    "@angular/material": "^18.0.0",
    "@angular/platform-browser": "^18.0.0",
    "@angular/platform-browser-dynamic": "^18.0.0",
    "@angular/platform-server": "^18.0.0",
    "@angular/router": "^18.0.0",
    "@angular/ssr": "^18.0.0",

I used the following command to generate a custom theme: ng generate @angular/material:m3-theme I answerd Yes to the following prompt:

Do you want to use system-level variables in the theme? System-level variables make dynamic theming easier through CSS custom properties, but increase the bundle size. Yes

This generated a m3-theme.scss for me. I uset this in my global styles scss like the following:

@import 'm3-theme';

@include mat.core();

:root {

  @include mat.all-component-themes($light-theme);

  --sys-background: red;
  --sys-error: red;
  ...
  --sys-primary: var(--md-ref-palette-primary0);
  ...
}

According to the material3 design specifications, we should refer to the reference tokens from system tokens and not hard code values in system tokens. Hence I am trying to style/themem my application as above.

However, --mdc-ref-palette-primary0 token is not present at all. I tried a number of combinations of the name but none worked. I do see in @angular/material/core/tokens/_m3-tokens.scss, there is a function that should generate these tokens.

/// Creates a set of md-ref-palette tokens from the given palettes. (See /// https://github.com/material-components/material-components-web/blob/master/packages/mdc-tokens/v0_161/_md-ref-palette.scss)

@function _generate-ref-palette-tokens($primary, $tertiary, $error) {
  @return sass-utils.merge-all(
      (black: #000, white: #fff),
      _generate-palette-tokens($primary, primary),
      _generate-palette-tokens(map.get($primary, secondary), secondary),
      _generate-palette-tokens($tertiary, tertiary),
      _generate-palette-tokens(map.get($primary, neutral), neutral),
      _generate-palette-tokens(map.get($primary, neutral-variant), neutral-variant),
      _generate-palette-tokens($error, error),
  );
}

When I run the application and inspect in browser, I do see --sys-* tokens but none of the ref tokens.

I want to use these tokens to give my sys token correct values instead of hardcoding them.

Reproduction

StackBlitz link: Steps to reproduce: 1. 2.

Expected Behavior

Theming api should generate and expose referemce tokens that can be referred to like so: --sys-primary: var(--md-ref-palette-primary0);

Actual Behavior

Reference tokens such as --md-ref-palette-primary0 are not exposed.

Environment

Angular CLI: 18.0.1 Node: 22.0.0 Package Manager: npm 9.5.0 OS: darwin arm64

Angular: 18.0.0 ... animations, cdk, common, compiler, compiler-cli, core, forms ... material, platform-browser, platform-browser-dynamic ... platform-server, router

Package Version

@angular-devkit/architect 0.1800.1 @angular-devkit/build-angular 18.0.1 @angular-devkit/core 18.0.1 @angular-devkit/schematics 18.0.1 @angular/cli 18.0.1 @angular/ssr 18.0.1 @schematics/angular 18.0.1 ng-packagr 18.0.0 rxjs 7.8.1 typescript 5.4.5 zone.js 0.14.6