I am completely lost here and all of the documentation you can find here or medium doesn't seem to be helping and it seems outdated.

Specifically, I am trying to use @mixins or adjust parts of the components theme aspects.

In I can get the typography and color palette to each component just fine.

However, if I want to adjust the foreground / background (I don't know what the difference is) I can't get any sort of expected result.

My theme is adjusted to my custom palette here:

$my-custom-primary: mat.define-palette(alive.$my-custom-palette-primary, 900);
$my-custom-accent: mat.define-palette(alive.$my-custom-palette-secondary, 900, A100, A400);

// The warn palette is optional (defaults to red).
$my-custom-warn: mat.define-palette(mat.$red-palette);

$my-theme: mat.define-light-theme((
  color: (
    primary: $my-custom-primary,
    accent: $my-custom-accent,
    warn: $my-custom-warn,
  )
));

That works and I can adjust each theme with color and typography

However, the foreground for light and or dark have absolutely no adjustment from my palette or the actual palette in the material module. Nothing I do adjusts the actual foreground / background colors

What's odd is that the theme says that for define-palette foreground and background suggests that the setting would come from my custom palette

// node_modules/@angular/material/core/theming/_theming.scss
@function _mat-create-light-color-config($primary, $accent, $warn: null) {
  @return (
    primary: $primary,
    accent: $accent,
    warn: if($warn != null, $warn, define-palette(palette.$red-palette)),
    is-dark: false,
    foreground: palette.$light-theme-foreground-palette,
    background: palette.$light-theme-background-palette,
  );
}

What I want to be able to do is change the color of my disable button:

// none of this does anything in my palette or materials palette 
$light-theme-background-palette: (
  status-bar: map.get($grey-palette, 300),
  app-bar:    map.get($grey-palette, 100),
  background: map.get($grey-palette, 50),
  hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UX
  card:       white,
  dialog:     white,
  disabled-button: rgba(black, 0.12),
  raised-button: white,
  focused-button: $dark-focused,
  selected-button: map.get($grey-palette, 300),
  selected-disabled-button: map.get($grey-palette, 400),
  disabled-button-toggle: map.get($grey-palette, 200),
  unselected-chip: map.get($grey-palette, 300),
  disabled-list-option: map.get($grey-palette, 200),
  tooltip: map.get($grey-palette, 700),
);

I don't know I am just lost. About to just go for the css lol.