_progress-bar-theme.scss

@use '../core/mdc-helpers/mdc-helpers';
@use '../core/theming/theming';
@use '@material/theme/theme-color' as mdc-theme-color;
@use '@material/linear-progress/linear-progress-theme' as mdc-linear-progress-theme;
@use 'sass:color';
@use 'sass:meta';


@mixin _palette-styles($color) {
  $color-value: mdc-theme-color.prop-value($color);

  // We can't set the `track-color` using `theme`, because it isn't possible for it to use a CSS
  // variable since MDC's buffer animation works by constructing an SVG string from this color.
  @include mdc-linear-progress-theme.theme-styles((
    // TODO(crisbeto): the buffer color should come from somewhere in MDC, however at the time of
    // writing, their buffer color is hardcoded to #e6e6e6 which both doesn't account for theming
    // and doesn't match the Material design spec. For now we approximate the buffer background by
    // applying an opacity to the color of the bar.
    track-color: if(
      meta.type-of($color-value) == color,
      color.adjust($color-value, $alpha: -0.75),
      $color-value
    ),
  ));

  @include mdc-linear-progress-theme.theme((
    active-indicator-color: $color-value,
  ));
}

@mixin color($config-or-theme) {
  $config: theming.get-color-config($config-or-theme);
  @include mdc-helpers.using-mdc-theme($config) {
    .mat-mdc-progress-bar {
      @include _palette-styles(primary);

      &.mat-accent {
        @include _palette-styles(secondary);
      }

      &.mat-warn {
        @include _palette-styles(error);
      }
    }
  }
}

@mixin typography($config-or-theme) {}

@mixin density($config-or-theme) {}

@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-progress-bar') {
    $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);
    }
  }
}