Angular Material theme colors like mdc-theme-text-icon-on-background is undefined

Question

Any idea why? The following is my custom theme that was more or less working pre-MDC. I've modified it to support MDC:

$custom-typography: mat.define-legacy-typography-config(
  $font-family: "Inter, sans-serif",
  $button: mat.define-typography-level(14px, 17px, 700),
);

$app-primary: mat.define-palette($la-purple, 600, 300, 900);
$app-accent: mat.define-palette($my-cyan, 700, 300, 1000);
$app-warn: mat.define-palette($my-red, 700, 300, 900);
$app-base: mat.define-palette($my-grey, 900, 700);

// Changing the main text color: https://stackoverflow.com/a/46157803/961609
@function app-mat-light-theme-foreground($color) {
  @return (
    base: $color,
    divider: rgba($color, 0.12),
    dividers: rgba($color, 0.12),
    disabled: rgba(black, 0.38),
    disabled-button: rgba($color, 0.26),
    disabled-text: rgba($color, 0.38),
    elevation: $color,
    hint-text: rgba(black, 0.38),
    secondary-text: rgba($color, 0.54),
    icon: rgba($color, 0.54),
    icons: rgba($color, 0.54),
    text: rgba($color, 0.87),
    slider-min: rgba($color, 0.87),
    slider-off: rgba($color, 0.26),
    slider-off-active: rgba($color, 0.38)
  );
}

$app-foreground: app-mat-light-theme-foreground(mat.get-color-from-palette($app-base));

@function app-mat-light-theme-background($color) {
  @return (
    status-bar: mat.get-color-from-palette($color, 400),
    app-bar: mat.get-color-from-palette($color, 200),
    background: mat.get-color-from-palette($color, 100),
    hover: rgba(black, 0.04),
    card: white,
    dialog: white,
    disabled-button: rgba(black, 0.12),
    raised-button: white,
    focused-button: rgba(black, 0.12),
    selected-button: mat.get-color-from-palette($color, 400),
    selected-disabled-button: mat.get-color-from-palette($color, 500),
    disabled-button-toggle: mat.get-color-from-palette($color, 300),
    unselected-chip: mat.get-color-from-palette($color, 400),
    disabled-list-option: mat.get-color-from-palette($color, 300),
    tooltip: mat.get-color-from-palette($color, 800)
  );
}

$app-background: app-mat-light-theme-background($app-base);

// Create the theme object (a Sass map containing all of the palettes).
$app-theme: mat.define-light-theme(
  (
    color: (
      primary: $app-primary,
      accent: $app-accent,
      warn: $app-warn,
    ),
    typography: $custom-typography,
    density: -1,
  )
);

$app-theme: map-merge(
  $app-theme,
  (
    foreground: $app-foreground,
    background: $app-background,
  )
);

@include mat.core-theme($app-theme);
@include mat.all-component-themes($app-theme);

I've made sure to copy the foreground and background values exactly from the latest Angular Material Components repo.

I think my custom theme is a bit overly convoluted for what it does. All I really need is to:

replace the primary/accent/warn palettes
replace the base color
replace the font

Angular Material theme colors like mdc-theme-text-icon-on-background is undefined

0 Answers0