refactor: use system terminology in foreground/background palettes

[andrewseguin]

Adds "system" key to the theme config's background and foreground palettes, such as "surface" and "on-surface". E.g. here's bottom sheet's M2 token before/after:

// Before:
@function get-color-tokens($theme) {
  @return (
    container-text-color: inspection.get-theme-color($theme, foreground, text),
    container-background-color: inspection.get-theme-color($theme, background, dialog),
  );
}

// After:
@function get-color-tokens($theme) {
  @return (
    container-text-color: inspection.get-theme-color($theme, foreground, on-surface),
    container-background-color: inspection.get-theme-color($theme, background, surface),
  );
}

Changes the library to use these keys instead of the existing bespoke terms, like "disabled-button" or "hint-text". Instead, m2 token files should exclusively use these system keys which will help eventually make sense which tokens should be finalized.

The existing keys are kept for backwards compatibility, but going forward the new keys should eventually be trimmed down to make more sense, especially with opacities. Already it's apparent that components are not well aligned, like the button toggle making up a good number of tokens for itself rather than relying on the "system"

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