refactor: use system terminology in foreground/background palettes

[andrewseguin]

trafficstars

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"