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"

[mmalerba]

are these (e.g. base-08-04 )things we intend to expose long term or just temporarily?

[andrewseguin]

just temporary to help me figure things out. I actually dont want users using this at all. Eventually we'll have some final exposed tokens like we have in GM3. In fact hopefully just something that fits right into https://material.angular.dev/guide/system-variables