Components: mat-tabs-theme() doesn't apply a mat-dark-theme() font color

[AlanCrevon]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

If you style only certain component as described in the doc, mat-dark-theme() doesn't apply white font color on tab headers.

What is the current behavior?

Tab headers have black font color

What are the steps to reproduce?

Here is my theme.scss (WIP)

@import '~@angular/material/_theming.scss';

@include mat-core();
$primary: mat-palette($mat-cyan, 700, A100, A400);
$accent:  mat-palette($mat-red, 700, A100, A400);
$warn:    mat-palette($mat-orange);

$dark-theme : mat-dark-theme($primary, $accent, $warn);
$light-theme : mat-light-theme($primary, $accent, $warn);

//@include angular-material-theme($dark-theme);
@include mat-core-theme($dark-theme);
@include mat-autocomplete-theme($light-theme);
@include mat-button-theme($light-theme);
@include mat-button-toggle-theme($light-theme);
@include mat-card-theme($light-theme);
@include mat-checkbox-theme($light-theme);
@include mat-chips-theme($light-theme);
@include mat-dialog-theme($light-theme);
@include mat-grid-list-theme($light-theme);
@include mat-icon-theme($light-theme);
@include mat-input-theme($light-theme);
@include mat-list-theme($dark-theme);
@include mat-menu-theme($light-theme);
@include mat-progress-bar-theme($light-theme);
@include mat-progress-spinner-theme($light-theme);
@include mat-radio-theme($light-theme);
@include mat-select-theme($light-theme);
@include mat-sidenav-theme($light-theme);
@include mat-slide-toggle-theme($light-theme);
@include mat-slider-theme($light-theme);
@include mat-tabs-theme($dark-theme);
@include mat-toolbar-theme($light-theme);
@include mat-tooltip-theme($light-theme);

What is the use-case or motivation for changing an existing behavior?

Using a dark background image requires to use some mat-dark-theme() components and some mat-light-theme() components.

Which versions of Angular, Material, OS, browsers are affected?

Angular 4.1
Material 2.0.0-beta3

Is there anything else we should know?

Nope :)

[AlanCrevon]

I think i found why : in _theming.scss in @mixin mat-tabs-theme($theme)

.mat-tab-label, .mat-tab-link {
    color: currentColor;

    &.mat-tab-disabled {
      color: mat-color($foreground, disabled-text);
    }
  }

should be (i think)

.mat-tab-label, .mat-tab-link {
    color: mat-color($foreground, text);

    &.mat-tab-disabled {
      color: mat-color($foreground, disabled-text);
    }
  }

I'm not sure about how to make a PR to fix this. If this fix is confirmed, I'd appreciate if someone could do the PR for me. Thanks.

[willshowell]

Demo http://plnkr.co/edit/NDlsghziQErBmgnVailj?p=preview

Also worth noting that the $header-border should probably be changed too:

-$header-border: 1px solid mat-color($background, status-bar);
+$header-border: 1px solid mat-color($foreground, divider);

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}