feat(material/core): add option to configure prefix of system variables

[konstantindenerz]

The component tokens (CSS variables) can reference the system variables abstraction with the configuration use-system-variables at the color and typography options level.

With this PR, you can replace the --sys- prefix with, for example, --md-sys-. This makes it more flexible to adopt your own tokens, which are based on the Material 3 naming scheme but include a custom design system prefix, e.g., --labs-sys-. This saves additional mapping.

Demo configuration:

// Create a theme with the specified color type and density.
@function create-theme($type: light, $density: 0) {
  @return mat.define-theme((
    color: (
      theme-type: $type,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
      use-system-variables: true,
      system-variables-prefix: md-sys,
    ),
    typography: (use-system-variables: true, system-variables-prefix: md-sys),
    density: (
      scale: $density
    ),
  ));
}

I made a small optimization to the map with the tokens, as the key and value were the same and only the --sys- prefix was added.

The result:

[mmalerba]

Nice! I think people will find this useful

[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.}