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.