_tabs-theme.scss

@use 'sass:map';
@use '@material/theme/theme-color' as mdc-theme-color;
@use '@material/theme/theme' as mdc-theme;
@use '@material/tab-indicator' as mdc-tab-indicator;
@use '@material/tab-indicator/tab-indicator-theme' as mdc-tab-indicator-theme;
@use '@material/tab' as mdc-tab;
@use '@material/tab/mixins' as mdc-tab-mixins;
@use '@material/tab-bar' as mdc-tab-bar;
@use '../core/theming/theming';
@use '../core/typography/typography';
@use '../core/mdc-helpers/mdc-helpers';


@mixin color($config-or-theme) {
  $config: theming.get-color-config($config-or-theme);
  $primary: theming.get-color-from-palette(map.get($config, primary));
  $accent: theming.get-color-from-palette(map.get($config, accent));
  $warn: theming.get-color-from-palette(map.get($config, warn));
  $foreground: map.get($config, foreground);

  @include mdc-helpers.using-mdc-theme($config) {
    .mat-mdc-tab, .mat-mdc-tab-link {
      @include mdc-tab-mixins.text-label-color(rgba(mdc-theme-color.$on-surface, 0.6));

      // MDC seems to include a background color on tabs which only stands out on dark themes.
      // Disable for now for backwards compatibility. These styles are inside the theme in order
      // to avoid CSS specificity issues.
      background-color: transparent;

      &.mat-mdc-tab-disabled {
        .mdc-tab__ripple::before,
        .mat-ripple-element {
          background-color: theming.get-color-from-palette($foreground, disabled);
        }
      }
    }

    @include _palette-styles($primary);

    .mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
      &.mat-accent {
        @include _palette-styles($accent);
      }

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

    .mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
      &.mat-background-primary {
        @include _background(primary, on-primary);
      }

      &.mat-background-accent {
        @include _background(secondary, on-secondary);
      }

      &.mat-background-warn {
        @include _background(error, on-error);
      }
    }

    .mat-mdc-tab-header-pagination-chevron {
      @include mdc-theme.prop(border-color, on-surface);
    }
  }
}

@mixin _background($background-color, $foreground-color) {
  $background-value: mdc-theme-color.prop-value($background-color);
  $foreground-value: mdc-theme-color.prop-value($foreground-color);
  --mat-mdc-tab-header-with-background-background-color: #{$background-value};
  --mat-mdc-tab-header-with-background-foreground-color: #{$foreground-value};
}

@mixin _palette-styles($color) {
  .mat-mdc-tab, .mat-mdc-tab-link {
    &:not(.mat-mdc-tab-disabled) {
      @include mdc-tab-mixins.active-text-label-color($color);
      @include mdc-tab-indicator-theme.theme-styles((active-indicator-color: $color));
    }
  }

  .mdc-tab__ripple::before,
  .mat-mdc-tab .mat-ripple-element,
  .mat-mdc-tab-header-pagination .mat-ripple-element,
  .mat-mdc-tab-link .mat-ripple-element {
    @include mdc-theme.prop(background-color, $color);
  }
}

@mixin typography($config-or-theme) {
  $config: typography.private-typography-to-2018-config(
      theming.get-typography-config($config-or-theme));
  @include mdc-helpers.using-mdc-typography($config) {
    @include mdc-tab.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);
    @include mdc-tab-indicator.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
  }
}

@mixin density($config-or-theme) {
  $density-scale: theming.get-density-config($config-or-theme);
  .mat-mdc-tab-header {
    @include mdc-tab-bar.density($density-scale, $query: mdc-helpers.$mdc-base-styles-query);
  }
}

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