Способ предоставить тему по умолчанию для Angular модуля библиотеки, если не поставляется?

Question

Я пытаюсь создать и предоставить тему по умолчанию для моего Angular модуля библиотеки. Я следил за этой статьей, но у меня возникли проблемы с тем, чтобы заставить ее работать. https://material.angular.io/guide/theming-your-components

Я настраиваю свой библиотечный проект следующим образом:

src/
  lib/
    assets/
      _defaults.scss
      _mixing.scss   // Planning to include it in the module bundle so people could supply their theme.                     

Затем в _mixing.scss у меня есть следующее:

@import '~@angular/material/theming';

// Define a mixin that accepts a theme and outputs the theme-specific styles.
@mixin set-my-component-theme($theme) {
    // Extract the palettes you need from the theme definition.
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
  }

@mixin apply-theme($theme) {
    @include angular-material-theme($theme);
    @include set-my-component($theme);
}

Затем в моем _defaults.scss я пытаюсь предоставить значения по умолчанию для остальной части моей библиотеки.

@import '~@angular/material/theming';
@import './mixins';

// Include non-theme styles for core.
@include mat-core();

// my "defaults" if nothing is supplied
$primary: mat-palette($mat-indigo);
$accent:  mat-palette($mat-pink, A200, A100, A400);
$theme: mat-light-theme($primary, $accent);

@include apply-theme($theme);

Но когда я пытаюсь использовать его, хотя я включил свой _defaults.scss, я не получить переменные. Пример:

@import 'assets/defaults';

:host {
  color: $primary;
}

Я получаю следующую ошибку:

[1]         color: $primary;
[1]               ^
[1]       (50: #e8eaf6, 100: #c5cae9, 200: #9fa8da, 300: #7986cb, 400: #5c6bc0, 500: #3f51b5, 600: #3949ab, 700: #303f9f, 800: #283593, 900: #1a237e, A100: #8c9eff, A200: #536dfe, A400: #3d5afe, A700: #304ffe, contrast: (50: rgba(0, 0, 0, 0.87), 100: rgba(0, 0, 0, 0.87), 200: rgba(0, 0, 0, 0.87), 300: white, 400: white, 500: white, 600: white, 700: white, 800: white, 900: white, A100: rgba(0, 0, 0, 0.87), A200: white, A400: white, A700: white), default: #3f51b5, lighter: #c5cae9, darker: #303f9f, default-contrast: white, lighter-contrast: rgba(0, 0, 0, 0.87), darker-contrast: white, "50-contrast": rgba(0, 0, 0, 0.87), "100-contrast": rgba(0, 0, 0, 0.87), "200-contrast": rgba(0, 0, 0, 0.87), "300-contrast": white, "400-contrast": white, "500-contrast": white, "600-contrast": white, "700-contrast": white, "800-contrast": white, "900-contrast": white, "A100-contrast": rgba(0, 0, 0, 0.87), "A200-contrast": white, "A400-contrast": white, "A700-contrast": white, "contrast-contrast": null) isn't a valid CSS value.
[1]    ╷
[1] 29 │         color: $primary;
[1]    │                ^^^^^^^^
[1]    ╵
[1]   stdin 29:16  root stylesheet

или

[1]       color: mat-color(mat-palette($primary));
[1]                                   ^
[1]       Undefined variable.
[1]     ╷
[1] 137 │       color: mat-color(mat-palette($primary));
[1]     │                                    ^^^^^^^^
[1]     ╵
[1]   stdin 137:36  root stylesheet

Я не уверен, что я даже использую это право, любое предложения экспертов / советы будут оценены.