Override/Replace Angular Material component theme mixin

Question

In my project I would like to extent/override an existing theme e.g. with another property value or with another palette color or remove some definitions:

// Excerpt: node_modules/@angular/material/radio/_radio-theme.scss
// Angular Material Design v14

@mixin _color($palette) {
  // ...
}

@mixin color($config-or-theme) {
  $config: theming.get-color-config($config-or-theme);
  $primary: map.get($config, primary);
  $accent: map.get($config, accent);
  $warn: map.get($config, warn);
  $success: map.get($config, success);  // NEW
  $background: map.get($config, background);
  $foreground: map.get($config, foreground);

  // .mat-radio-outer-circle {          // REMOVED
  //   border-color: theming.get-color-from-palette($foreground, disabled-text);
  // }

  .mat-radio-button {
    &.mat-primary {
      @include _color($primary);
    }

    &.mat-accent {
      @include _color($accent);
    }

    &.mat-warn {
      @include _color($warn);
    }

    &.mat-success {                     // NEW
      @include _color($success);        //
    }                                   //
  }
}

@mixin typography($config-or-theme) {
  $config: typography.private-typography-to-2014-config(
      theming.get-typography-config($config-or-theme));
  .mat-radio-button {
    font-family: typography-utils.font-family($config);
    font-weight: typography-utils.font-weight($config, display-4);
  }

  .mat-radio-label {
    // line-height: 2;
    line-height: 2.5;                    // UPDATED value
  }

  // Text label next to radio.
  .mat-radio-label-content {
    .mat-radio-checked & {
      // font-weight: typography-utils.font-weight($config, body-1);
      font-weight: typography-utils.font-weight($config, body-2);   // UPDATED value
    }
  }
}

@mixin theme($theme-or-color-config) {
  $theme: theming.private-legacy-get-theme($theme-or-color-config);
  @include theming.private-check-duplicate-theme-styles($theme, 'mat-radio') {
    $color: theming.get-color-config($theme);
    $density: theming.get-density-config($theme);
    $typography: theming.get-typography-config($theme);

    @if $color != null {
      @include color($color);
    }
    @if $density != null {
      @include _density($density);
    }
    @if $typography != null {
      @include typography($typography);
    }
  }
}

In the past, I could just override/replace the mixins (e.g. mat-option-color, mat-radio-typography), since they were globally available and in use before compiling the final css. Since, the refactoring of Material Design library to use the Sass module system, this is no longer possible. (Or is it?)

Goal: I want to override/replace e.g. the color or typography mixin of a component from Angular Material Design with my own one.

Do you have ideas how to achieve that?

My current approach is to duplicate all the "bootstrap files" from Material and bootstrap the theme by myself, just with some files (the overridden component themes) replaced with my versions. This feels somehow cumbersome, compared to the previous approach, where I just had to override the specific mixin.

If you need more details, or have question, just let me know.

Thanks for your help!

ps: I inherited this theme and have to upgrade an old theme to the latest Angular Material Design (v14). I know that overriding "internal" mixins probably was never a good idea, but this is how it was done in the past.

Override/Replace Angular Material component theme mixin

0 Answers0