refactor: remove badge component token values from theme

[andrewseguin]

Refactors the M3 theme config so that it contains system-level values (colors, typography, density, shape, motion, state, elevation) so that component M3 token files can be given the theme config to derive its values.

Previously, M3 token files were used to insert values into the theme config directly when the theme config was created. When a component's theme mixin was called, those values were used. This indirection is difficult to follow in the code, making it unclear when values were created and how they are pulled, because the theme files were not actually calling the m3 token files.

mat.define-theme() -> m3-badge.get-tokens($system) -> $theme
...
mat.badge-theme($theme) -> map.get($theme, tokens) -> token-utils.create-token-values($tokens)

This change makes the flow very clear: a theme config is created with some system values, and then the token file is directly called from the theme config.

mat.define-theme() -> $theme
...
mat.badge-theme($theme) -> m3-badge.get-tokens($theme) -> token-utils.create-token-values($tokens)

This also clears up the mapping with variant colors, which were also inserted in the theme config in an unintuitive way. Instead, we can just perform a simple string replacement, e.g. secondary instead of primary.

The change is performed for badge to show how it will be done with the remaining components. Once that is complete, a lot of cleanup can occur to remove unnecessary flows and mixins.

[andrewseguin]

The changes were merged into the following branches: main, 20.0.x

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